Core Web Vitals optimieren – ein Praxisleitfaden

Im Sommer 2021 hat Google die Core Web Vitals als Rankingfaktoren eingeführt und damit die Nutzererfahrung für die Bewertung von Webseiten stärker denn je in den Vordergrund gerückt. Wie also können Website Betreiber ihre Seiten am besten für eine Page Experience entsprechend der Core Web Vitals optimieren? Und was hat es mit den Gerüchten um „die neuen Core Web Vitals“ auf sich? Das erfährst Du in diesem Guide.

Was sind die Core Web Vitals?

Die Core Web Vitals sind Metriken, die die Ladegeschwindigkeit, Interaktivität und visuelle Stabilität einer Webseite messen. Sie sind Teil von Googles Page Experience-Ranking Signal, das eine positive und flüssige Nutzererfahrung garantieren soll.

In Googles Worten: „Die Nutzerfreundlichkeit von Seiten wird anhand einer Reihe von Signalen bestimmt, mit denen gemessen wird, wie Nutzer die Interaktion mit einer Webseite über den reinen Informationswert hinaus wahrnehmen. Dazu gehört der Geschwindigkeitsbericht, der mithilfe verschiedener Messwerte feststellt, wie nutzerfreundlich die Webseite im praktischen Einsatz in Bezug auf Ladezeiten, Interaktivität und visuelle Stabilität ist.”

Die Metriken Largest Contentful Paint, First Input Delay und Cumulative Layout Shift

Die Core Web Vitals Dimensionen Ladegeschwindigkeit, Interaktivität und visuelle Stabilität werden durch die Metriken Largest Contentful Paint, First Input Delay und Cumulative Layout Shifts abgebildet.

Ladegeschwindigkeit: Largest Contentful Paint

Wie schnell wird eine Seite beim Besuch für den Nutzer geladen? Diese Frage beantwortet die Metrik Largest Contentful Paint, kurz LCP.

Genauer betrachtet misst LCP die Zeit bis zum vollständigen Rendering des größten sichtbaren Inhaltselements im Viewport. Laut Google soll das Largest Contentful Paint innerhalb der ersten 2,5 Sekunden des Ladevorgangs zu sehen sein.

Warum gerade das größte Sichtbare Element? Anders als ähnliche Metriken wie z.B. der First Contentful Paint, soll LCP das Laden aus der Perspektive des Nutzers messen. Er soll abbilden, wann der Seiteninhalt aus Nutzerperspektive tatsächlich deutlich erkennbar ist.

Interaktivität: First Input Delay

Wie lange muss der Nutzer warten, bis er mit der Seite interagieren kann? Diese Wartezeit misst der First Input Delay, FID.

Gemessen wird die Zeit von der ersten Interaktion des Nutzers mit einer Seite bis zur Reaktion des Browsers auf diese Interaktion. Die Kennzahl erfasst also eventuelle Verzögerungen, etwa wenn ein User einen Link oder Button anklickt.

Lange Wartezeiten sorgen für Frustration, die Seite wirkt im Worst Case „eingefroren“. Daher empfiehlt Google, den FID möglichst unter 100 Millisekunden zu halten.

Visuelle Stabilität: Cumulative Layout Shift

Wie visuell stabil ist die Seite? Treten während dem Laden visuelle Veränderungen auf? Diese Fragen beantwortet die Metrik Cumulative Layout Shift, kurz CLS. Sie zeichnet auf, ob bzw. wie stark sich das Seitenlayout während der Ladephase verändert.

Layout Shifts entstehen etwa, wenn ein User durch eine Seite scrollt und sich deren Aussehen dabei durch auftauchende Buttons, Videos, Bilder oder Pop-Ins neu formatiert.

Das lenkt Besucher vom Lesen der Seite ab, weshalb springende Elemente vermieden werden sollten. Google gibt als Richtwert einen CLS-Wert von weniger als 0,1 an.

Abb. 1: Googles Core Web Vital-Richtwerte

Rückblick: Googles Page Experience Update 2021

An dieser Stelle fragst Du Dich vielleicht, woher die Core Web Vitals eigentlich kommen bzw. warum sie plötzlich in aller Munde sind. Um es kurz zu machen: Die Core Web Vitals wurden 2021 von Google im Rahmen des Page Experience Updates eingeführt.

“Page Experience” ist ein Zusammenspiel aus den neuen Core Web Vitals und den drei bereits bekannten Größen Mobile Friendliness, HTTPS und Richtlinien zur Vermeidung aufdringlicher Interstitials.

