So geht die Core Web Vitals Optimierung

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 mit den Core Web Vitals darauf. Laut Google bestehen Core Web Vitals aus «einer Reihe realer, nutzerzentrierter Metriken, die Schlüsselaspekte der Nutzererfahrung einer Website quantifizieren». 

[toc]

In diesem Leitfaden zeigen wir Ihnen im Detail, was jedes Element der Core Web Vitals bedeutet, und stellen Ihnen die besten Strategien zur Optimierung Ihrer Website oder Ihres Onlineshops vor.

Außerdem geben wir Ihnen unsere Einschätzung, ob der aktuelle Hype um das Thema gerechtfertigt ist. 

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.

Largest Contentful Paint (LCP)
Geschwindigkeit der Website

First Input Delay (FID)
Reaktionsgeschwindigkeit der Website

Cumulative Layout Shift (CLS)
Visuelle Stabilität

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 relevantesten 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.

Bereits seit 2010 berücksichtigt Google die Seitengeschwindigkeit als SEO-Ranking-Faktor. Im Jahr 2018 folgte eine Google Update, das die sehr langsame mobile Websites in den Suchergebnissen abwertet.

Jeder Entwickler weiß, dass sich die Ladezeit einer Seite direkt auf das Nutzererlebnis Ihrer Website auswirken kann. 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:

Sehr häufig wird das LCP Element ein Bild sein, stellen Sie sicher, dass Sie es für alle Geräte optimieren. 

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 Bild 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 auf Ihre Website oder 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.

Wie können Sie Render-Blocking JavaScript eliminieren?

Es gibt verschiedene Strategien, um das Render-Blocking JavaScript zu beseitigen. Die beiden gängigsten Methoden sind:

Async – lässt den HTML-Parser (z.B. den Browser eines Besuchers) das JavaScript herunterladen, während der Rest des HTML noch geparst wird. Das heißt, es wird das Parsen nicht vollständig beendet, während die Datei heruntergeladen wird. Allerdings wird der HTML-Parser angehalten, um das Skript auszuführen, sobald es heruntergeladen ist.

Defer (verschieben) – lässt den HTML-Parser das JavaScript herunterladen, während der Rest des HTMLs geparst wird, und wartet mit der Ausführung des Skripts, bis das HTML-Parsing abgeschlossen ist.

Wie können Sie Render-Blocking-CSS eliminieren?

Das Eliminieren von Render-Blocking-CSS kann komplizierter sein, da Sie darauf achten müssen, dass CSS, das für die Darstellung von above the fold Inhalten benötigt wird, nicht zu verzögern.

Die ideale Vorgehensweise ist es, die Stile zu identifizieren, die für die Darstellung von above the fold Inhalt erforderlich sind, und diese Stile inline mit dem HTML zu liefern.

Verwenden Sie das media-Attribut auf den Link-Elementen, die CSS-Dateien nutzen, um CSS-Ressourcen zu identifizieren, die nur für bestimmte Geräte oder Situationen, benötigt werden.

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.

Bei Bildern läßt sich die Dateigröße meist deutlich reduzieren, was die Geschwindigkeit der Website spürbar erhöht.

Es gibt viele kostenlose Online-Tools zur Komprimierung von Bildern, wie z. B. TinyPNG oder CompressJPEG. Grundsätzlich empfehlen wir die Komprimierung der Bilder vor dem Hochladen.

Verzögern Sie das Laden von Bildern unterhalb des sichtbaren Bereichs (below the fold), bis sie in Sichtweite kommen.

Laden Sie Bilder above the fold möglichst früh, da 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.

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 Ihr Onlineshop durch das Prefetching der Ressourcen meistens nicht spürbar schneller, aber bei PageSpeed Insights und Lighthouse wird sich Ihr Score wahrscheinlich erhöhen.

Wie verbinden Sie die Ressourcen vorab?

Es gibt viele verschiedene Möglichkeiten, Ressourcen auf Ihrer Website vorzubinden. Entweder über ein Plugin oder über Anpassungen im Code Ihrer Website oder Ihres Onlineshops.

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.

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.

Da die Entwickler komplexere Sites als je zuvor erstellen, werden die Browser sehr stark belastet. Eine Benutzereingabe würde sich verzögern, wenn der Hauptthread des Browsers mit anderen Aufgaben beschäftigt ist und nicht sofort auf die Aktion reagieren kann.

