Google Pagespeed: Optimiere Core Web Vitals für bessere Rankings.

Eine schnelle Website ist wichtig für das Nutzererlebnis und das Ranking bei Suchmaschinen. Mit Google Pagespeed Insights lässt sich der “Pagespeed Score” ermitteln und wertvolle Optimierungs-Vorschläge erhalten.

Doch seit Mai 2021 berücksichtigt Google auch die Core Web Vitals, um das Nutzererlebnis auf einer Website zu messen.

In diesem Artikel erkläre ich die Core Web Vitals und wie du den Google Pagespeed verbessern kannst.

Was sind Core Web Vitals?

Die Core Web Vitals sind eine Teilmenge von Google Web Vitals und wird häufig als Synonym verwendet.

Mit den Core Web Vitals kann Google die Nutzerfreundlichkeit von Webseiten bewerten.

Die Kennzahlen konzentrieren sich auf den Ladevorgang, die Interaktivität und die visuelle Stabilität einer Seite. Um diese Aspekte zu messen, hat Google drei Kennzahlen eingeführt, nämlich LCP, FID und CLS.

1. Largest Contentful Paint (LCP): Diese Kennzahl misst die Zeit, die zum vollständigen Laden der Hauptinhalte einer Seite benötigt wird. Der Idealfall, den Google vorgibt, beträgt hierbei 2,5 Sekunden oder weniger.
2. First Input Delay (FID): Misst die Zeit zwischen der ersten Nutzerinteraktion auf der Seite und dem Moment, in dem der Browser darauf reagiert.
3. Cumulative Layout Shift (CLS): Misst die Stabilität des Layouts einer Webseite und ob sich Layout-Elemente während der Nutzung verschieben. Der Idealfall liegt bei 0,1 oder weniger.

Diese drei Kennzahlen sollten also insbesondere im Blickpunkt stehen, wenn es um die Nutzererfahrung geht, denn sie werden sich ab Mai direkt auf die Platzierungen in der mobilen Suche auswirken.

Dabei ist es wichtig, den von Google vorgegebenen Höchstwert nicht zu überschreiten und möglichst unterhalb der empfohlenen Werte zu bleiben:

Core Web Vitals messen

Neben PageSpeed Insights gibt es noch weitere Tools für die Messung:

• Lighthouse – Aufruf über die Chrome Developer Tools
• Chrome UX Report – Mehr Infos und Nutzung > https://developer.chrome.com/docs/crux/dashboard/
• Web Vitals Extension

Überblick Benutzerfreundlichkeit in der Google Search Console

In der Search Console bietet Google mittlerweile eine nützliche Übersicht an, die dir die Benutzerfreundlichkeit der URLs deiner Webseite präsentiert.

Du findest diese unter “Nutzerfreundlichkeit > Verhalten von Seiten”. Die Grafik gibt dir sowohl den Prozentsatz der benutzerfreundlichen URLs als auch die Anzahl der Impressionen dieser hochwertigen URLs an.

Unterhalb der Grafik siehst du Felder, welche mögliche Optimierungspotenziale aufzeigen. Als SEO-Experte oder Webseitenbetreiber solltest du den Bereich der Core Web Vitals von nun an besonders im Auge behalten.

Wenn du auf dieses Feld klickst, werden die wichtigen Kennzahlen (LCP, FID und CLS) angezeigt, die du optimieren solltest.

SEO-Optimierung: Einfluss der Werte auf die Suchmaschinenplatzierung

Google plant die Einführung eines neuen Rankingfaktors – das Page Experience Signal. Dieses Signal kombiniert die Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) mit bestehenden User Experience Signalen. Die folgenden Signale sind von Google definiert:

• Mobile-Friendliness: Seitenbetreiber können die Mobile-Friendliness ihrer Seite über Googles Mobile-Friendly-Test überprüfen.
• Safe-Browsing: Der Security Issues Report in der Search Console gibt Seitenbetreibern Auskunft über etwaige Probleme in Bezug auf sicheres Surfen.
• HTTPS-Sicherheit: Seitenbetreiber können eine sichere HTTPS-Verbindung nutzen und ein kleines Schloss neben der URL ihrer Seite anzeigen lassen.
• Intrusive Interstitial Guidelines: Intrusive Interstitials sind Pop-ups, die einen großen Teil oder sogar den gesamten Inhalt einer Seite verdecken. Ausnahmen sind gesetzliche oder ethische Vorgaben wie eine Altersverifikation.

Das Page Experience Signal wird hauptsächlich auf technischen Faktoren basieren und keine inhaltlichen Aspekte berücksichtigen. Content und Keywords bleiben weiterhin wichtige Faktoren für eine gute Platzierung im Ranking. Dennoch kann eine Seite mit einem besseren Page Experience Signal bei inhaltlich ähnlicher Relevanz eine höhere Platzierung erreichen.