Das Ergebnis ist ein ganzheitlicher Ansatz zur Bewertung der Benutzerfreundlichkeit von Webseiten, bei dem die Schlüsselfrage lautet: Wie nehmen Nutzer die Interaktion mit der Webseite als Ganzes wahr?

Abb.2: Googles Page Experience-Ranking Signal

Warum die Core Web Vitals uns alle etwas angehen

Mit den Core Web Vitals stellt Google klar, was eine Webseite bieten muss, um die Erwartungen der Nutzer zu erfüllen (und somit die Erwartungen der Suchmaschine selbst).

Ein schlechtes Seitenerlebnis wird von Google als negatives Signal wahrgenommen und kann sich daher negativ auf das Suchranking und die organische Sichtbarkeit einer Seite auswirken. Umgekehrt kann eine hohe Benutzerfreundlichkeit einen positiven Effekt auf die organische Sichtbarkeit haben.

Die Faktoren, die von den Core Web Vitals gemessen werden, sind grundsätzlich nicht neu und waren für die Benutzerfreundlichkeit einer Website auch vorher schon relevant. Mit der Aufnahme in ein offiziellen Ranking Signal legt Google nun aber einen stärkeren Fokus auf das Thema Benutzerfreundlichkeit und bietet mit den entsprechenden Reports neue Möglichkeiten, Schwachstellen einer Seite zu identifizieren.

Ein schlechtes Nutzererlebnis beeinflusst natürlich nicht nur Deine Rankings. Die Auswirkungen reichen laut Chromium Blog von höheren Absprungraten und niedrigeren Konversionsmöglichkeiten bis hin zur Entscheidung, eine Website nicht erneut zu besuchen. Im Zweifel kostet Dich eine schlechte Nutzererfahrung also wertvollen Umsatz.

Wenn das kein guter Grund ist, das Thema Page Experience anzugehen! Ganz unabhängig davon, wie wichtig Dir Deine SEO Rankings sind, solltest Du die Core Web Vitals als Gelegenheit nutzen, Deine Website genauer unter die Lupe zu nehmen und in Sachen Nutzerfreundlichkeit zu optimieren.

Core Web Vitals richtig messen

Ganz klar, bevor Du Deine Core Web Vitals optimieren kannst, musst Du wissen wo Du stehst – das heißt erst messen, dann optimieren.

Einen Überblick über Deine Core Web Vitals-Performance zu bekommen, ist zum Glück ziemlich einfach. Google unterstützt Seitenbetreiber bei der Performance-Analyse mit den passenden Tools. Deine Core Web Vitals-Werte findest Du zum Beispiel in der Google Search Console, in PageSpeed Insights oder in anderen Tools des Chrome User Experience Reports.

Core Web Vitals in der Google Search Console

Google Search Console liefert Dir einen Überblick zu Deiner Core Web Vitals-Performance auf Desktop und mobilen Geräten – jeweils anhand einer Grafik und Beispielen zu “schlechten”, “zu optimierenden” und “guten” URLs. Die Bewertungen basieren auf Felddaten, also auf den Daten der tatsächlichen Seitenbesuche.

• Die Übersichtsseite des Berichts zeigt die kumulierten Daten der analysierten URLs aufgeschlüsselt nach Gerätetyp und ihrem Status „gut“, „verbesserungsbedürftig“ und „schlecht“.

• Die Detailansicht für jeden Gerätetyp (mobil, Desktop) zeigt die vorhandenen Problemtypen und ihren Status für alle analysierten URLs der Website.

• Wenn Du auf ein aufgelistetes Problem klickst, werden Beispiel-URLs angezeigt, bei denen das erkannte Problem auftritt. Seit Sommer 2022 zeigt Google hier auch die Core Web Vitals Werte für die jeweiligen Beispiel-URLs an, wodurch die Auflistung deutlich aufschlussreicher wird.

Abb.3: Übersicht über die Core Web Vitals-Performance für Mobile und Desktop in der Google Search Console

Abb. 4: Für jedes „Problem“ werden in GSC beispielhafte URLs mit ihren Core Web Vitals Werte angezeigt.

Core Web Vitals in Googles PageSpeed Insights

PageSpeed Insights liefert Messungen für einzelne Seiten Deiner Website. Im Ergebnisfenster unter “Leistung auf der Nutzerseite” zeigt Google die Core Web Vitals-Werte der getesteten Seite an. Zusätzlich zeigt das Tool, ob die getestete Seite die Core Web Vitals-Prüfung insgesamt besteht.

Abb. 5: Core Web Vitals-Ergebnisse aus Googles PageSpeed Insights

Core Web Vitals in den Chrome Entwicklertools

