Core Web Vitals:
LCP, FID und CLS leicht verständlich erklärt

Kaum hatte sich die SEO-Branche auf das Page Experience Update eingestellt, präsentierte Google im Juni 2021 den nächsten grossen Schritt zur Optimierung der Suchergebbnisse (SERP): Core Web Vitals.

Doch was verbirgt sich hinter diesem sperrigen Titel, hinter Kürzeln wie

• LCP (Largest Contentful Paint)
• FID (First Input Delay) und
• CLS (Cumulative Layout Shift)

und welches Potential bieten sie SEO Experten bei der Suchmaschinenoptimierung für ein besseres Ranking in Google's Suchergebnissen?

Zunächst einmal lässt sich sagen, dass Google auch hier seinem Prinzip treu bleibt: Es gibt nicht DEN EINEN Ranking-Faktor, der den Google-Bot jauchzen lässt und eine Website über Nacht an die Spitze der SERPs verhilft.

Genau wie bei allen anderen Ranking-Signalen gilt auch bei den Web Vitals "Viel hilft viel" (genauer gesagt, müsste es eigentlich heissen "Viel von dem Richtigen hilft viel". Doch davon später mehr.

Es gibt eine Menge Stellschrauben, an denen ein SEO Experte drehen kann um einer Internetpräsenz zu mehr Aufmerksamkeit im Web zu verhelfen. Sammelt man überall ein paar Prozente ein, so wird daraus schlussendlich ein gut performender, erfolgreicher Internetauftritt.

Seit Einführung der Core Web Vitals öffnete Google den SEOs in aller Welt ein weiteres Türchen zur OnPage Optimierung. Mit der Erfahrung von mehr als 25 Jahren in der SEO Branche, haben sich die Such­maschinen­optimierer von binary-garden.com daher einmal des Themas angenommen.

Was sind Googles Core Web Vitals?

Core Web Vitals bewerten Ladezeit, Interaktivität sowie den visuellen Eindruck (nicht zu verwechseln mit Layout oder Design!) einer Website oder mit anderen Worten: Wie zufriedenstellend ist das Benutzer-Erlebnis (auch "User Experience" oder einfach nur "XP") für den Besucher einer Webpage?

Für all diejenigen, die Schwierigkeiten haben herauszufinden ob die eigene Internetpräsenz ein Update benötigt und worin der sinnvollste Ansatz besteht, ist unser Core Web Vitals Guide.

Schon oft hat Google den SEO-Experten Werkzeuge zur Leistungsoptimierung im Web an die Hand gegeben, die es ermöglichen die Qualität einer Website zu beurteilen. Als die bekanntesten gelten hiervon PageSpeed Insights und TestMySite. Neu bei den Web Vitals hingegen ist, dass nun zun ersten Mal die Nutzererfahrung ("User Experience" oder auch "Page Experience") als Qualitätssignal in den Ranking Score einfliesst.

Als Kennzahlen der Seitenleistung (Suchmaschinenoptimierer sagen dazu auch "Metriken") gelten hierbei sämtliche Faktoren, die den Besuch einer Webseite sowohl positiv als auch negativ beeinflußen.

Warum ist die Seitenleistung wichtig?
Die Länge der Ladezeit hat einen erheblichen Einfluss auf die Absprungrate einer Website.
Je länger es dauert bis die Inhalte zu sehen sind, desto höher die Wahrscheinlichkeit, dass Besucher die Website wieder verlassen.

Google gibt dazu folgende Richtwerte an:
• Erhöht sich die Seitenladezeit von 1 Sekunde auf 3 Sekunden, so verzeichnet Google einen Anstieg der Absprungrate um 32%.
• Steigt die Seitenladezeit an von 1 Sekunde auf 6 Sekunden, so erhöht sich die Absprungrate sogar um 106%.

Ein besonders nervtötendes Beispiel für eine negative User-Experience ist die Layoutverschiebung. Eben noch da, ist der Inhalt plötzlich weg: Nachrichten, die sie gerade lesen, Schaltflächen wie "Suchen" oder "Warenkorb" die man gerade anklicken wollte verschwinden, weil neue Elemente nachgeladen werden und sich bisher sichtbare Elemente verschieben.

Mit Einführung der Core Web Vitals führt dieses Verhalten nun zu einem Runterstufen der User Experience. Ende Juni 2021 schrieb das SEO-Portal SearchEngineLand, dass weniger als 4% aller Websites den Web Vitals Test bestanden hätten ("Less than 4% of websites passed all Core Web Vitals tests").

Wie kann man die Core Web Vitals messen?

Zur Ermittlung des Web Vitals Score einer Website, vertraut Google auf 3 Kennzahlen:

• Largest Contentful Paint (LCP) misst die (Teil-)Ladezeit. Genauer: die Zeit die es braucht, bis das größte Element im Browser geladen ist. Für eine gute User-Experience (und um eine schlechte Bewertung zu vermeiden), empfiehlt Google den Abschluß der LCP in weniger als 2,5 Sekunden nach dem ersten Laden der Seite oder maximal nach 4 Sekunden. Den Zeitraum zwischen diesen beiden Werten erachtet Google als "Optimierung erforderlich" (needs improvement").
• First Input Delay (FID) misst, wie lange es dauert, bis die Website reagiert, wenn ein Benutzer auf etwas klickt (Interaktivität). Für ein gute Benutzererfahrung empfiehlt Google hier einen FID-Wert von weniger als 100 Millisekunden (bzw. maximal 300 Millisekunden). Wie bei dem LCP, erachtet Google die Zeit zwischen diesen beiden Werten ebenfalls als "Optimierung erforderlich" (needs improvement").
• Cumulative Layout Shift (CLS) misst die visuelle Stabilität (d.h. ob der Inhalt der Seite während des Ladens oder beim Scrollen herumspringt). Hier sollten Webseiten nach Möglichkeit einen CLS-Wert von weniger als 0,1 oder höchstens 0,25 zu erreichen. Auch hier gilt wieder, dass der der Wert zwischen Minimum und Maximum als "Optimierung erforderlich" (needs improvement") angesehen wird.

Wo kann man Web Vitals messen?

Die Resultate des Web Vitals Checks einer Internetpräsent können Webseitenbetreiber überprüfen in einer Reihe von Online-Tools oder AddOns. Im Gegensatz zu einer Reihe anderer Entwicklertools, die sich überwiegend an professionelle SEOs wenden, sind hier zum Verständnis keine Fachkenntnisse in der Such­maschinen­optimierung erforderlich.

Anders jedoch, verhält es sich bei der Umsetzung der vorgeschalagenen SEO Maßnahmen. Unerfahrene Webseitenbetreiber, sollten hier besser den Rat einer lokalen SEO Agentur einholen.

Für den Core Web Vitals Test vertrauen unsere SEO Experten die 3 bekanntesten der Google DevTools:

Gute URLs:
Prozentsatz der URLs, welche in den Core Web Vitals und dem Bericht zur Nutzererfahrung auf Mobilgeräten den Status "Gut" erreichen.

Anzahl der Impressionen:
Gesamtzahl an Impressionen dieser URLs mit hoher Nutzerfreundlichkeit über die Google Suche.

Wie beeinflußen die Web Vitals SEO?

Beschäftigt man sich ausführlicher mit SEO, so fällt auf, dass ein Begriff im Zusammenhang mit Such­maschinen­optimierung immer wieder auftaucht: "Erlebnis" (engl. "Experience": Page-Experience, User-Experience, UX...).

Für weniger SEO-affine Webseitenbetreiber ist dieser Begriff eher diffus denn er bedeutet keineswegs, dass Google von einer Website möglichst Spektakuläres erwartet - eher sogar das Gegenteil:
Steht der Inhalt nach dem Laden ruhig oder ihn lassen nachgeladene Elemente springen? Passt sich die Webseite verschiedenen Bildschirm-Auflösungen und -Formaten an? Ist die Schrift auch auf kleinen Bildschirmen noch zu lesen? Uvm....

Core Web Vitals sind ein, wenn auch wichtiger, Aspekt unter den Ranking Faktoren von Google. Wichtig sind nach wie vor die Inhalte und die daraus resultierenden Ranking-Signale (z.B. verweilt der Besucher lange auf einer Website und ruft er auch Unterseiten auf, so sieht Google diese Domain als relevant an zu dem gesuchten Keyword).
Core Web Vitals gehören somit also zu den Werkzeugen des technical SEO.

SEO-Optimierer sollten jedoch bedenken, dass sich die Absprungrate (User verlässt die Seite wieder) auf Webseiten mit einer schlechten User-Experience erhöht und sich diese Websites von vornherein der Möglichkeit berauben, diese Ranking-Signale an Google weiterzugeben. Google mobile friendly test (Test auf Optimierung für Mobilgeräte).

Wie kann man den Largest Contentful Paint (LCP) verbessern

Um einen, von Google empfohlenen, LCP-Wert von unter 2,5 Sekunden Ladezeit zu erreichen, muss an einer Reihe Schrauben gedreht werden. Besonders, sollte sie sich noch jenseits der 4 Sekunden Marke befinden.
Doch einige erstaunliche Ergebnisse lassen sich auch von SEO-Laien im "Do-it-yourself" Verfahren erzielen. Welche, das verraten wir Ihnen hier:

#1 - Bilder, die zu lange laden
Reduzieren Sie die Grösse Ihrer Bilder auf das Format, das tatsächlich auf Ihrer Webpage verwendet wird. Ihr Bild soll angezeigt werden mit einer Grösse von 600x200 Pixeln? Verwenden Sie es nicht so, wie es aus dem Fotoapparat oder Smartphone kommt, sondern skalieren Sie es runter und schneiden sie es evtl. auf das benötigte Format zurecht.

Sie glauben, mir der Verwendung von ".jpg" oder ".png" als Bildformat haben Sie bereits alles getan um das datenvolumen zu schrumpfen? Weit gefehlt. Da geht noch was...! Verwenden Sie das von Google entwickelte Bildformat ".webp" (WEBPicture). WebP ist ein leistungsfähiges Bildformat, das eine nahezu verlustfreie Komprimierung für alle Bilder im Web ermöglicht. Im Vergleich zum ohnehin schon leistungsfähigen Format ".png" beispielsweise, erreicht WebP eine bis zu 26% bessere Komprimierung - ohne Qualitätsverlust.

Einen Link zu einem Online-Konvertierer sowie zu vielen andern nützlichen Quellen im Internet, finden Sie am Ende dieses Artikels.

#2 - Zuviele JavaScripts blockieren das Rendering
Das ist allerdings ein Problem. Content Management Systeme (CMS) wie WordPress, Joomla oder Typo3 brauchen diese Skripte wie die Luft zum Atmen um zu funktionieren.

Die gute Nachricht ist:

Es gibt Einsparungspotential. Verzichten Sie auf JS-Scripts für typische Eye-Candy Elemente wie SlideShows u.ä. Am 1. Bild "erfreut" sich der Besucher möglicherweise noch, doch bereits das 2. Bild bekommen nur noch die Wenigsten zu sehen, da sie schon längst zum Inhalt gescrollt sind oder sich zumindest schon in Ihren Content vertieft haben. Fazit: braucht kein Mensch.

#3 - Laaaaange Antwortzeiten des Servers
Hosted Ihr Internet-Provider Ihre Website evtl. nur mit dem billigsten Hosting-Paket? Dann liegt Ihre Internet-Präsenz mit Sicherheit auf einem Webserver mit nur geringer Leistung, die Sie sich noch dazu mit viel zu vielen anderen Sparnasen teilen müssen.

  - Updaten Sie Ihr Hostingpaket und stellen Sie bei der Gelegenheit auch gleich sicher, im Verwaltungsmenü Ihres Accounts HTTPS (die verschlüsselte Variante von HTTP) zu aktivieren. Finden sie dann auch noch einen Menüpunkt, mit dem Sie auf das Übertragungsprotokoll HTTP/2 (erlaubt im Gegensatz zum alten Protokoll die gleichzeitige Übertragung mehrerer Ressourcen, wie JavaScript, Bilder, etc.) wechseln können, haben Sie alles getan, was Sie am Webserver optimieren können.

  - Optimierieren Sie die .htaccess-Datei im root-Verzeichnis Ihrer Internetpräsenz. Dort können Sie einstellen, wie lange die Ressourcen Ihrer Webpräsenz im Browser-Cache verbleiben, bis sie erneut vom Server angefordert werden.
Logo und grosses Startbild sind hier normalerweise heisse Kandidaten für eine Neuanforderung von 1/2 Jahr oder länger.

Generell gilt: Je schneller die Antwortzeit des Webservers, desto schneller das Rendering im Browser und desto besser der LCP-Wert.

#4 - Ich habe alles getan aber Google sagt noch immer, meine Website wäre zu langsam
Verwenden Sie Google's "Accelerated Mobile Pages" (AMP) als Programmiertechnik. Es spielt keine Rolle, ob Sie als eCommerce-Anbieter einen Internet-Shop betreiben oder eine Ware oder Dienstleistung an den Mann bringen wollen: AMP ist DIE Wahl, wenn es darum geht eine hervorrragende Page-Experience und User-Experience für Ihre Core Web Vitals zu erzeugen.

"Create websites with a great page experience out-of-the-box using AMP"
- Google

Es ist auch nicht nötig, Ihren gesamten Webauftritt in Googles AMP neu zu erstellen. Bereits die Verwendung einzelner Komponenten können hier oftmals schon zu erstaunlichen Ergebnissen führen. Rufen Sie uns an...!

Weiterführende Informationen zu AMP finden Sie hier (Google) und hier (diese Website).

Wie kann man den First Input Delay (FID) verbessern?

First Input Delay (FID) ist eine Core Web Vitals Metrik, die den ersten Eindruck eines Benutzers von der Interaktivität und Reaktionsfähigkeit einer Website erfasst. FID misst die Zeit von der ersten Interaktion eines Benutzers mit einer Seite (z.B. dem Klicken eines Buttons) bis zu dem Zeitpunkt, zu dem der Browser tatsächlich auf diese Interaktion reagiert.

FID ist eine Feldmetrik und kann nicht in einer Laborumgebung simuliert werden. Um die Antwortverzögerung zu messen, ist eine echte Benutzerinteraktion erforderlich.

Die Hauptursache für einen schlechten FID Wert ist eine hohe Auslastung des Browsers JavaScript (im Gegensatz zu PHP, welches auf dem Webserver ausgeführt wird). Der Browser kann auf die meisten Benutzereingaben nicht reagieren, während er JavaScript im Hauptthread ausführt. Mit anderen Worten, der Browser kann nicht auf Benutzerinteraktionen reagieren, während der Hauptthread beschäftigt ist.

Durch Optimierung, der Javascript-Ressourcen, mittels defer oder async, werden JavaScript-Dateien erst am Ende des Seitenaufbaus geladen, kompiliert und ausgeführt und die Verzögerung beim Seitenaufbau (delay) somit reduziert.

Wie kann man den Cumulative Layout Shift (CLS) verbessern?

Kumulative Layoutverschiebung (CLS), eine Core Web Vitals Metrik, misst die Instabilität von Inhalten durch Summieren von Verschiebungswerten über Layoutverschiebungen, die nicht innerhalb von 500 ms nach Benutzereingaben auftreten.

Der Cumulative Layout Shift (CLS) misst, um wieviel sich der sichtbare Inhalt einer Webpage während des Ladens verschiebt.

1. Der häufigste Grund für Layoutverschiebungen sind unstrukturierte Bilder, dynamisch nachladende Anzeigen (Banner), HTML-Elemente und Webfonts.

2. Dies lässt sich verhindern, indem Bildern korrekte Seitenverhältnisse zugewiesen werden, der Platz für Werbebanner sowie HTML-Elemente bereits beim Laden reserviert wird und Webfonts in der StyleSheet-Datei (".css") vorgeladen wird.