Der Kern der Web Vitals

Einführung

Seit ihrer Einführung im Mai 2020 hat sich die Core Web Vitals (CWVs)-Suite von Google zu einer wichtigen Messgröße für die Messung der Website-Performance entwickelt. Da Google diese Werte als Teil des Algorithmus für das Seitenranking betrachtet, verbessert die Maximierung der Performance Ihrer Website in Bezug auf CWVs nicht nur die Benutzererfahrung, sondern verbessert auch Ihr Suchmaschinenranking. In diesem artikel werden Tipps und Techniken vorgestellt, mit denen Sie Ihre Seitenergebnisse verbessern, die Benutzerzufriedenheit steigern und Ihr Geschäftsergebnis steigern können.

Was sind Core Web Vitals?

Wie so viele andere Dinge in der Technologie sind auch die Web Vitals von Google ein Schwarm dreibuchstabiger Akronyme, die jeweils einen messbaren Aspekt der Performance einer Website darstellen. Definieren wir die drei wichtigsten Kennzahlen, die die wichtigsten Web-Vitalparameter definieren:

Größte Contentful Paint

Größte Contentful Paint (LCP): Misst die wahrgenommene Ladegeschwindigkeit durch Fokussierung auf die Zeitdauer, die für sichtbare Inhalte über der Faltung zum Laden benötigt wird. Um eine optimale Benutzererfahrung zu gewährleisten, sollte LCP innerhalb von 2,5 Sekunden in der Zeitachse für das Laden der Seite ausgelöst werden.

Erste Eingangsverzögerung

First Input Delay (FID): Misst die Seitenreaktionsgeschwindigkeit durch Messung der Verzögerung zwischen Benutzeraktionen und Seitenreaktion. Um eine optimale Benutzererfahrung zu gewährleisten, sollten Seiten einen FID von maximal 100 Millisekunden aufweisen.

Kumulative Layoutverschiebung

Kumulative Layoutverschiebung (CLS): Misst die visuelle Stabilität anhand einer zusammengesetzten Messung der Layoutverschiebungen auf der Seite während der Wiedergabe. Um eine ideale Benutzererfahrung zu bieten, sollten Seiten einen CLS von 0,1 oder weniger beibehalten; alle zwischen 0,1 und 0,25 werden als moderat angesehen und über 0,25 sind schlecht.

… Und warum sind sie wichtig?

Für viele Unternehmen steht die Website-Performance in direktem Zusammenhang mit dem Geschäftserfolg. Studien zeigen, dass Websites mit bestandenen CWV-Scores im Vergleich zu Seiten, die dies nicht tun, bis zu 37 % mehr Sichtbarkeit in den Suchergebnissen haben können (Beus) und dass verbesserte CWV-Scores sowohl den Umsatz pro Besucher als auch die Konversionsrate steigern können (Duong et al.).

Während der Arbeit mit AkiraEdgio, eine Damenmode-Boutique, konnte die CWVs der Website verbessern, indem die Ladezeiten der ersten Seite von 5 Sekunden auf ~1 Sekunde verkürzt wurden, die CWV-Messungen verbessert und letztendlich eine Steigerung des organischen Traffics um +30%, eine Verbesserung der Checkout-Initiationen um +61% und eine Steigerung der Conversion-Rate um 37% erzielt.

Einfach ausgedrückt: Schnellere Websites sorgen für bessere SEO-Rankings und zufriedenere Nutzer – insbesondere im Kontext von E-Commerce-Websites. Diese Kombination senkt die Bounce-Rate und erhöht die Conversions.

Wie können wir sie verbessern?

Erste Eingangsverzögerung

Beginnen wir mit der tief hängenden Frucht: Erste Eingangsverzögerung. Die gute Nachricht ist, dass Websites häufiger FID-Scores bestehen, was toll ist! Wenn dies jedoch nicht der Fall ist, sind häufig die Skripte von Drittanbietern, die zu Beginn des Lebenszyklus der Website geladen werden, die die Ausführung des Hauptthreads blockieren können, die für den Empfang von Benutzereingaben erforderlich ist. Tools, die Fehler erfassen und Bildschirmaufzeichnungen durchführen, sind die wichtigsten Kandidaten für zusätzliche Untersuchungen.

Tatsächlich kann alles, was den Hauptausführungs-Thread blockiert, zu einer schlechten FID-Leistung beitragen. Behalten Sie ressourcenintensive oder langjährige JavaScript-Aufgaben im Auge, und ziehen Sie in Erwägung, nicht-UI-bezogenen Code einem Webarbeiter neu zu faktorieren. Außerdem verwenden Sie Techniken zum Lazy-Loading und zum Aufteilen von Code, um sicherzustellen, dass nur das erforderliche JavaScript geladen wird und nur dann, wenn es benötigt wird.