Wer es ganz genau wissen möchte, kann die Google Entwicklertools nutzen, um den tatsächlichen Ladevorgang einer Seite zu analysieren.

• Öffne mit STRG + UMSCHALT + I auf dem PC, bzw. mit STRG + OPTION + I auf dem Mac die Chrome Entwicklertools. Unter den weiteren Tools im Reiter oben findest Du die Option „Performance“.

• Starte dann wie dort beschrieben ein Recording und lade die zu analysierende Seite neu (Hard Refresh).

• Stoppe das Recording, sobald die Seite vollständig geladen ist.

• In der Aufzeichnung des Ladeprozesses findest Du Angaben zum Ladezeitpunkt Ladens des LCP und potenzieller Layout Shifts.

• Durch Hovern auf die verschiedenen Werte im Diagramm wird das jeweilige Element auf der Seite markiert, sodass Du prüfen kannst, welches Element für den LCP-Wert und welche Elemente für potenzielle Layout Shifts verantwortlich sind.

Abb. 6: Aufzeichnung des Seitenladeprozesses in den Chrome Entwicklertools

Core Web Vitals auf der Ryte Platform

Auch die Ryte Plattform kannst Du zum Testen und Analysieren der Core Web Vitals verwenden.

Der „Web Vitals”-Report in Ryte Web Performance gibt Dir nicht nur einen Überblick über die Anzahl Deiner “guten” “verbesserungswürdigen” und “schlechten” Seiten, sondern liefert auch die einzelnen LCP, FID und CLS-Werte zu all Deinen Seiten. Du kannst ein kostenloses Ryte Trial starten, um den Report auszuprobieren.

Abb. 7: Core Web Vitals-Werte überprüfen mit Ryte

Praxis Tipps: Core Web Vitals Optimierung

Jetzt geht es an die Core Web Vitals Optimierung. In diesem Abschnitt haben wir ein paar Faktoren zusammengefasst, die sich häufig auf die Page Experience auswirken. Schau Dir zusätzlich die Diagnose-Tipps aus Tools wie Google PageSpeed Insights an, um die spezifischen Schwachstellen Deiner Website zu identifizieren.

Largest Contentful Paint verbessern

Zur Erinnerung: Bei LCP geht es um die Ladegeschwindigkeit des größten Elements im sichtbaren Bereich Deiner Seiten. Folgende Tipps helfen Dir bei der LCP-Optimierung:

• Serverantwortzeit reduzieren. Als erstes solltest du, die generelle Antwortzeit des Servers für das Hauptdokument prüfen und falls nötig optimieren, da alle anderen Anfragen – inklusive das Laden des LCP – von ihm abhängen. Analysiere die Effizienz Deines serverseitigen Codes und sorge zum Beispiel dafür, dass statische Elemente im Cache gespeichert werden, um Ressourcen zu sparen.

• Vermeide Render-Blocking JavaScript und CSS. JavaScript und CSS-Ressourcen benötigen relativ viel Zeit für die Verarbeitung durch den Browser, und verzögern das Laden Deiner Seiten und Deiner LCP. Prüfe, welche JS- und CSS-Dateien für das unmittelbare Nutzererlebnis tatsächlich nötig sind und stelle also sicher, dass so wenig wie möglich JavaScript und CSS-Dateien den Rendervorgang blockieren. Zum Beispiel indem Du JS- und CSS-Dateien komprimierst, unbenutzte Dateien entfernst, asynchrones Laden von Dateien ermöglichst oder kritisches CSS inline einfügst.

• Große Bilddateien optimieren. Das Largest Contenful Paint einer Seite ist in vielen Fällen ein großes Bild im Above-the-Fold-Bereich – z.B. Dein Pagehero oder ein großer Banner. Identifiziere das LCP Deiner Seiten (z.B. mit PageSpeed Insights oder wie oben beschrieben mit den Chrome Entwicklertools) und prüfe Möglichkeiten wie Bildkomprimierung und Größenanpassung.

• Content im oberen Bereich der Seite sorgfältig auswählen. Alternativ kannst Du auch überlegen, ob Du im oberen Bereich Deiner Seiten ganz auf große Bilder verzichten möchtest, um Deinen LCP-Wert zu optimieren. Überdenke das Seitenlayout und die Nutzung von Bildern, die als erstes beim Laden angezeigt werden. Vielleicht lassen sich umfangreiche Dateien und Videos auch weiter unten auf der Seite platzieren? Ob diese Änderung die Ladegeschwindigkeit Deiner Seiten verbessert, kannst Du mit einem A/B-Test beider Varianten prüfen.