Verzögerungen führen dazu, dass Ihre Website träge und reaktionslos erscheint, was die Benutzer frustriert und sie dazu veranlasst, die Website oder den Onlineshop zu verlassen.

Der optimale FID-Wert liegt bei 100 Millisekunden oder schneller.

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. Da FID Daten von Nutzern auf allen Arten von Geräten in verschiedenen Umgebungen sammelt, sind die FID-Werte weniger gut kontrollierbar. Infolgedessen sehen Sie, dass sich die Daten häufiger ändern.

Profi-Tipp: Sie können die gesamte Blockierungszeit (Total Blocking Time – TBT) als Ersatz für FID messen, um konsistentere Daten zu erhalten. Sie können dies im PageSpeed Insights-Bericht oder im Lighthouse sehen.

• Laden zahlreicher Ressourcen: Das meiste, was die LCP betrifft, wirkt sich auch auf das FID aus
• Übermäßiges JavaScript: Eine große Anzahl von Skripten erzeugt mehr Dateien, die abgerufen und durchlaufen werden müssen (was längere Verzögerungen für die Benutzer bedeutet).
• Lang laufende oder ineffiziente Skripte: Schlecht geschriebener oder exzessiver Code kann den Hauptthread blockieren

• Beheben Sie zunächst alle ausstehenden LCP-Performance-Probleme. Diese betreffen in der Regel sowohl LCP als auch FID
• 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
• Prüfen Sie Anwendungen, Plugins und Skripte von Drittanbietern. Bewerten Sie den Wert der einzelnen Elemente und reduzieren Sie unnötige Plugins und Skript
• Letztlich wird auch das neu schreiben von Skripte in Erwägung gezogen werden, um sie nach Möglichkeit effizienter zu gestalten

CLS ist eine komplett neue Metrik, die von Google zur Bewertung der Nutzererfahrung verwenden wird. CLS misst die Verschiebung des Seitenlayouts beim Laden von Inhalten. Im Wesentlichen geht es darum, wie oft und um wieviel Elemente beim Laden herumspringen. Es geht also um die visuelle Stabilität der Onlineshop Website.

Im Gegensatz zu den ersten beiden Metriken hat CLS nichts mit der Geschwindigkeit der Seite zu tun – es geht lediglich um die Benutzererfahrung.

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.

Dieser Score sollte über PSI oder die Chrome-Browser-Erweiterung gemessen werden. Die ideale CLS-Punktzahl beträgt weniger als 0,1.

Achten Sie auf diese häufigen Verursacher der Verschiebung von Seitenelementen:

• Anzeigen oder Banner, die dynamisch eingefügt werden
• Extern geladene Widgets: Wenn das HTML und/oder Styling geladen wird, nachdem die Skripte abgerufen und ausgeführt wurden, können sie den aktuellen Inhalt verdrängen.
• Lazy Loading eines Seitenbanners (Hero Image): Der Platzhalter ist möglicherweise unterschiedlich groß und kann zu einer Verschiebung der Seite führen

• 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 Inhalte. Fixieren Sie einen Block von vordefinierter Größe für den Inhalt, der injiziert 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.
  Vermeiden Sie JavaScript-Layout-Animationen. Entfernen Sie sie ganz oder ersetzen Sie sie durch CSS-Animationen.

Google plant, einen neuen Rankingfaktor – das Page Experience Signal – einzuführen. Dieser soll die Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) mit bestehenden User Experience Signalen kombinieren. Google nennt dabei diese Signale:

• Mobile-Friendliness: Die Mobile-Friendliness können Seitenbetreiber über Googles Mobile-Friendly-Test überprüfen.
• Safe-Browsing: Der Security Issues Report in der Search Console verrät Seitenbetreibern, ob es Probleme in Sachen sicheres Surfen gibt.
• HTTPS-Security: Verwenden Seitenbetreiber eine sichere HTTPS-Verbindung für ihre Webseite, finden sie ein kleines Schloss neben der URL.
• Intrusive Interstitial Guidelines: Vereinfacht gesagt sind Intrusive Interstituals Pop-ups, die einen Großteil des Contents oder gar den gesamten Content einer Seite verdecken. Ausnahmen bilden hier lediglich gesetzliche oder ethische Vorgaben, die ein Pop-up vorschreiben. Das kann beispielsweise eine Altersverifikation sein.