Obwohl technisch gesehen kein Kernelement der CWVs ist, ist eine weitere Kennzahl zu erwähnen: Interaction to Next Paint (INP). INP misst die Zeit zwischen der Interaktion mit einer Seite und der nachfolgenden Seitenaktualisierung, die diese Interaktion widerspiegelt. Während INP und FID beide die allgemeine Seitenreaktionsgeschwindigkeit messen, befasst sich INP eher mit allen Seiteninteraktionen als mit der ersten Interaktion, um sicherzustellen, dass die Seite während der gesamten Sitzung reaktionsfähig bleibt, nicht nur bei den Vorinteraktionen. INP verfolgt die schlechteste Interaktionsleistung über die Benutzererfahrung hinweg und meldet dies an Crux. Es ist sehr wahrscheinlich, dass INP bald FID als Maß für die Seitenreaktionsgeschwindigkeit ersetzen wird. Daher lohnt es sich, ein Auge auf die Seite zu werfen.

Größte Contentful Paint

Die wohl wichtigste und wirkungsvollste Kennzahl für die Seitenperformance ist LCP. Etwas vorhersehbar ist, dass das häufigste Beispiel für „größte Contentful Paint“ ein „Heldenbild“ ist – ein großes Bild oder Video, das normalerweise die gesamte Breite des Bildfensters über der „Faltung“ einnimmt. Obwohl die Techniken zur Optimierung dieses Elements mit jeder anderen Seitenressource identisch sind, ist die Zeit, die diese Ressource für das Rendern benötigt, von höchster Wichtigkeit, da dies das erste Hauptelement ist, das ein Benutzer erleben wird.

Warten in der Warteschlange
Die Aufschlüsselung des Anforderungszeitpunkts für das LCP-Element ist äußerst nützlich, um seine Leistung zu optimieren. Jede Anforderung eines Browsers beginnt mit der Warteschlange. Jede Millisekunde, die LCP-Anfragen in der Warteschlange ausgeben, ist eine Millisekunde, die zum LCP-Score beiträgt. Wenn Sie also feststellen, dass diese Elemente eine unverhältnismäßige Zeit in der Browser-Warteschlange verbringen, untersuchen Sie, was vorher angefordert wird und warum, und ergreifen Sie Schritte, um die LCP-Ressourcen zu priorisieren. Möglicherweise befinden sich Ressourcen unterhalb der Faltung oder andere Skripte, die verzögert geladen oder anderweitig verschoben werden können. Die Reihenfolge der Operationen ist entscheidend.

Warten auf den Server
Nach dem Initiieren der Netzwerkanforderung muss der Browser-Client warten, bis der Server diese Anforderung empfängt, verarbeitet und beantwortet. Diese Metrik wird TTFB (Time-to-first-Byte) genannt. Wenn der Server langsam auf die Anforderung reagiert, wird Ihr LCP-Score beeinträchtigt. Dies ist einer der Bereiche, in denen ein CDN erhebliche Auswirkungen auf die Geschwindigkeit haben kann, da CDNs eine Kopie der Ressource im Cache an einem Standort in der Nähe Ihrer Endbenutzer aufbewahren und schneller mit dieser Ressource reagieren können als ein einzelner Anwendungsserver. Weitere wichtige Aspekte der Verwendung eines CDN sind integrierte Sicherheits-WAFs und die Fähigkeit, auf große Datenverkehrsspitzen zu reagieren. Wenn Sie auf Geschwindigkeit achten, sollten Sie ein CDN verwenden.

Weit auf dem Draht
Zu diesem Zeitpunkt wird der Browser die LCP-Ressourcen hoffentlich früh im Seitenlebenszyklus anfordern, und der Server sollte schnell darauf reagieren. Das nächste zu berücksichtigende Element ist die Gesamtgröße der angeforderten Ressource. Jedes Byte, das „über das Kabel“ an den Browser gesendet werden muss, nimmt einige Zeit in Anspruch, und je mehr Bytes vorhanden sind, desto länger dauert es, bis die Anforderung abgeschlossen ist. Daher sollte darauf geachtet werden, dass die Ressourcen so klein wie vernünftigerweise möglich sind, um den Zeitaufwand für die Übertragung zu minimieren. Dies könnte die Verwendung von Drittanbieter-Bildoptimierungs- und Hosting-Diensten wie kraken.io oder imgix.com umfassen, die Mediendateien in „NextGen“-Formaten wie WebP sowohl optimieren als auch bereitstellen können, wodurch die Größe weiter reduziert wird.