• Beim Testen die mobile Version nicht vergessen. Mobilgeräte haben kleinere Bildschirme. Also unterscheiden sich die Inhalte, die sofort beim Laden im Blickfeld erscheinen von der Desktop-Version. Teste Deine Seiten deshalb immer auch für Mobilgeräte und achte dabei auch auf die Unterschiede zwischen horizontaler und vertikaler Darstellung. Halte Dateigrößen für Mobile möglichst gering, da Benutzer auf Mobilgeräten meist eine langsamere Verbindung haben.

First Input delay verbessern

Wenn eine Seite mit Verzögerung auf die Eingabe seitens der Nutzer reagiert, sprechen wir von First Input Delay. Die folgenden Tipps helfen Dir, FID auf Deinen Seiten zu vermeiden:

• JavaScript reduzieren. Per JavaScript lassen sich sehr leicht Daten aus externen Quellen in Webseiten einbinden. Durch die Verwendung von zu viel, zu großem JavaScript leidet allerdings wie oben schon erwähnt die Reaktionszeit. Denn die Ausführung von JavaScript im Haupt-Thread hindert Deinen Browser daran, auf Benutzerinteraktionen zu reagieren. Prüfe bei Problemen mit FID die Verwendung von JavaScript, optimiere verwendete Dateien und entferne nicht benötigtes JavaScript.

• Optimierung des Codes von Drittanbietern. Widgets, Formulare und Animationen, die auf Code von Drittanbietern basieren, erhöhen die Last durch simultan ablaufende Prozesse, die komplett abgeschlossen sein müssen, bevor Deine Seite interaktiv wird. Hier gilt: Beschränke Dich auf das Wesentliche und prüfe, ob Deine Seiten nicht-benötigten Drittanbieter Code enthalten, der entfernt werden kann. Außerdem kannst Du On-Demand-Laden von Drittanbieter-Code erwägen und das Laden der wichtigsten Elemente für den Nutzer priorisieren.

• Generelle Entlastung des Main Thread. Je mehr Prozesse eine Seite beim Laden durchlaufen muss, desto höher die Rechenlast für den Main Thread. Dieser muss Nutzerprozesse und Paint-Vorgänge sowie Code-Einbettungen verarbeiten. Entlastet wird der Main Thread durch weniger komplexe Layouts und den Verzicht auf Spezialeffekte.

Layout Shifts verbessern

Zu Problemen mit der Metrik Cumulative Layout Shift (CLS) kommt es, wenn eine Website ihre visuelle Darstellung während eines Besuchs ungewollt verändert. Hier ein paar Tipps, wie Du solche Layoutverschiebungen vermeiden kannst.

• Ausreichend Abstand um visuelle Elemente einhalten. Wenn zwischen Text und Bild nicht genug Abstand gehalten wird und z.B. der Text einer Website Bilder umfließt, kann sich je nach Bildschirmgröße das komplette Layout verschieben. Vermeide daher die Gruppierung von Text und Bild und sorge für ausreichend Abstand um visuelle Elemente. In den meisten Website-Themes sind solche Einstellungen bereits vorgenommen. Dennoch solltest Du auf Nummer sicher gehen und Deine Einstellungen prüfen.

• Vermeide Bilder, Animationen und Embeds ohne Abmessungen. Elemente ohne Größenangaben oder mit dynamischen Größen können für deutliche Verschiebungen im Layout sorgen. Derartige Verschiebungen kannst Du vermeiden, indem Du Bildern und Videoelementen die Größenattribute Breite und Höhe hinzufügst und für dynamische Anzeigen den größtmöglichen Platz reservierst.

• Vermeide das Hinzufügen dynamischer Inhalte. Das Erscheinen neuer Inhalte über bestehenden Inhalten (z. B. Erscheinen von Inhalten als Reaktion auf eine Nutzerinteraktion), führt zu unerwarteten Layout-Verschiebungen. Am besten vermeidest Du solche nachträglichen Änderungen am Layout. Wenn dynamische Elemente wie GDPR-Hinweise oder Newsletter-Pop-ups notwendig sind, solltest Du im Voraus ausreichend Platz im Viewport dafür reservieren (Platzhalter).

Tipp: Für Deine Core Web Vitals Optimierung kannst Du auch unsere Core Web Vitals Checkliste als Hilfestellung nutzen. Du kannst Sie kostenlos als PDF downloaden.

Ausblick 2022: Neue Core Web Vitals Metriken geplant

Der Google-Algorithmus steht niemals still. Kaum haben wir uns an LCP, FID und CLS gewöhnt, steht schon die nächste Neuerung an: Und zwar die Einführung zweier neuer Core Web Vitals für “Smoothness” und “Responsiveness”.

