Mit dem bevorstehenden Seitenerfahrungsupdate von Google werden Signale, die von Core Web Vitals (CWV) abgeleitet wurden, in den offiziellen Ranking-Algorithmus eingeführt. Core Web Vitals sind eine Reihe von Kennzahlen, die die Geschwindigkeit messen, mit der Seiten geladen, interaktiv werden und sich visuell für echte Benutzer, die mit ihnen interagieren, stabilisieren. Websites, die den Core Web Vitals-Test nicht bestanden haben, werden Anfang 2021 niedriger sein als derzeit.
CWV besteht aus 3-Geschwindigkeiten-Metriken, die nachweislich einen signifikanten Einfluss auf das wahrgenommene Nutzererlebnis haben. Dazu gehören die größte Contentful Paint (LCP) zur Messung der Ladezeiten, die erste Eingangsverzögerung (FID) zur Messung der Interaktivität und Reaktionsfähigkeit und die kumulative Layout Shift (CLS) zur Messung der visuellen Stabilität. Obwohl die Geschwindigkeit der Website für viele E-Commerce-Unternehmen an vorderster Front stand, wird sie zu einem der wichtigsten Faktoren in der Online-Landschaft werden. Hier sind die Kennzahlen, auf die Sie sich konzentrieren müssen, und wie Sie die Geschwindigkeit für jeden einzelnen Parameter verbessern können.
Was sind die wichtigsten Web Vitals
Einen guten ersten Eindruck online zu hinterlassen, ist entscheidend. Käufer möchten Produkte sofort sehen, schnell surfen und einfach bezahlen – ohne Unterbrechungen. Wenn ihre Erwartungen nicht erfüllt werden, werden sie nicht mehr zurückkehren. Core Web Vitals hilft bei der Lösung dieses Problems, indem es die Erlebnisseiten bewertet, die mobilen Käufern beim Surfen einer Website in Echtzeit bieten.
Während die meisten Google-Tools auf synthetischen Tests in simulierten Umgebungen basieren (sogenannte Labordaten), werden Core Web Vitals anhand von Felddaten gemessen, die von Google Chrome User Experience (Crux) gesammelt wurden – einer realen Chrome-Benutzerdatendatenbank. Felddaten erfassen die dramatischen Auswirkungen von realen Benutzervariablen, wie z. B. Gerät, Netzwerkbedingungen und/oder Einstellungen. Je nach den Bedingungen eines Benutzers kann die Leistung einer Website stark variieren und sich auf Ihre Core Web Vital-Werte auswirken.
Jede CWV-Metrik hat unterschiedliche Schwellenwerte, die als gut, Mittel oder schlecht angesehen werden können. Sie alle haben jedoch eines gemeinsam: Google verwendet das 75. Perzentil bei der Klassifizierung von Seiten in diese Gruppen. Eine Seite, die den Schwellenwert erreicht, um für 75 % der Seitenladezeiten oder mehr schnell als schnell angesehen zu werden, ist eine gute Erfahrung.
Sie können das, was Sie nicht wissen, nicht optimieren. Lassen Sie uns also die drei Kennzahlen kennenlernen, aus denen sich die Core Web Vitals zusammensetzen.
Quelle: https://web.dev/vitals/
Größte Contentful Paint (LCP)
Benutzer haben in der Regel das Gefühl, dass die Seite geladen wurde, wenn das größte Inhaltselement vollständig auf dem Bildschirm sichtbar ist, d. h. durch die Geschwindigkeit des größten Inhaltselements (LCP). Inhaltselemente können Elemente auf Blockebene, Bilder (einschließlich Bilder in SVG-Dateien) und Videos enthalten. Bei eCommerce messen LCPs normalerweise die Geschwindigkeit, mit der das Produktbild/das Hero-Bild geladen wird. Wenn dies langsam ist, gehen die Benutzer davon aus, dass das gesamte Erlebnis ähnlich ist, was sie dazu veranlasst, zur Website eines Wettbewerbers zu gehen.
LCPs von 2,5 Sekunden oder weniger gelten als schnell, Seiten mit LCPs zwischen 2,6 und 4,0 Sekunden müssen verbessert werden, und LCPs, die länger als 4,0 Sekunden sind, sind langsam.
TheTieBar.comlädt LCP in 800 ms auf Layer0 (Edgio)
Im obigen Beispiel wird die LCP von Tie Bar mit 900 ms markiert, wenn das Hauptbild vollständig gemalt ist. TIE Bar bietet mobilen Käufern konsistente Seitenladezeiten innerhalb von weniger als einer Sekunde und bietet gleichzeitig individuelle Anpassungen, Inventarsuchen in Echtzeit und dynamische Preise für Tausende von Seiten auf Edgio.
In der Regel ist LCP von einer der folgenden Faktoren betroffen:
- Langsame Serverantwortzeiten
- Renderblockierung von JavaScript und CSS
- Lange Ressourcenladezeiten
- Client-seitige Rendering-Probleme
Um Ihr LCP zu optimieren, sollten Sie Folgendes beachten:
- Optimieren Sie die Reaktionszeiten des Servers, indem Sie den Datenverkehr zum nächstgelegenen verfügbaren CDN-POP weiterleiten, Assets zwischenspeichern, einen Servicemitarbeiter verwenden und mit „rel=„preconnect“ frühzeitig Verbindungen von Drittanbietern herstellen.
- Reduzieren Sie die Zeit für JavaScript-Blockierungen, indem Sie Code minimieren (z. B. Leerzeichen entfernen), Daten mit Tools wie Broti oder Gzip komprimieren, Bundles teilen und nur das senden, was am Anfang notwendig ist, und Code mit neuerer Syntax mit Tools wie Babel bereitstellen. Reduzieren Sie CSS, indem Sie nicht verwendete CSS oder unnötige Zeichen wie Abstände, Einrückungen oder Kommentare entfernen und kritische CSS direkt in den Seitenkopf einfügen.
- Um die Ressourcenladezeiten zu verkürzen, optimieren und komprimieren Sie Bild- und Textdateien, laden Sie wichtige Ressourcen im Voraus, und stellen Sie verschiedene Ressourcen basierend auf der Netzwerkverbindung bereit und cachen Sie Assets mithilfe eines Servicemitarbeiters.
- Optimieren Sie das clientseitige Rendering durch Reduzierung der JavaScript-Blockierungszeit (siehe Nr. 2, um dies zu optimieren), indem Sie serverseitiges Rendering (SSR) und Pre-Rendering verwenden.
Erste Eingangsverzögerung (FID)
Während der erste Eindruck eines Benutzers von der Geschwindigkeit beeinflusst wird, mit der das größte Bild gerendert wird, ist es genauso wichtig, dass Ihre Website reaktionsschnell ist, sobald Ihr Benutzer versucht, mit ihr zu interagieren. Die erste Eingabeverzögerung (FID) misst die Zeit von der ersten Interaktion eines Benutzers mit einer Seite (Klicken, Tippen oder Drücken einer Taste) bis hin zu der Zeit, zu der der Browser auf diese Interaktion reagieren kann.
In der Regel tritt eine Verzögerung bei der Eingabe auf, weil JavaScript auf dem Hauptthread ausgeführt wird und JavaScript standardmäßig Renderblocker ist. Das bedeutet, dass der Browser, wenn er eine JavaScript-Datei findet, unterbrechen muss, was er tut, um diese JavaScript-Datei herunterzuladen, zu parsen, zu kompilieren und auszuführen. Je länger dies dauert, desto länger verzögert sich der Benutzer und desto weniger wird Google die Seite als nutzbar ansehen.
Google betrachtet einen FID von 100 Millisekunden oder weniger als schnell, zwischen 1,1 und 3,0 Sekunden als verbesserungsbedürftig und über 3,0 Sekunden als langsam. Während es wichtig ist, das 75. Perzentil für alle Core Web Vitals anzustreben, empfiehlt Google, die 95. Bis 99. Perzentile für FID auf Mobilgeräten und Desktops zu betrachten, da dies die schlechtesten Nutzererfahrungen darstellt und die Bereiche überprüft, die am meisten verbessert werden müssen (da sich der Fokus auf die FID für mehr als 95 % der Seitenladezeiten konzentrieren wird).
Es ist auch wichtig zu beachten, dass FID im Gegensatz zu LCP und CLS nur im Feld gemessen werden kann (und nicht in Labordaten gefunden wird), da dies eine echte Benutzerinteraktion erfordert.
Häufige Gründe für langsame FIDs sind:
- Lange Tasks, die den Hauptthread mindestens 50 Millisekunden lang blockieren
- Skriptausführung der ersten Partei verzögert die Interaktionsbereitschaft
- Lange JavaScript-Ausführungszeit
How bis optime für FID:
- Unterteilen Sie lang ausgeführten Code in kleinere, asynchrone Aufgaben, und nutzen Sie Code-Splitting.
- Verschieben Sie das umfangreiche Laden (und Ausführen) von Skripten für nicht wesentliche Komponenten vom kritischen Pfad, und minimieren Sie den kaskadierenden Datenabruf und die Anzahl der Daten, die auf der Clientseite nachverarbeitet werden müssen.
- Verwenden Sie einen Web Worker, wie z. B. Comlink, Workway oder Workerize, der es ermöglicht, JavaScript auf einem Hintergrundthread auszuführen, Ihr JavaScript-Bundle durch Code in mehrere Chunks aufzuteilen (auch als Lazy-Loading bezeichnet), und alle Skripte von Drittanbietern mit DEFER oder Async zu laden.
Kumulative Layoutverschiebung (CLS)
Die visuelle Stabilität einer Seite ist ein weiterer Faktor, der die Benutzererfahrung beeinflusst und Käufer davon abhalten kann, den Weg zum Kauf fortzusetzen. Die dritte und letzte Metrik in Core Web Vitals ist die kumulative Layoutverschiebung (CLS), die misst, wie oft Benutzer unerwartete Layoutverschiebungen erleben.
Sie haben diese Fälle erlebt: Sie sind im Begriff, auf einen Link oder ein Produktbild zu tippen, aber kurz bevor Sie den Bildschirm berühren, wird die Seite verschoben und Sie können unbeabsichtigt auf etwas anderes klicken. Im besten Fall sind diese Situationen ein leichtes Ärgernis, aber im schlimmsten Fall senden Sie Kunden, die nach einem reibungsloseren, weniger störenden Erlebnis im Internet suchen.
Google berechnet diese Seitenbewegungen durch Multiplikation der Aufprallfraktion, oder wie viel sichtbarer Inhalt im Bildfenster verschoben wurde, mit der Abstandsfraktion oder der Entfernung, die ein instabiles Element im Rahmen verschoben hat, geteilt durch die größte Dimension des Bildschirms (Höhe oder Breite). Die Summe aller einzelnen Punktzahlen (Auswirkungsfraktion x Abstandsfraktion) für jede unerwartete Layoutverschiebung, die während des Browsers eines Käufers auftritt, führt zum CLS einer Seite.
Google betrachtet eine CLS unter 0,1 als gut, zwischen 0,1 und 0,25 als moderat und über 0,25 als schlecht.
Wenn Sie ein schlechtes CLS finden, liegt dies wahrscheinlich an einem der folgenden Ursachen:
- Ein Bild oder Video, das sich selbst in der Größe ändert
- Ändern der Größe von Anzeigen
- Eine Schriftart, die verspätet geladen wird und größer oder kleiner als beabsichtigt angezeigt wird
Um diese Metrik zu verbessern, beachten Sie Folgendes:
- Geben Sie die genauen Abmessungen Ihrer Bilder und Videoelemente an.
- Vermeiden Sie Popup-Anzeigen oder Banner. Reservieren Sie stattdessen statisch einen großen Platz für den Anzeigenplatz.
- Vermeiden Sie Blitze von unformatiertem oder unsichtbarem Text (FOIT/FOUT) mit Werkzeugen wie der Schriftartanzeige und der API zum Laden von Schriftarten.
Wie Layer0 die Geschwindigkeit für jede Core Web Vitals-Metrik optimiert
Große, komplexe E-Commerce-Websites mit Millionen von Seiten, 1000er SKUs, A/B-Tests und Personalisierung, dynamische Preisgestaltung und Echtzeit-Bestandssuche können mit Layer0 Geschwindigkeiten von weniger als Sekunden erreichen. Tatsächlich ist Layer0 die einzige Plattform auf dem Markt, die Median-LCPs unter 500 ms garantiert.
Auf Layer0 werden Inhalte sofort auf einer Seite gerendert oder gemalt und können dank unseres anwendungsfähigen, JavaScript konfigurierbaren CDN CDN-as-JavaScript sofort auf eine Seite zugreifen. Es nutzt fortschrittliches Prefetching und Edge-Computing, um dynamische Inhalte (JSON/SSR/HTML) vom Edge in den Browser des Benutzers zu streamen – noch bevor sie angefordert werden. Dadurch sind Websites stets 5 Sekunden vor dem Anzapfen der Kunden.
Websites auf Layer0 haben eine Cache-Trefferquote von 95 %+ für HTML- und JSON-Daten an der Peripherie, während Websites auf herkömmlichen CDNs durchschnittlich 6 % betragen. Dies ist ein großer Unterschied bei der Bereitstellung von Inhalten, die eine Website normalerweise langsam machen.
Fazit
Schnelles Laden von Seiten unterscheidet zwischen Kunden, die für die Website Ihrer Mitbewerber begeistern und sie abschrecken. Core Web Vitals berücksichtigen den ersten Eindruck eines Benutzers von Geschwindigkeit, Interaktivität und visueller Stabilität durch Messung des größten Contentful Paint, der Verzögerung bei der ersten Eingabe und der kumulativen Layoutverschiebung. Wenn die Geschwindigkeiten länger als 2,5 s für LCP, 100 ms für FID oder .1 für CLS sind, können Sie davon ausgehen, dass sowohl Benutzer als auch Google Ihre Website als langsam empfinden. Google wird Ihren Rang senken, und Verbraucher werden nicht mehr zurückkehren.
In nur wenigen Monaten wird eine schlechte Seitenerfahrung den Ruf Ihrer Marke schädigen und Ihr SEO-Ranking beeinträchtigen. Schützen Sie Ihr hart verdientes SEO mit den oben genannten Optimierungstaktiken oder nutzen Sie Layer0 (jetzt Edgio).
Layer0 ist Ihre All-in-One-Lösung für die Entwicklung, Bereitstellung, Vorschau, Experimentierung, Überwachung und Ausführung Ihres Frontends. Shoe Carnival, REVOLVE und 1-800-Flowers sind nur einige Beispiele für E-Commerce-Websites, die Geschwindigkeiten von weniger als einer Sekunde erreichen und von den Vorteilen profitieren. Wenn Sie Fragen zum Update der Seitenerfahrung oder zur Beschleunigung Ihrer Website haben, würden wir Sie gerne noch heute mit einem Experten für die Seitengeschwindigkeit in Verbindung setzen.
Mit dem bevorstehenden Seitenerfahrungsupdate von Google werden Signale, die von Core Web Vitals (CWV) abgeleitet wurden, in den offiziellen Ranking-Algorithmus eingeführt. Core Web Vitals sind eine Reihe von Kennzahlen, die die Geschwindigkeit messen, mit der Seiten geladen, interaktiv werden und sich visuell für echte Benutzer, die mit ihnen interagieren, stabilisieren. Websites, die den Core Web Vitals-Test nicht bestanden haben, werden Anfang 2021 niedriger sein als derzeit.
