Im Mai 2020 kündigte Google ein grundsätzliches Algorithmus-Update an, das als Core Web Vitals bekannt ist. Diese Verbesserung, die im Mai 2021 eingeführt werden, wird Webseiten mit einer guten Nutzererfahrung mit besseren Ranking in den Suchergebnissen belohnen.
88% der Online-Käufer sagen, dass sie nach einer schlechten Nutzererfahrung nicht mehr zu einer Website zurückkehren würden. Google nimmt diesen Trend natürlich zur Kenntnis und reagiert jetzt mit den Core Web Vital darauf. Laut Google bestehen Core Web Vitals aus „einer Reihe realer, nutzerzentrierter Metriken, die Schlüsselaspekte der Nutzererfahrung einer Website quantifizieren“.
In diesem Leitfaden geben wir Ihnen wir einen Überblick, was jedes Element der Core Web Vital bedeutet und stellen Ihnen die besten Strategien zur Optimierung Ihres Onlineshops vor.
Das Core Web Vitals Update von Google bewertet Websites anhand von drei Schlüsselkennzahlen, die sich auf die Geschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität der Website beziehen.
LCP ist die Zeit, die benötigt wird, um den größten Bild-, Video- oder Textblock in das Ansichtsfenster zu laden.
Diese Metrik ist wichtig, da der größte Block wahrscheinlich der wichtigste Block ist, den der Benutzer auf der Seite sehen und erleben soll. Ein schnelles LCP hilft sicherzustellen, dass Besucher schnell auf die wichtigsten und wichtigsten Informationen zugreifen können.
Die Benutzererfahrung steht in direktem Zusammenhang mit der Conversionrate und damit mit den Umsätzen eines Onlineshops. Zudem nutzt Google die Seitenerfahrung zunehmend als eigenständigen Ranking-Faktor.
Lange Ladezeiten reduzieren die Conversionrate, weil Nutzer ungern warten, ganz besonders wenn sie das Smartphone nutzen.
Die Seitengeschwindigkeit beeinflusst die Einnahmen aus dem E-Commerce also sowohl über die organische Reichweite, die ein Onlineshop erzielt, als auch durch die Conversionrate.
Es gibt mehrere Möglichkeiten, LCP für Ihren Onlineshop zu messen. Der einfachste Weg ist die Verwendung von Google’s PageSpeed Insights (PSI). Lassen Sie eine beliebige seitenspezifische URL durch den Bericht laufen, um sowohl Mobil- als auch Desktop-Scores zu berechnen.
Wenn Ihre LCP-Punktzahl nicht gut ist, können Sie mit diese Maßnahmen die Seitenladezeit Ihres Onlineshop verbessern:
Wenn Ihr LCP-Element beispielsweise ein Bild ist, stellen Sie sicher, dass Sie es für alle Geräte optimieren.
Sehr häufig wird das LCP Element ein Bild sein. Optimieren Sie dieses Bild also besonders sorgfältig für eine geringe Größe und nutzen Sie für Ihre mobile Website ein speziell optimiertes bid oder verzichten Sie auf große Bilder im ersten Sichtbereich.
Mit der Zeit kann sich leicht zusätzlicher Code auf Ihrer Website ansammeln, insbesondere wenn Sie neue Anwendungen manuell hinzufügen und den alten Code nicht entfernen. Oft werden Elemente nur ausgeblendet oder Code auskommentiert, was die Größe der Browser-Downloads erhöhen kann.
Wenn ein Besucher in Ihren Onlineshop kommt, beginnt sein Webbrowser im Grunde genommen oben im Code Ihrer Webseite und liest sich nach unten durch.
Wenn der Browser dabei auf eine CSS- oder JavaScript-Datei stößt, muss er das „Lesen“ beenden, während er darauf wartet, diese Datei herunterzuladen und zu verarbeiten. Die Zeit, die es mit dem Herunterladen und Analysieren dieser Ressourcen verbringt, könnte für etwas Produktiveres verwendet werden, nämlich dem Laden des Teils Ihres Onlineshops, der sofort sichtbar ist.
Umgekehrt sollten Sie kritisches CSS so schnell wie möglich bereitstellen
Identifizieren Sie das kritische CSS (in Verbindung mit dem Layout und über dem Content above the Fold) und stellen Sie sicher, dass es schnell geladen wird.
Es gibt viele kostenlose Online-Tools zur Komprimierung von Bildern, wie z. B. TinyPNG oder CompressJPEG. Grundsätzlich empfiehlt es sich Bilder vor dem Upload zu komprimieren.
Verzögern Sie das Laden von Bildern unterhalb des sichtbaren Bereichs (below the fold), bis der Nutzer zu den Bilden scrollt.
Laden Sie Bilder above the fold möglichst früh, da Sie diese Bilder so schnell wie möglich sichtbar sein sollten.
Mit srcset definieren Sie ein Set von Bildquellen und überschreiben damit das src-Attribut. Bieten Sie dem Browser verschiedene Bildgrößen an. Der Browser wird das Bild in der passenden Größe auswählen und abrufen und dabei sicherstellen, dass er keine größeren Bilder als benötigt herunterlädt.
WebP ist ein modernes Bildformat, das eine überlegene verlustfreie und verlustbehaftete Komprimierung für Bilder im Web bietet. Mit WebP können Webmaster und Webentwickler kleinere Bilder erstellen, die das Web schneller machen.
WebP verlustfreie Bilder sind im Vergleich zu PNGs 26% kleiner. WebP verlustbehaftete Bilder sind 25-34% kleiner als vergleichbare JPEG-Bilder bei ähnlicher Qualität.
Alle externen Ressourcen werden aus Anwendungen bezogen, die sich nicht physisch auf Ihrer Website befinden. Wenn ein Besucher in Ihren Onlineshop kommt, ruft der Browser diese Ressourcen auf. Je mehr externe Ressourcen abgerufen werden müssen, desto größer ist das Potenzial für eine kumulative Verlangsamung des Shops.
Typische externen Ressourcen sind:
Anzeigen
Widgets
Share-Schaltflächen
Videos
Beiträge in sozialen Medien
Kommentar-Abschnitte
Zwar wird Ihre Onlineshop durch das Prefetching der Ressourcen meistens nicht spürbar schneller, aber bei PageSpeed Insights und Lighthouse wird sich Ihr Score wahrscheinlich erhöhen.
FID bezieht sich auf die Verzögerung, die ein Nutzer erlebt, wenn er zum ersten Mal mit Ihrer Seite interagiert. Diese Aktion ist normalerweise ein Klick oder ein Tippen. Je schneller der Browser reagiert, desto reaktionsschneller wird die Seite angezeigt.
Verzögerungen führen dazu, dass Ihre Website träge und reaktionslos erscheint, was die Benutzer frustriert und sie dazu veranlasst, den Onlineshop zu verlassen.
Im Gegensatz zu den anderen Metriken erfordert FID echte Benutzerinteraktion, um eine genaue Messung zu erhalten. Google kann den FID-Score nicht auf der Grundlage von Labordaten vorhersagen – er erfordert echte Nutzerdaten, was FID zu einer „Feld“-Metrik macht.
Beheben Sie zunächst alle ausstehenden LCP-Performance-Probleme. Diese betreffen in der Regel sowohl LCP als auch FID.
Prüfen Sie Anwendungen, Plugins und Skripte von Drittanbietern. Bewerten Sie den Wert der einzelnen Elemente und reduzieren Sie unnötige Plugins und Skripte.
Identifizieren und optimieren Sie Thread-blockierende Elemente oder solche, die den Hauptthread blockieren, um die Time to Interactive (TTI) zu erhöhen.
Strukturieren Sie die Elemente so um, dass Event-Handler für Elemente im Sichtbereich (above the fold) so früh wie möglich registriert werden, um die TTI zu reduzieren.
Stellen Sie sich vor, Sie versuchen, auf eine Schaltfläche auf dem Bildschirm zu klicken, während im Hintergrund noch ein großer Inhaltsbereich geladen wird. Wenn der Inhalt vollständig geladen ist, schiebt er die Schaltfläche weiter nach unten und Sie klicken auf die falsche Stelle. Dieses Verhalten einer Website wird zu einem schlechten CLS-Rating führen.
Achten Sie auf diese häufigen Verursacher der Verschiebung von Seitenelementen:
Erwägen Sie das Hinzufügen von width- und height-Attributen (oder CSS-Styling, das früh geladen wird) zu Elementen, die eine Verschiebung verursachen. Dadurch wird verhindert, dass sie beim Laden von 0 auf x Pixel wechseln.
Verwenden Sie eine Ersatzschriftart, die zu Ihrer Schriftart passt. Dies wird die Auswirkungen einer benutzerdefinierten geladenen Schriftart verringern, sobald diese verfügbar wird. Wenn Sie Cornerstone verwenden, wurde diese Funktion nativ implementiert.
Reservieren Sie Platz für ihre Inhalt. Fixieren Sie einen Block von vordefinierter Größe für den Inhalt, der dynamisch eingefügt wird (d.h. Code in der Höhe und Breite einer injizierten Suchleiste, um die Position zu fixieren, bevor HTML und CSS verfügbar sind).
Stellen Sie sicher, dass kritisches CSS vor dem Inhalt geladen wird. Laden Sie Struktur/Layout, Menü und übergeordnete CSS vor dem HTML-Inhalt.
Webmaster:innen haben also über verschiedene Tools bereits genügend Möglichkeiten, um Optimierungsmöglichkeiten für FID, LCP und CLS zu identifizieren. Und dass die Optimierung der drei Core Web Vitals wichtig wird, hat Google mehr als deutlich herausgestellt.
Trotzdem erscheint der neue Hype um die Core Web Vitals Hype in Teilen doch etwas übertrieben.
Zum einen handelt es sich bei zweien der drei Metriken um Kennzahlen, die bereits vor ihrer Betitelung als “Core Web Vitals” existiert haben: FID und LCP sind keine neuen Werte, aber ihre Wichtigkeit wurde über ihre Neueinordnung in die Riege der Core Web Vitals sicherlich nochmal pointiert hervorgehoben. Der Cumulative Layout Shift (CLS) ist die einzige Metrik, die tatsächlich neu ist. Und trotzdem gilt für den CLS dasselbe wie für die anderen beiden Metriken auch: Dass Websites nicht nur für Suchmaschinen, sondern auch für Nutzer:innen optimiert sein sollten. Und das ist keine Novität!
Zum anderen betont Google selbst, dass Content weiterhin als entscheidenster Rankingfaktor bestehen bleiben wird:
While all of the components of page experience are important, we will prioritize pages with the best information overall, even if some aspects of page experience are subpar. A good page experience doesn’t override having great, relevant content.
Hat eine Website also besonders relevanten Content, jedoch nur einen mäßigen Core Web Vitals Score, wird sie ziemlich sicher weiterhin gut ranken. Zum positionsentscheidenden Kriterium wird die Google Page Experience dann eher in stark konkurrierenden Sektoren, in denen mehrere Websites mit ähnlich gutem Content vorhanden sind.
Dennoch bieten die Core Web Vitals eine sehr gute Möglichkeit, um anhand harter Kennzahlen mit klaren Grenzziehungen vorzeigbare Auswertungen der UX zu präsentieren. So lässt sich sehr schnell und einleuchtend aufzeigen, ob und inwiefern Probleme im Bereich der Nutzererfahrungen bestehen und welche Maßnahmen zur Pagespeed Optimierung oder Usability Verbesserung nötig sind.
Wie erwähnt kommt das Google Page Experience Update erst irgendwann im Laufe von 2021 und wir bekommen ein halbes Jahr im Voraus auch nochmal ein Heads-up. Ein akuter Handlungsbedarf zur Core Web Vitals Optimierung besteht also noch nicht. Es müssen außerdem auch erstmal noch genügend Nutzerdaten gesammelt werden, um den Core Web Vitals Status angeben zu können. Dass dies noch in Arbeit ist, merkt man auch an dem Core Web Vitals Bericht in PageSpeed Insights: Hier kann man derzeit häufig nur auf Labordaten für eine Auswertung zurückgreifen. Für den Felddatenbereich fehlt es dagegen oftmals noch an genügend Chrome Nutzerdaten.
Wer sich trotzdem jetzt schon jetzt an die Arbeit machen möchte, kann beispielsweise über den Google Search Console Bericht auswerten, ob und welche URLs hinsichtlich der Core Web Vitals optimierungswürdig sind. Denn in der Google Search Console wird die gesamte Website evaluiert. Hast du betroffene URLs in der GSC identifiziert, kannst du im zweiten Schritt über die Eingabe dieser URLs in PageSpeed Insights konkrete Handlungsempfehlungen erhalten. Einen Core Web Vitals Kurzcheck einzelner URLs erhältst du außerdem schnell und bequem über die Web Vitals Erweiterung für Chrome.
Die rasante Akzeptanz von ChatGPT seit dessen Einführung Ende 2022 markiert einen signifikanten Wandel in…
YouTube hat neue Richtlinien eingeführt, die von Content-Erstellern verlangen, ihre Zuschauer darüber zu informieren, wenn…
Google kündigt zwei bedeutende Updates gleichzeitig an, die für einen erheblichen Rückgang unbrauchbarer Inhalte in…
Google Ads, der führende Dienstleister im Bereich Online-Werbung, hat kürzlich "Lösungen" eingeführt. Dieses innovative Tool…