Das Page Experience Signal soll damit vorwiegend auf technischen Faktoren basieren. Inhaltliche Aspekte sind hier nicht miteingeschlossen. Das heißt: Faktoren wie Content und Keywords sind nach wie vor entscheidend, um sich gut in den Rankings zu platzieren. Für die Praxis bedeutet das: Eine Webseite mit besonders relevanten Inhalten kann immer noch auf den ersten Plätzen landen, obwohl das Page Experience Signal schwach ist.

Sind jedoch zwei Seiten inhaltlich ähnlich relevant, kann die Seite mit dem besseren Page Experience Signal eine höhere Platzierung einnehmen. Seitenbetreiber sollten das Page Experience Signal bei der SEO-Optimierung daher unbedingt berücksichtigen,  sollten sich aber nicht primär darauf konzentrieren. Überzeugende, relevante Inhalte mit Mehrwert bleiben das dominierende Rankingkriterium.

Wie gehen sie nun am besten vor, wenn ihnen der Core Web Vitals Score zu niedrig ist und sie ihn verbessern möchten?

Neben den spezifischen Möglichkeiten, die wir in diesem Leitfaden skizziert haben, können Sie PageSpeed Insights (PSI) und andere Messinstrumente nutzen, um Wege zur Verbesserung Ihrer Kernwerte für Web Vitals zu finden.

Dies sind dafür die sinnvollsten Tools:

PageSpeed Insights: Dieses Tool zeigt sowohl Feld- als auch Labordaten und gibt detaillierte Ratschläge, was Sie verbessern müssen.

Searchkonsole: Die Searchkonsole verfügt jetzt über einen integrierten Core-Web-Vitals-Bericht, damit Sie die Leistung Ihrer Site überwachen und sehen können, welche Scores verbessert werden müssen.

Lighthouse: Das Lighthouse-Tool von Google bietet zahlreiche Prüfungen zur Überprüfung von Leistung, Zugänglichkeit, SEO und mehr.

Web Vitals: Diese kostenlose Chrome-Browser Erweiterung misst die Core Web Vitals und bietet sofortiges Feedback zu Ladevorgängen, Interaktivität und Layout-Verschiebungsmetriken.

Sobald Sie wissen, was Sie verbessern müssen, können Sie sich an die Arbeit machen und Aktualisierungen vornehmen. Meistens macht es Sinn, die Korrekturen in dieser Reihenfolge vorzunehmen:

LCP – FID – CLS

Beginnen Sie mit den Elementen, die die größte Wirkung haben werden, wie z.B. Bilder in falscher Größe oder zu viele externe Skripte.

Versuchen Sie auch zunächst globale Optimierungen vorzunehmen und dann im zweiten Schritt einzelne Webseiten zu verbessern.

Durch kontinuierliches Protokollieren und Testen Ihrer Optimierungen können Sie erkennen, welche Änderungen die größte Auswirkung auf Ihre Core Web Vitals-Punktzahl haben.

Wir empfehlen die folgende Methode zum Testen Ihrer Aktualisierungen:

• Testen Sie Ihre Seitenbewertungen monatlich oder vor und nach allen wichtigen Änderungen.
• Viele Faktoren können Ihre Bewertungen beeinflussen, z. B. wie schnell die Server in diesem Moment reagieren. Sie können dieselbe Seite innerhalb weniger Minute testen und werden unterschiedliche Ergebnisse erhalten. Diskrepanzen von 15 Punkten oder mehr beim Testen des der Seitengeschwindigkeit sind keine Seltenheit.
• Die konsistente Protokollierung der Ergebnisse über einen längeren Zeitraum ist die beste Möglichkeit, Trends und Verbesserungen zu erkennen.

Die Optimierung der drei Core Web Vitals wird wichtig. Soviel ist klar. Webmaster:innen haben also über verschiedene Tools ausreichend Möglichkeiten, um Optimierungsansätze für FID, LCP und CLS zu identifizieren.

Trotzdem dürfte die Aufregung um die Core Web Vitals etwas übertrieben sein.

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 Core Web Vitals nochmal hervorgehoben. Der Cumulative Layout Shift (CLS) ist die einzige Metrik, die tatsächlich komplett 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 eben nichts Neues.

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.

Der wesentliche Vorteil der Core Web Vitals, ist die Möglichkeit, um anhand klarer Kennzahlen eine nachvollziehbare 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.