Helfen Sie Dem Browser
Zusätzlich zu den Größenoptimierungen sollten Sie auch <Bild->Tags verwenden, die es dem Browser ermöglichen, die richtige Ressource für das Gerät intelligenter auszuwählen. Ein Desktop-Browser kann über große Bildschirmflächen verfügen, um Bilder mit höherer Auflösung anzuzeigen. Dieselben Ressourcen werden jedoch ein Mobilgerät mit einem kleineren Bildschirm verdrängen. Mithilfe optimierter Ressourcen und CSS-Medienabfragen können Sie sicherstellen, dass der Browser die richtige Ressource für den Gerätetyp anfordert und die Zeit für die Übertragung von Bytes vom Server auf den Client reduziert.

Außerdem können Sie dem Browser helfen, indem Sie ihn bitten, LCP-Ressourcen vorab zu laden und eine Abrufpriorität festzulegen. Diese geben dem Browser Hinweise, um wichtige Ressourcen vor weniger kritischen Ressourcen zu priorisieren. Je schneller Dinge in den Browser gelangen, desto schneller können sie gerendert werden, und je schneller der LCP geschieht, desto besser.

Kumulative Layoutverschiebung

Wir sehen es die ganze Zeit. Nachdem Sie Ihren Browser gesendet haben, um eine Website abzurufen, beginnt die Seite zu laden. Während sich die Seite ausbaut, sehen Sie das Stück, an dem Sie interessiert sind, und klicken Sie darauf, wenn plötzlich die ganze Seite verschoben wird und der Link, auf den Sie klicken wollten, plötzlich an einem anderen Ort liegt! Dieses Phänomen wird als Layoutverschiebung bezeichnet. Es ist nervig für alle, normalerweise selbstverschuldet, und wir sollten versuchen, es zum wohl der Menschheit zu minimieren.

Die Üblichen Verdächtigen
Typische Ursachen für höhere CLS-Scores sind:

• Klebrige Kopfzeilen
• Werbebanner oder „Helden“, die auf Kundenseite geladen und gerendert werden
• Newsletter, Coupon- und GPDR-Hinweise
• Andere Integrationen von Drittanbietern, die dynamisch in die Seite integriert werden

Legen Sie Einige Grenzen Fest
Erinnern Sie sich an das <Bildelement>, auf das wir bei der Besprechung von LCP Bezug genommen haben? Vergessen Sie nicht, den verschiedenen darin enthaltenen Elementen Bemaßungen hinzuzufügen. Wenn Sie diese Werte weglassen, verlassen Sie den Fahrer, wenn Sie dem Browser mitteilen, wie diese Elemente angezeigt werden sollen. Durch Definieren der Abmessungen kann der Browser den richtigen Platz für das Bild festlegen, wodurch die Verschiebung reduziert wird.

Das Gleiche gilt für alle Inhalte, die der Seite dynamisch hinzugefügt werden können. Werbung, <iframe> oder andere dynamisch hinzugefügte Inhalte können zu CLS beitragen. Der Seiteninhalt verschiebt sich weniger, wenn im Voraus Speicherplatz für diese Elemente reserviert wird. Außerdem sollten Sie den Inhalt nicht über dem vorhandenen Seiteninhalt hinzufügen, da dies dazu führt, dass sich die gesamte Seite unten verschiebt.

Wenn Sie dem Browser helfen, den Speicherplatz im Voraus zu vergeben, wird die CLS reduziert, kann dies jedoch zu Lasten der allgemeinen Benutzererfahrung gehen, da der Benutzer darauf wartet, dass diese Teile der ansonsten leeren Seite mit nützlichem Inhalt gefüllt werden. Als Mittelweg kann die Implementierung von Elementbeladungsskeletten eine nützliche Technik sein, um dem Benutzer mitzuteilen, dass es noch mehr gibt, und den Eindruck einer schnelleren Erfahrung zu erwecken, während der Browser den Rest der Arbeit erledigt, um die zusätzlichen Seiteninhalte zu koordinieren. Darüber hinaus können und sollten diese mithilfe von CSS-Animationen anstelle von animierten GIFs implementiert werden, was bedeutet, dass nur ein paar Zeilen CSS verwendet werden können, um diese Technik auf Ihrer gesamten Website zu implementieren.

Zusammenfassung

Oberflächlich mag Core Web Vitas wie die neuesten Teile von Googles sagenumwobenem und schattenhaften Algorithmus erscheinen, um den Seitenrang in den Suchergebnissen zu bestimmen – und in gewissem Maße könnte das richtig sein. Darüber hinaus stellen die Core Web Vitals einen konkreteren Rahmen für die Messung der Seitenleistung und die Festlegung einer Basis für die Beschreibung von Dingen dar, die im Hinblick auf die Benutzererfahrung wichtig sind. Obwohl nicht erschöpfend, sollten die oben genannten Techniken Ihnen helfen, bei der Fehlerbehebung und Optimierung der Leistung Ihrer Website einen Schritt nach vorn zu machen, was hoffentlich zu Verbesserungen bei der Benutzererfahrung, Seitenranking und Umsatz führt.