Da die letzte Phase der Einführung bereits im August 2021 stattfand, ist das Core Web Vitals-Update bereits da. Das bedeutet, dass wir nun von vorläufigen Bewertungen übergehen und einige gemeinsame Muster identifizieren können.
Anhand historischer Daten haben wir überprüft, wie updatebereit sowohl mobile als auch Desktop-Websites waren und welche Core Web Vitals-Metriken (Largest Contentful Paint, Total Blocking Time* und Cumulative Layout Shift) bessere Werte aufwiesen.
Wir haben es auch geschafft, die entscheidendsten Faktoren hervorzuheben, die die Leistung der Seiten in Bezug auf die drei Metriken beeinflussen.
Unter Verwendung von Informationen aus unserem Site Audit-Tool haben wir uns die Durchschnittswerte für LCP, TBT und CLS angesehen und die häufigsten Probleme bei jeder Metrik identifiziert.
Mit diesen Erkenntnissen bewaffnet, können Sie besser gerüstet sein, um Ihre Seiten für maximale CWV-Konformität zu optimieren und so ultimative Benutzerfreundlichkeit und höhere Rankings sicherzustellen.
*Hinweis: Im Site Audit verwenden wir die Metrik Total Blocking Time (TBT) anstelle der Metrik First Input Delay (FID), da letztere den Zugriff auf Daten von echten Benutzern impliziert. Google selbst hat erklärt, dass diese beiden Metriken miteinander korrelieren und beide zur Bewertung von Interaktivitätsproblemen verwendet werden können.
Studienmethodik
Ein vollständiges CWV-Audit der analysierten Websites zur Untersuchung der häufigsten und seltensten Probleme für jede Metrik.
Der erste Teil der Studie basiert auf der Analyse von 1,7 Mio. Desktop- und 324K mobilen URLs. Wir haben die Werte vor dem Update vom Juni 2021 für LCP-, TBT- und CLS-Metriken mit den Statistiken vom September 2021 verglichen, als das Update abgeschlossen war.
Um den Vergleich anzustellen, haben wir überprüft, wie viele Seiten vor und nach dem Update innerhalb der drei Kategoriebereiche — „gut“, „schlecht“, „zu verbessern“ — für jede Metrik lagen.
Wir erwähnen auch „Any TBT“- und „Any CLS“-Werte. Diese spiegeln einfach die Durchschnittswerte für alle URLs wider, ohne Rücksicht auf ihre TBT- oder CLS-Leistung.
Um Faktoren zu identifizieren, die jede Metrik beeinflussen, und um zu sehen, welche Fehler häufiger auftreten als andere, haben wir das Site Audit vom September 2021 von 4 Mio. Desktop- und 1,7 Mio. mobilen URLs genommen. Insgesamt hat das Tool diese Seiten durch 23 verschiedene CWV-spezifische Prüfungen** geleitet, was es uns ermöglichte, die schwierigsten und am einfachsten zu bestehenden Audits aufzudecken.
**Hinweis: Eine Liste aller Prüfungen, ihrer Definitionen und eine vollständige Aufschlüsselung des Audits für Mobil- und Desktop-Geräte finden Sie ganz am Ende des Beitrags.
Ergebnisse der Core Web Vitals-Studie für Mobil & Desktop
Wie viele URLs ihre LCP-, TBT- und CLS-Werte verbessert haben
Die folgenden Grafiken zeigen, wie viele Seiten — mobil und Desktop — tatsächlich die guten Schwellenwerte für die drei CWV-Metriken (kombiniert und individuell) ab Juni 2021 im Vergleich zu September 2021 bestanden haben.
Vor dem Update konnten nur 34,5% der Desktop-Seiten die erforderlichen Schwellenwerte für alle drei Metriken erfüllen. Nach dem Update stieg die Anzahl der Desktop-URLs, die alle „guten“ Werte für LCP, TBT und CLS aufweisen, um 7 Prozentpunkte.
Mobile URLs zeigen ein düstereres Bild, wobei weniger als 4% der mobilen Seiten die „guten“ Schwellenwerte für alle drei Metriken bestehen. Im Juni 2021 war diese Zahl fast dreimal höher, was impliziert, dass mobile Seiten weniger updatebereit waren als ihre Desktop-Pendants.
Bewertung positiver Verschiebungen für CWV-Metriken vor und nach dem Update
CWV-Metriken haben jedoch mehr Ebenen als nur eine „gute“ Punktzahl. LCP, TBT und CLS können in drei Kategorien fallen: „Gut“, „Zu verbessern“ und „Schlecht“.
Um die Änderungen nach dem Update auf einer granulareren Ebene zu analysieren, haben wir alle Verbesserungen überprüft, die über die drei Metriken hinweg aufgetreten sind, und untersucht, wie viele URLs einige Gewinne erzielt haben, indem sie ihre LCP-, TBT- und CLS-Werte von Kategorie zu Kategorie verschoben haben.
Wenn es um positive Verschiebungen für Werte vor und nach dem Update geht, sehen wir die folgenden Trends:
Wir sahen eine sehr niedrige Anzahl — bis zu 0,1% — von Seiten, die alle Werte auf der ganzen Linie verbessert haben. Ein Drittel aller Seiten sah jedoch Punktverbesserungen für mindestens eine Metrik. Dies gilt sowohl für mobile als auch für Desktop-URLs.
Auf Mobilgeräten war die beliebteste Kategorienänderung für alle drei Metriken der Bereich von „schlecht“ zu „zu verbessern“. Desktop-URLs zeigen positivere Trends, da die Mehrheit der LCP-, TBT- und CLS-Werte der URLs von der Kategorie „zu verbessern“ zur Kategorie „gut“ wechselte.
Auf Mobilgeräten scheint der Sprung von „schlecht“ zu „gut“ fast wie eine Mission Impossible, mit einer Ausnahme. CLS scheint die einfachste Schwelle zu sein, um direkt von „schlecht“ zu „gut“ zu gelangen, und mehr Seiten haben signifikante Verbesserungen an ihren CLS-Werten vorgenommen.
Wir haben unsere Erkenntnisse gesammelt, nachdem Google die CLS-Schwelle gesenkt hat, daher ist die offensichtliche Leichtigkeit wahrscheinlich mit dieser Änderung verbunden.
Mobile Seiten verzeichnen die wenigsten positiven Verschiebungen, wenn es um LCP geht, während bei Desktop-URLs TBT die größten Herausforderungen zu verursachen scheint und den niedrigsten positiven Veränderungstrend von 6,7% zeigt.
Faktoren, die LCP-, TBT- und CLS-Werte beeinflussen
Durch die detailliertere Analyse der Elemente jeder Metrik konnten wir Faktoren identifizieren, die diese Werte beeinflussen.
Da LCP die Ladezeit des größten Seitenelements — Bild- oder Textblock — innerhalb des Viewports des Benutzers misst, zählt alles, was über den Bildschirm hinausgeht, nicht.
Unsere Analyse zeigte, dass und
Wenn wir jedoch genauer hinsehen, werden wir mehr Unterschiede zwischen den Tag-Elementen für Mobil- und Desktop-Geräte sehen, die LCP-Werte beeinflussen.
und
und Tags betroffen.
H1 beginnt auf Mobilgeräten ein Problem zu sein, wahrscheinlich weil H1s eines der größten Elemente im Viewport sind, wenn wir es mit kleineren Bildschirmen zu tun haben.
Das bedeutet, dass es einen Unterschied gibt zwischen dem, was auf Mobilgeräten als das größte Element angesehen wird, im Vergleich zu Desktop.
Sie können das Site Audit-Tool verwenden, um herauszufinden, welches spezifische Seitenelement in Ihrem speziellen Fall als das größte inhaltliche Element innerhalb des Viewports angesehen wird.
Da TBT misst, wie schnell Benutzer mit Elementen der Seite interagieren können, mussten wir uns die langen Aufgaben ansehen.
Da lange Aufgaben Teil eines JavaScript-Codes sind, der die Benutzeroberfläche einfriert, müssen Sie Ihre gesamte TBT unter 300 ms halten, um eine „gute“ TBT-Punktzahl zu erhalten.
Während Sie so viele lange Aufgaben haben können, wie Sie möchten (solange sie die 300-ms-Schwelle nicht überschreiten), ist es dennoch interessant zu sehen, dass sowohl mobile als auch Desktop-Seiten, die eine „gute“ TBT-Punktzahl haben, mit der geringsten Anzahl an langen Aufgaben kommen:
Im Durchschnitt hat eine Desktop-Seite mit einer „schlechten“ TBT-Punktzahl 6-mal mehr lange Aufgaben im Vergleich zu denen, die in den „guten“ Bereich fallen. Auf Mobilgeräten ist dieser Unterschied bescheidener — er ist dreifach.
Die CLS-Metrik, die die visuelle Stabilität der Seite misst, hängt stark von Layout-Verschiebungen ab, die immer dann auftreten, wenn sich die Position eines sichtbaren Elements von einem gerenderten Frame zum nächsten ändert.
Wie bei TBT geht es bei Layout-Verschiebungen eher um das Ausmaß als um die Anzahl dieser Verschiebungen. Und wenn wir dafür bei TBT keinen direkten Beweis gesehen haben, macht unsere CLS-Analyse dies offensichtlich:
Wir sehen keinen großen Unterschied in der Anzahl der Layout-Verschiebungen zwischen Seiten mit verschiedenen CLS-Werten, was bedeutet, dass Sie es sich leisten können, ziemlich viele Verschiebungen zu haben, solange sie die Schwellenwerte erfüllen.
Die häufigsten Core Web Vitals-Probleme und wie man sie behebt
Während wir die Top-Faktoren identifiziert haben, die die CWV-Werte der Seiten beeinflussen, bedeutet das nicht, dass diese als die dringendsten Probleme für Website-Besitzer angesehen werden können.
Hier kommt der Core Web Vitals-Bericht von Site Audit ins Spiel und hilft dabei, die schwierigsten Prüfungen zu identifizieren.
Das Site Audit-Tool leitet jede Seite durch 23 verschiedene Prüfungen, bei denen wir die Logik von Pagespeed Insights nehmen und berücksichtigen:
Wenn die Prüfung über der 90er-Marke liegt, geht die Seite in die grüne Zone, und wir betrachten dieses Audit als bestanden;
Wenn der Wert unter 49 liegt, bewegt sich die Seite für eine gegebene Prüfung in die rote Zone.
Aus der Vogelperspektive können wir sehen, dass mobile Seiten mit einer viel höheren Anzahl von Problemen mit CWV konfrontiert sind. Desktop-URLs scheinen bei der Bestehung von CWV-Prüfungen ziemlich gute Arbeit zu leisten, wobei die Mehrheit — 68% — der Prüfungen im grünen Bereich liegt.
Im Gegensatz zu Desktop, wo Seiten die Mehrheit der Prüfungen bestanden haben, sind auf Mobilgeräten nur 34% der Prüfungen grün. Besorgniserregende 65% aller Audits sind entweder gelb oder rot, was bedeutet, dass mobile Seiten die CWV-Anforderungen für diese Prüfungen nicht erfüllen.
Lassen Sie uns einen nuancierteren Blick auf alle Prüfungen werfen und die Top drei der einfachsten und schwierigsten Prüfungen für sowohl mobile als auch Desktop-Seiten sehen.
Bildelemente, die keine explizite Breite und Höhe haben, scheinen das größte Problem für sowohl mobile als auch Desktop-Seiten zu sein.
Doppelte Module in JavaScript-Bundles, mehrere Seitenumleitungen und die Verwendung von Videoformaten für effiziente animierte Inhalte werden typischerweise mit wenig bis gar keinen Problemen bestanden.
Doch wenn es darum geht, render-blockierende Ressourcen zu eliminieren, ist der Unterschied frappierend: Desktop-URLs bestehen diese Prüfung fast, während mobile es kaum in die gelbe Zone schaffen.
Site Audit erkennt nicht nur Probleme über alle Metriken hinweg, sondern trennt sie auch in LCP-, CLS- und TBT-bezogene Probleme.
Stellen Sie sicher, dass Sie die metrik-für-metrik-Aufschlüsselung der häufigsten Probleme für Ihre speziellen Seiten durchgehen, da Site Audit das Problem tatsächlich so formt, dass es die Lösung beinhaltet.
Zusammenfassung
Da das Core Web Vitals-Update bereits da ist, haben Sie keine andere Wahl, als Ihre Punktzahl für alle drei Metriken — CLS, LCP und TBT — zu verbessern, um Google zu zeigen, dass Ihre Seiten die ultimative Benutzerfreundlichkeit bieten und diese Rankings verdienen.
Wir hoffen, dass unsere Studie, die viel Boden abgedeckt und wichtige Erkenntnisse enthüllt hat, eine klare Anleitung bietet, um Ihre Optimierungsbemühungen weiter zu unterstützen.
Während wir vorschlagen, dass Sie sich alle Entdeckungen noch einmal ansehen, gibt es ein paar Dinge, die Sie aus dieser Studie mitnehmen sollten:
Nur ein Drittel der Desktop- und 3% der mobilen URLs bestehen die Schwellenwerte für alle drei CWV-Metriken.
Seit dem Update sahen wir nur Verbesserungen auf der ganzen Linie für etwa 1% der Seiten. Und nur weniger als 40% sahen bessere Werte für mindestens eine Metrik.
Das bedeutet, dass Sie wahrscheinlich viel Raum für Verbesserungen haben, und wenn sie richtig und frühzeitig durchgeführt werden, können Ihre Seitenoptimierungsbemühungen Ihren Seiten einen Wettbewerbsvorteil verschaffen.
Die Mehrheit der Prüfungen für Desktops ist grün (d.h. bestanden), während wir für Mobilgeräte meist Gelb und Rot sehen. Das bedeutet, dass es einfacher ist, Audits auf Desktop als auf Mobilgeräten zu bestehen, wobei mobile Seiten im Durchschnitt mehr Probleme haben als Desktop.
Höchstwahrscheinlich liegt dies an den mobilen Schwellenwerten und der Tatsache, dass Labordaten auf einem 3G-Gerät simuliert werden.
Da CLS die am wenigsten „problematische“ Metrik ist, müssen Sie daran arbeiten, Ihre LCP- und TBT-Werte zu verbessern:
CLS-Verbesserungen führen eher zu einem schnellen Sprung vom „schlechten“ zum „guten“ Wertebereich.
Geben Sie Ihren ,
und
Tags ein Audit, um sicherzustellen, dass sie Ihren LCP-Wert nicht senken. Verwenden Sie das Site Audit-Tool, um Seitenelemente zu identifizieren, die die Langsamkeit verursachen.
Halten Sie Ihre gesamte Blockierzeit unter 300 ms, um eine „gute“ TBT-Punktzahl zu gewährleisten. Auch hier hilft Ihnen das Site Audit-Tool dabei, genau zu bestimmen, welche langen Aufgaben Ihre gesamte TBT-Punktzahl am meisten behindern.
Achten Sie auf das Ausmaß Ihrer Layout-Verschiebungen und werden Sie die los, die zu viel Platz der CLS-Schwelle einnehmen. Site Audit spiegelt den CLS-Beitrag jeder größten Layout-Verschiebung wider.
Achten Sie auf die Höhe und Breite von Bildelementen und andere häufige CWV-Probleme. Werfen Sie einen zweiten Blick auf die schwierigsten Audits. Die Mehrheit der Probleme — sowohl für mobile als auch für Desktop-URLs — tritt bei Bildgrößen auf. Da es sich um eine CLS-bezogene Prüfung handelt, die eine ziemlich schnelle Lösung hat, können Sie sie als schnellen Gewinn zur Verbesserung Ihrer CLS-Punktzahl verwenden.
Für Desktops ist die häufigste Verschiebung der Wechsel vom Bereich „zu verbessern“ zu einem „guten“ Bereich. Aber die Mehrheit der mobilen URLs springt von der Kategorie „schlecht“ zu „zu verbessern“, mit der einzigen Ausnahme CLS. Erwarten Sie also nicht, einen schnellen Wechsel von allen „schlechten“ zu allen „guten“ Werten über jede einzelne CWV-Metrik hinweg zu machen, und achten Sie auf Änderungen bei den Schwellenwerten.
Bonus: Eine vollständige Liste der häufigsten CWV-Probleme für mobile und Desktop-URLs
Wenn Sie neugierig sind, die vollständige Liste aller Site Audit-Prüfungen zu erkunden und die Durchschnittswerte für Mobil-Desktop-Seiten zu sehen, fahren Sie mit der Maus über die Tabelle unten und erhalten Sie das vollständige Bild.
Durchschnittliche Audit-Werte
JavaScript-Ausführungszeit reduzieren : Wenn Ihr JavaScript lange zur Ausführung benötigt, verlangsamt es Ihre Seitenleistung auf verschiedene Weise, wie z.B. Netzwerkkosten, Analyse- und Kompilierungskosten, Ausführungskosten oder Speicherkosten;
Übermäßige DOM-Größe vermeiden : Ein großer DOM-Baum kann Ihre Seitenleistung auf vielfältige Weise verlangsamen, wie z.B. Netzwerkeffizienz und Ladeleistung, Laufzeitleistung und Speicherleistung;
Doppelte Module in JavaScript-Bundles entfernen : JavaScript-Bundles auf einer Mehrheit von Webseiten werden typischerweise durch den Import von Code aus beliebten Bibliotheken, Abhängigkeiten und Paketen erstellt. Dies kann oft dazu führen, dass Ihre Seite doppelte Module aus mehreren Quellen erbt;
Videoformate für animierte Inhalte verwenden : Große GIFs sind ineffizient für die Bereitstellung animierter Inhalte, daher ist es besser, Videoformate zu verwenden
Sicherstellen, dass Text während des Webfont-Ladens sichtbar bleibt : Schriftarten sind oft große Dateien, die eine Weile zum Laden benötigen. Einige Browser verbergen Text, bis die Schriftart geladen ist, was zu einem Blitz von unsichtbarem Text führt;
Vermeiden Sie die Bereitstellung von Legacy-JavaScript für moderne Browser : Vermeiden Sie die Bereitstellung von Legacy-JavaScript-Code (d.h. ES5-Standard) für moderne Browser, damit Sie verhindern können, dass unnötig große JavaScript-Dateien von Benutzern heruntergeladen werden;
Hauptthread-Arbeit minimieren : Der Renderer-Prozess des Browsers ist das, was Ihren Code in eine Webseite verwandelt, mit der Ihre Benutzer interagieren können. Standardmäßig verarbeitet der Hauptthread des Renderer-Prozesses typischerweise den meisten Code: er analysiert das HTML und baut das DOM auf, analysiert das CSS und wendet die angegebenen Stile an, und analysiert, bewertet und führt das JavaScript aus;
Render-blockierende Ressourcen eliminieren : Der Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts listet alle URLs auf, die den ersten Paint Ihrer Seite blockieren. Das Ziel ist es, die Auswirkungen dieser render-blockierenden URLs zu reduzieren, indem kritische Ressourcen inline gesetzt, nicht-kritische Ressourcen verzögert und alles Unbenutzte entfernt wird;
Server-Antwortzeiten reduzieren : Der Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts meldet die Time to First Byte, die Zeit, die der Browser eines Benutzers benötigt, um das erste Byte des Seiteninhalts zu empfangen;
Lazy-Load von Drittanbieter-Ressourcen mit Fassaden : Drittanbieter-Ressourcen werden oft zum Anzeigen von Anzeigen oder Videos und zur Integration mit sozialen Medien verwendet. Der Standardansatz besteht darin, Drittanbieter-Ressourcen zu laden, sobald die Seite geladen wird, aber dies kann das Laden der Seite unnötig verlangsamen. Wenn der Drittanbieter-Inhalt nicht kritisch ist, kann dieser Leistungskosten durch Lazy-Loading reduziert werden;
Auswirkungen von Drittanbieter-Code reduzieren : Um ein Werbenetzwerk, einen Social-Media-Button, einen A/B-Test oder einen Analysedienst zu Ihrer Seite hinzuzufügen, müssen Sie normalerweise ein Drittanbieter-Skript zu Ihrem HTML hinzufügen. Diese Drittanbieter-Skripte können Ihre Seitenladeleistung erheblich beeinflussen;
Vermeiden Sie enorme Netzwerknutzlasten : Große Netzwerknutzlasten korrelieren stark mit langen Ladezeiten. Sie kosten Benutzer auch Geld; zum Beispiel müssen Benutzer möglicherweise für mehr Mobilfunkdaten bezahlen. Daher ist die Reduzierung der Gesamtgröße der Netzwerkanfragen Ihrer Seite gut für die Erfahrung Ihrer Benutzer auf Ihrer Website und ihre Brieftaschen;
CSS minimieren : Der Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts listet alle nicht minimierten CSS-Dateien auf, zusammen mit den potenziellen Einsparungen in Kibibytes (KiB), wenn diese Dateien minimiert werden;
Nicht dimensionierte Bilder : Das Bild sieht gut aus, aber es verschwendet die Daten der Benutzer und schadet der Seitenleistung;
Unbenutzte CSS-Regeln entfernen : Der Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts listet alle Stylesheets mit unbenutztem CSS mit einer potenziellen Einsparung von 2 KiB oder mehr auf. Entfernen Sie das unbenutzte CSS, um unnötige Bytes zu reduzieren, die durch Netzwerkaktivität verbraucht werden;
Vorverbindung zu erforderlichen Ursprüngen. : Der Abschnitt „Möglichkeiten“ Ihres Lighthouse-Berichts listet alle wichtigen Anfragen auf, die noch keine Fetch-Anfragen mit priorisieren;
Textkomprimierung aktivieren : Textbasierte Ressourcen sollten mit Komprimierung bereitgestellt werden, um die gesamten Netzwerk-Bytes zu minimieren.
Wie Agenturen groß gewinnen mit
Wie Agenturen groß gewinnen mit In diesem Leitfaden finden Sie eine Sammlung von Schritt-für-Schritt-Anleitungen ..
Lead-Magnet-Ideen für Ihre Website
Lead-Magnet-Ideen für Ihre Website Lead-Generierung ist hart. Wir bitten Interessenten, uns mit ..
Passende Leistung: KI-Marketingagentur