Seitenbetreiber sollten das Page Experience Signal bei der SEO-Optimierung berücksichtigen, aber nicht ausschließlich darauf konzentrieren. Relevanten und hochwertigen Inhalten kommt weiterhin eine entscheidende Bedeutung zu, um eine gute Platzierung im Ranking zu erreichen.

Optimierung von Core Web Vitals

1. Largest Contentful Paint (LCP)

LCP beschreibt die Zeit, die benötigt wird, um den größten sichtbaren Inhalt wie Bilder, Videos oder Textblöcke im Ansichtsfenster zu laden.

Diese Kennzahl ist von Bedeutung, da der umfangreichste Inhalt vermutlich der wichtigste Teil ist, den der Nutzer auf der Seite wahrnehmen soll. Ein gutes LCP stellt sicher, dass Besucher rasch Zugang zu den wesentlichen und relevanten Informationen erhalten.

Langsame Seiten schneiden schlechter ab

Die Benutzererfahrung steht in direkter Verbindung mit der Conversion-Rate und somit auch mit den Umsätzen eines Onlineshops. Darüber hinaus setzt Google vermehrt auf die Seitenerfahrung als eigenständigen Ranking-Faktor.

Seit 2010 berücksichtigt Google die Seitenladezeit als SEO-Ranking-Faktor. 2018 folgte ein Google-Update, welches sehr langsame mobile Websites in den Suchergebnissen herabstuft.

Langsame Seiten führen zu geringerer Conversionrate

Jeder Entwickler kennt den Einfluss der Ladezeit einer Seite auf das Nutzererlebnis. Lange Ladezeiten drücken die Conversionrate, da Benutzer ungern warten – insbesondere auf dem Smartphone.

Die Seitengeschwindigkeit beeinflusst also die Einnahmen aus dem E-Commerce sowohl über die organische Reichweite, die ein Onlineshop erreicht, als auch durch die Conversionrate.

2. First Input Delay (FID)

FID steht für die Verzögerung, die ein Nutzer beim ersten Interagieren mit deiner Seite erlebt, wie zum Beispiel beim Klicken oder Tippen. Je schneller der Browser reagiert, desto reaktionsschneller wirkt die Seite.

Da Entwickler heute komplexere Seiten erstellen, sind Browser stärker beansprucht. Eine Benutzereingabe könnte sich verzögern, wenn der Hauptthread des Browsers mit anderen Aufgaben beschäftigt ist und nicht sofort auf die Aktion antworten kann.

Verzögerungen bewirken, dass deine Webseite träge und unresponsiv erscheint, was den Nutzer frustriert und ihn dazu bringt, die Webseite oder den Onlineshop zu verlassen.

Wie misst man FID?

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

Im Gegensatz zu anderen Kennzahlen benötigt FID echte Benutzerinteraktionen für eine präzise Messung.

Google kann den FID-Score nicht auf Basis von Labordaten vorhersagen – echte Nutzerdaten sind erforderlich, was FID zu einer “Feld”-Metrik macht.

Da FID Daten von Nutzern auf unterschiedlichen Geräten und in verschiedenen Umgebungen sammelt, sind die FID-Werte schwerer kontrollierbar. Daher können die Daten häufiger variieren.

Häufig auftretende Probleme, die ein schlechtes FID-Ergebnis verursachen

• Belastung durch viele Ressourcen: Vieles, was LCP beeinflusst, wirkt sich auch auf FID aus.
• Übermäßiges JavaScript: Eine große Menge an Skripten erzeugt mehr Dateien, die abgerufen und durchlaufen werden müssen (was längere Verzögerungen für die Nutzer bedeutet).
• Lange laufende oder ineffiziente Skripte: Schlecht geschriebener oder übermäßiger Code kann den Hauptthread blockieren.

Wie du die FID-Punktzahl verbessern kannst

Behebe zuerst alle bestehenden LCP-Performance-Probleme. Diese betreffen in der Regel sowohl LCP als auch FID.

Identifiziere und optimiere Elemente, die den Hauptthread blockieren, um die Time to Interactive (TTI) zu erhöhen.
Ordne die Elemente so an, dass Event-Handler für Elemente im sichtbaren Bereich (above the fold) so früh wie möglich registriert werden, um die TTI zu reduzieren.

Überprüfe Anwendungen, Plugins und Skripte von Drittanbietern. Bewerte den Nutzen der einzelnen Elemente und reduziere unnötige Plugins und Skripte.

3. Kumulative Layout-Verschiebung (CLS)

CLS, auch bekannt als Cumulative Layout Shift, ist eine neuartige Metrik, die Google zur Beurteilung des Nutzungserlebnisses einsetzt.

Bei CLS handelt es sich um die Messung von Layout-Verschiebungen während des Ladevorgangs einer Webseite.

In erster Linie beschäftigt sich CLS mit der Anzahl und dem Ausmaß der Layout-Verschiebungen. Das Hauptaugenmerk liegt auf der visuellen Stabilität einer Website.