Google hat die Erweiterung der Core Web Vitals im November 2021 angekündigt. Die neuen Kennzahlen zur Messung der Smoothness und Responsiveness sollen sich laut Google noch 2022 zu den Metriken für Ladegeschwindigkeit, Interaktivität und visueller Stabilität gesellen.

Die Smoothness-Metrik ist aktuell noch in Planung. Zu “Responsiveness” wurde im Mai 2022 die Metrik “Interaction to next Paint**”** vorgestellt. Folgendes wissen wir über die neuen Core Web Vitals:

Responsiveness: Interaction to Next Paint (INP)

Im Mai 2022 hat Google Interaction to Next Paint, kurz INP vorgestellt. Entwickelt wurde sie laut Google, um die  End-to-End-Latenz einzelner Ereignisse besser zu erfassen und ein ganzheitliches Bild der gesamten Reaktionsfähigkeit einer Seite zu bieten.

Während First Input Delay (FID) die Zeit zwischen der Interaktion des Nutzers mit der Seite und dem Zeitpunkt, an dem die Event-Handler ausgeführt werden können misst, soll die neue Kennzahl die gesamte Ereignisdauer erfassen, d. h. von der ersten Benutzereingabe bis zum nächsten Bild, nachdem alle Ereignisbehandler ausgeführt wurden.

Genauer gesagt protokolliert Interaction to Next Paint (INP) die Latenz aller Interaktionen während des gesamten Lebenszyklus der Seite und zeichnet davon den höchsten Wert als INP auf. Dementsprechend sollten Website Betreiber einen möglichst niedrigen INP-Wert anstreben. Dieser zeigt, dass eine Seite jederzeit zuverlässig reagiert.

Aktuell definiert Google einen INP bis 200 Millisekunden als gute Reaktionszeit und einen INP über 500 Millisekunden als schlechte Reaktionszeit hat. Da INP aktuell noch eine experimentelle Feldmetrik ist, können sich diese Angaben aber noch ändern.

Messen kannst Du Interaction to Next Paint bereits mit Googles PageSpeed Insight, der CrUX API , der Chrome Web Vitals Extension und anderen Google Tools.

Tipp: Wenn Du tiefer in die neuen Core Web Vitals einsteigen möchtest, empfehlen wir Dir unbedingt den web.dev Blog. Dort erklären und dokumentieren Googles Entwickler:innen die Core Web Vitals Metriken in allen Einzelheiten.

Smoothness: Metrik in Planung

Bei der neuen Smoothness-Metrik handelt es sich bisher erstmal nur um eine Idee der Chrome-Entwickler.

Die neue Metrik soll zur Vermeidung “nicht smoother” Erlebnisse beitragen. Gemeint sind zum Beispiel beim Scrollen stotternde Seiten oder einfrierende Animationen.

Wie genau “Animation Smoothness” aussehen wird, wie die beiden neuen Metriken die Core Web Vitals verändern werden und wann sie offiziell Teil des Page Experience-Signals werden, bleibt abzuwarten. Eins ist aber klar: Websitebetreiber, die nach den Top Positionen in den SERPs streben, sollten sich auf die zunehmende Wichtigkeit der Page Experience gefasst machen.

Unser Fazit: Core Web Vitals als Chance verstehen

Googles Ziel ist es, Nutzern die bestmöglichen und relevantesten Inhalte für ihre Suchanfragen zu liefern. Um dieses Ziel zu erreichen, arbeitet Google kontinuierlich an der Verbesserung seines Suchalgorithmus. Das Thema Page Experience wird dabei in Zukunft sicher weiterhin eine wichtige Rolle spielen.

Davon abgesehen sind Faktoren wie Seitengeschwindigkeit, Interaktivität und Mobilfreundlichkeit einer Website mehr als Ranking-Signale von Google. Sie haben einen entscheidenden Einfluss auf die User Journey und prägen die Erfahrung, die Nutzer:innen beim Besuch einer Website machen und die sie mit einer Marke oder einem Produkt in Verbindung bringen.

Als Website Betreiber oder SEO sollte Dein Ziel deshalb nicht allein das Erreichen guter Google-Benchmarks sein. Dein Ziel sollte sein, die Benutzerfreundlichkeit Deiner Website zu verbessern, um den Besuchern ein möglichst angenehmes Erlebnis zu bieten. Die besseren Rankings kommen dann ganz automatisch.

Aus diesem Blickwinkel sind die Core Web Vitals weniger eine zusätzliche Hürde, als eine willkommene Chance zur Verbesserung der eigenen Website User Experience.

Analysiere Deine Core Web Vitals mit Ryte!

Jetzt kostenlos testen