Google von den Kern -Web -Vitalen von Google und seine Promotion -Methoden
verstehen
Kernpunkte:
Google möchte, dass Benutzer ein gutes Web -Erlebnis haben, sodass Websites, die in den Suchergebnissen höher sind, schneller laden. Natürlich ist dies eine große Vereinfachung, aber unter der Annahme, dass Sie zwei Websites mit ähnlichen Inhalten und Publikum vergleichen, sollten die schnelleren Lade -Websites in den Ergebnissen höher rangieren. Die Methode von Google, diese Metrik zu messen, war jedoch schon immer etwas schwer fassbar. Daher werden Kern-Web-Metriken eingeführt, um Website-Eigentümern und Entwicklern eine dringend benötigte Klarheit zu bieten.
Leider ist "Performance" ein allgemeiner Begriff, der Dutzende von Metriken abdeckt ...Erste Bytezeit, Rendering, CPU -Nutzung, JavaScript -Haufengröße, erste Inhaltszeichnung, erste sinnvolle Zeichnung, Erstmal Laden, Seite voll Laden, Interaktionszeit, Stil neu berechnet pro Sekunde und so weiter.
Verschiedene Tools geben unterschiedliche Ergebnissätze zurück, und es ist schwierig zu wissen, wo Sie anfangen sollen.Das Web -Metrics -Programm von Google wurde entwickelt, um die Leistungsbewertung zu vereinfachen und sich auf die wichtigsten Verbesserungen zu konzentrieren. Kern-Web-Metriken sind wichtige Leistungsmetriken, die reale Benutzererfahrungen widerspiegeln. Einige Metriken werden vom Lighthouse -Panel, PageSpeed Insights und Google Search Console in Chrome Devtools berichtet.
Web-Vitals JavaScript Library kann dazu beitragen, realistischere Metriken von echten Benutzern zu messen, die Ihre Website besuchen. Die Ergebnisse können zur weiteren Analyse in Google Analytics oder anderen Endpunkten veröffentlicht werden.
Google empfiehlt, das 75. Perzentil zu verwenden, das mehrere Ergebnisse für dieselbe Metrik aufzeichnet, in der Reihenfolge von besten bis schlimmsten sortiert und dann die Werte von drei Vierteln analysiert. Daher werden drei Viertel der Website-Besucher dieses Leistungsniveau erleben.
Die aktuellen Kern -Web -Metriken sind maximale Inhaltszeichnung, erste Eingangsverzögerung und kumulatives Layout -Versatz, die das Laden, Interaktivität bzw. visuelle Stabilität bewerten.
Maximale Inhaltszeichnung (LCP)
LCP misst die Ladeleistung - Geschwindigkeitsgeschwindigkeit der Inhaltsanzeige .
historische Metriken wie das Laden von Seiten und das Domcontent -Laden waren in dieser Hinsicht immer problematisch, da sie nicht immer die Benutzererfahrung widerspiegeln. Zum Beispiel kann der Spoiler fast sofort erscheinen, es kann jedoch länger dauern, bis er mit einer weiteren AJAX -Anfrage geladen wird.
Maximale Inhaltszeichnung (LCP) meldet die Renderzeit des größten Bild- oder Textblocks, das im Ansichtsfenster sichtbar ist. Zeiten weniger als 2,5 Sekunden gelten als gut, während Zeiten mehr als 4,0 Sekunden als schlecht angesehen werden.
Die in LCP berücksichtigten Elementtypen umfassen:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics">
<p> Logos und Menüs bewegen sich nicht - sie sind stabile Elemente. Die Anzeige wird dem DOM hinzugefügt und ihre Ausgangsposition ändert sich nicht, daher ist sie auch stabil. Das Heldenbild wird jedoch bewegt: </p>
<ol>
<li> Heldenbild ist 360 x 510 Pixel im Ansichtsfenster 360 x 720 Pixel. Daher beträgt der Auswirkungen (360 x 510) / (360 x 720) = 0,71 </li>
<li> Es bewegt sich vertikal um 90 Pixel in der Ansichtsfensterhöhe von 720 Pixel, sodass seine Entfernungsfraktion 90/720 = 0,125 </li> beträgt
</ol>
<p> Daher beträgt die CLS 0,71 x 0,125 = 0,089 </p>
<p> CLS -Werte unter 0,1 gelten als gut, während die über 0,25 als schlecht angesehen werden. In diesem Fall liegt die CLS in einem akzeptablen Bereich, da der betroffene Bereich zwar groß ist, der Abstand zur Bewegung relativ gering ist. Eine größere Werbung erfordert jedoch weitere Aufmerksamkeit. </p>
<p> Der CLS -Algorithmus zeichnet keine Layout -Offsets innerhalb von 500 Millisekunden nach der Benutzerinteraktion auf, die möglicherweise Änderungen der UI oder die Änderung der Ansichtsfenster auslösen können. Daher wird Ihre Seite nicht für Schnittstellenaktualisierungen, Übergänge und Animationen bestraft, die für Operationen erforderlich sind, z. B. das Öffnen eines Vollbildmüses aus dem Hamburger-Symbol. </p>
<p> Das Rendering -Panel (Menü & gt; mehr Tools & Gt; Rendering) in Chrome Devtools bietet die Option Layout -Offset -Bereich. Wählen Sie das Feld aus und aktualisieren Sie die Seite - der Layout -Offset ist blau hervorgehoben. Sie können auch die Netzwerkgeschwindigkeit im Netzwerkbereich ändern, um das Laden zu verlangsamen. </p>
<p> FID/TBT kann verbessert werden durch: </p>
<ol>
<li> Reservierraum für Bild-, Video- und Iframe -Elemente mithilfe <code>width
und height
Eigenschaften, CSS aspect-ratio
Eigenschaften oder alte Tipps zum Füllen (so (so wie der Fall) transform
Verwenden Sie CSS opacity
und Leistungspriorität
Core -Web -Metriken entwickeln sich im Laufe der Zeit, aber die Bewertung von LCP-, FID- und CLS -Metriken kann dazu beitragen, die kritischsten Probleme zu identifizieren. Lösen Sie zuerst schnelle und einfache Rätsel - sie haben normalerweise den größten ROI:
CORE -Web -Metriken FAQ
Das obige ist der detaillierte Inhalt vonKern -Web -Vitals: Eine Anleitung zu den Web -Leistungsmetriken von Google.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!