Anders als bei den ersten beiden Metriken, berücksichtigt CLS nicht die Geschwindigkeit einer Seite, sondern konzentriert sich ausschließlich auf das Nutzungserlebnis.

Ein Beispiel für CLS:

Stell dir vor, du möchtest auf einen Button auf einer Webseite klicken, während im Hintergrund noch ein umfangreicher Inhalt geladen wird. Sobald dieser Inhalt vollständig angezeigt wird, verschiebt er den Button weiter nach unten und Sie klicken versehentlich an die falsche Stelle.

Solch ein Verhalten führt zu einer negativen CLS-Bewertung.

CLS-Messung:

Zur Messung der CLS-Punktzahl empfiehlt sich die Verwendung von PSI (PageSpeed Insights) oder der Chrome-Browser-Erweiterung. Ein optimaler CLS-Wert liegt unter 0,1.

Mögliche Probleme, die zu einer schlechten CLS-Punktzahl führen:

• Dynamisch eingefügte Anzeigen oder Banner
• Extern geladene Widgets: Der Inhalt und/oder das Styling könnten nach dem Laden und Ausführen von Skripten geladen werden, wodurch der bestehende Inhalt verschoben wird.
• Lazy Loading eines Seitenbanners (Hero Image): Der Platzhalter kann eine andere Größe haben und somit die Seite verschieben.

CLS-Score im Onlineshop optimieren:

• Breite- und Höhenattribute hinzufügen: Füge Breite- und Höhenattribute (oder früh geladenes CSS-Styling) zu Elementen hinzu, die Verschiebungen verursachen. Dies verhindert einen Wechsel von 0 auf x Pixel während des Ladens.
• Ersatzschriftart verwenden: Wähle eine Ersatzschriftart, die gut zur gewünschten Schriftart passt. Dies reduziert die Auswirkungen, wenn die benutzerdefinierte Schriftart geladen wird.
• Platz für Inhalte reservieren: Reserviere einen Bereich mit festgelegter Größe für den einzufügenden Inhalt (z. B. Höhe und Breite einer einzufügenden Suchleiste festlegen, um die Position zu fixieren, bevor HTML und CSS verfügbar sind).
• Kritisches CSS priorisieren: Achte darauf, dass kritisches CSS vor dem Inhalt geladen wird. Struktur/Layout, Menü und übergeordnete CSS-Elemente sollten vor dem HTML-Inhalt geladen werden.
• JavaScript-Layout-Animationen vermeiden: Verzichte auf JavaScript-Layout-Animationen oder ersetze diese durch CSS-Animationen. Entferne sie ganz oder setze CSS-Animationen ein.

Indem du diese Schritte befolgst, kannst du den CLS-Score deines Onlineshops verbessern und somit das Nutzungserlebnis für die Besucher verbessern.

Fazit

Die Optimierung der drei Core Web Vitals wird immer wichtiger. Das steht fest.

Webmaster haben mit verschiedenen Tools genügend Möglichkeiten, Optimierungsansätze für FID, LCP und CLS zu finden.

Dennoch scheint die Aufregung um die Core Web Vitals etwas überzogen.

Einerseits sind zwei der drei Metriken bereits vorhandene Kennzahlen, die vor ihrer Bezeichnung als “Core Web Vitals” existierten: FID und LCP sind keine neuen Werte, aber ihre Bedeutung wurde durch ihre Einordnung in die Core Web Vitals nochmals betont.

Der Cumulative Layout Shift (CLS) ist die einzige vollständig neue Metrik.

Trotzdem gilt für den CLS dasselbe wie für die anderen beiden Metriken: Websites sollten nicht nur für Suchmaschinen, sondern auch für Nutzer optimiert sein. Und das ist nichts Neues.

Andererseits betont Google selbst, dass der Inhalt weiterhin der entscheidendste Rankingfaktor bleiben wird:

“Obwohl alle Komponenten der Seiten-Erfahrung wichtig sind, werden wir Seiten mit den besten Informationen insgesamt priorisieren, auch wenn einige Aspekte der Seiten-Erfahrung nicht optimal sind. Eine gute Seiten-Erfahrung bedeutet nicht zwangsläufig großartigen, relevanten Inhalt.”

Wenn eine Website also besonders relevanten Inhalt hat, aber nur einen durchschnittlichen Core Web Vitals Score, wird sie wahrscheinlich weiterhin gut abschneiden. Die Google Page Experience wird eher zum entscheidenden Kriterium in stark umkämpften Bereichen, in denen mehrere Websites mit ähnlich gutem Inhalt existieren.

Der wesentliche Vorteil der Core Web Vitals besteht darin, anhand klarer Kennzahlen nachvollziehbare Auswertungen der Nutzererfahrung zu ermöglichen.

So kann schnell und einleuchtend aufgezeigt werden, ob und inwieweit Probleme im Bereich der Nutzererfahrungen bestehen und welche Maßnahmen zur Optimierung der Seiten-Geschwindigkeit oder Verbesserung der Benutzerfreundlichkeit erforderlich sind.