Core Web Vitals: So bereitet ihr euch auf die neuen Google-KPIs vor

Die Core Web Vitals sind die neuen Google-KPIs, wenn es um die Bewertung des User Experience auf einer Website geht. Google definiert damit drei Parameter, auf die Webmaster & SEOs künftig achten sollten. Diese messen jeweils einen wichtigen Wert aus den Bereichen Ladezeit, Interaktion und Stabilität und können viel präziser für die Optimierung, Budget-Verhandlungen und Reporting genutzt werden als etwa bisherige Lighthouse-Detaildaten. Die Core Web Vitals bilden gemeinsam mit anderen Aspekten rund um Website-Sicherheit und Nutzerfreundlichkeit den neuen Ranking-Faktor Page Experience, der ab Juni 2021* in den Google-Algorithmus integriert wird. Alles Wichtige zu den Core Web Vitals inklusive Optimierungstipps und Case Study lest ihr in diesem Beitrag.

Können wir euch bei der Umsetzung eurer SEO- und Content-Strategien unterstützen? Vereinbart einfach einen Kennenlern-Termin mit unseren Experten der Digital Strategies Group:

Jetzt Termin vereinbaren

Core Web Vitals: Fokus auf drei harte Kennzahlen

Anfang Mai 2020 hat Google die Core Web Vitals angekündigt. Google möchte diese Kern-Metriken zur Bewertung der User Experience von Websites nutzen. Zum Start hat Google dabei drei Core Web Vitals vorgestellt, die ab Juni 2021* gemeinsam mit anderen Werten rund um ein stabiles und sicheres Nutzungserlebnis von Websites einen neuen Ranking-Faktor bilden – mehr zum Ranking-Faktor Page Experience lest ihr im verlinkten Artikel.

Die Core Web Vitals stammen dabei von realen Nutzer-Daten und sind in den wichtigsten Google-Tools für Webmaster und SEOs implementiert. Zum Start beinhalten die Core Web Vitals drei Kern-Metriken, die ab Juni 2021 das Ranking einer Seite beeinflussen können:

• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

Die Core Web Vitals sollen dabei im Laufe der Zeit den technischen Entwicklungen und dem Nutzerverhalten angepasst werden. Deshalb will Google die Core Web Vitals jedes Jahr evaluieren; eventuell verändern sich die Kern-Metriken also.

Der Fokus auf drei nachvollziehbare Kern-Metriken bringt einige Vorteile mit sich. Google kann die Bewertung von Websites anhand klar kommunizierter KPIs vornehmen. Webmaster, Web-Entwickler und SEOs haben gegenüber Kunden oder dem Management eine solide Argumentationsgrundlage für Aufträge und Budgets. Auch können Optimierungen der eigenen Core Web Vitals dann als klares Erfolgsergebnis ausgewiesen werden.

Wo kann ich die Core Web Vitals Ergebnisse abrufen?

Inzwischen sind die Core Web Vitals in die wichtigsten Google Analyse-Tools eingebunden; so können die Ergebnisse der Core Web Vitals etwa über Google Lighthouse oder PageSpeed Insights abgerufen werden. Hierbei wird der Speed Score zwischen 0 und 100, der aus den Lighthouse-Daten generiert wurde, durch die Core Web Vitals ergänzt. Die Ergebnisse der Core Web Vitals werden dabei als Felddaten angeboten. Bei Felddaten handelt es sich um anonymisierte Daten der Website-Darstellung auf Browsern echter Nutzer auf verschiedenen Geräten und unterschiedlichen Verbindungsgeschwindigkeiten. Zusätzlich werden die Core Web Vitals als simulierte Lab-Daten angegeben; diese basieren auf einem simulierten Seitenaufbau auf einem einzelnen Gerät unter festgelegten Netzwerkbedingungen. Daher können sich die Werte unterscheiden.

Ebenfalls sind die KPIs der Core Web Vitals in der Google Search Console abrufbar und bieten hierbei gleich eine Übersicht für die jeweilige Domain, wieviel und welche URLs in Ordnung sind (grün), eine Optimierung erfordern (gelb) oder als schlecht (rot) angesehen werden. Die Daten der Search Console basieren dabei auf dem Bericht zur Nutzererfahrung in Chrome und spiegeln die tatsächlichen Nutzungsdaten der Website von Nutzern auf der ganzen Welt wider:

Google bewertet Core Web Vitals separat für Desktop und Mobile

Inzwischen hat Google Webmaster Trends Analyst John Mueller einige Ergänzungen zu den Core Web Vitals in den deutschen Google Office Hours am 29. Oktober 2020 getätigt. Demnach spielen zusätzliche Metriken für die Ladezeit, wie sie etwa in Google Lighthouse detailliert ermittelt werden, für die Page Experience als Ranking-Faktor keine Rolle. Zudem würden die Google Core Web Vitals getrennt für Mobile und Desktop bestimmt. Meist sind die mobilen Werte für die Core Web Vitals schlechter als für die Desktop-Seite. Dies bewerte Google dann auch separat; für die Seite gebe es dann keine negativen Auswirkungen für die Rankings in den Desktop-Suchergebnissen, womöglich aber für die mobilen Rankings, erklärte Mueller weiter.

Die komplette Antwort von John Mueller zu den Core Web Vitals könnt ihr hier im Video nachschauen:

 

Nachfolgend sollen die drei Start-KPIs der Core Web Vitals näher vorgestellt werden, inklusive Optimierungstipps und weiterführenden Links.

Largest Contentful Paint (LCP):
Wie schnell lädt meine Seite?

Mit dem Largest Contentful Paint (LCP) wird im Rahmen der Core Web Vitals KPIs die Ladezeit gemessen, die vergeht, bis das größte Content-Element einer Seite geladen wurde. Als Content-Element kommen Bilder, Videos, Text-Blöcke oder Elemente mit einem Hintergrund-Image in Frage. Für den LCP sind Werte bis 2,5 Sekunden Ladezeit gut, Werte zwischen 2,5 und 4 Sekunden verbesserungswürdig – und alles ab 4 Sekunden ein schlechter Wert. Welches das größte Content-Element einer Seite ist, entscheidet sich je nach Ladestatus der Seite – denn meist wird das größte Element auch am Schluss geladen. Nachfolgend ein Beispiel der CNN-Website:

Google hat sich sehr viel Mühe gegeben, die Dokumentation zu den einzelnen Core Web Vitals so detailliert und nachvollziehbar wie möglich zu machen. Mehr Informationen und die genaue Berechnungsgrundlage findet ihr in der Google-Dokumentation zum Largest Contentful Paint.

Optimierung für den Largest Contentful Paint

• Server antwortet zu langsam: Je länger der Browser benötigt, um Content vom Server zu empfangen, desto länger dauert auch der Seitenaufbau für den Nutzer. Deshalb empfiehlt Google, statt einer kompletten HTML-Datei ein Framework wie React zu nutzen, dass die Inhalte einer Seite dynamischer an den Browser sendet. Zudem könne es helfen, ein Content Delivery Network (CDN) zu etablieren, damit die Requests je nach Nutzerstandort vom nächstgelegenen Server gesendet werden. Neben einem effizienten Caching sollten zudem Third-Party-Connections möglichst früh aufgebaut werden, damit diese im späteren Verlauf des Seitenaufbaus nicht zu einer (vermeidbaren) Verzögerung führen.
• JavaScript und CSS blockieren das Rendering: Bevor der Browser ein Content-Element wirklich rendern und damit für den Nutzer darstellen kann, muss das HTML-Markup in ein Document Object Model (DOM) geparst werden. Allerdings stoppt der HTML-Parser jedes Mal, wenn CSS-Stylesheets oder JavaScripte geladen werden müssen. Hier empfiehlt Google, CSS oder JavaScripte zu minifizieren, nicht-kritische Styles oder JS zu verschieben und kritisches CSS zu inlinen.
• Ressourcen laden zu langsam: Bilder, Videos oder Content-Blöcke können häufig zu Ladeverzögerungen führen. Deshalb empfiehlt Google, Bilder in wirklich passenden Größen anzubieten und etwa neuere Dateiformate mit höherer Kompression zu nutzen, wie JPEG 2000, JPEG XR oder WebP. Zudem empfiehlt sich, wichtige Ressourcen vorzuladen und HTML, CSS oder JavaScript mit Gzip zu komprimieren. Auch Adapting Serving könne zu Erfolgen führen; hierbei kann z. B. festgelegt werden, dass bei Verbindungsgeschwindigkeiten unterhalb von 4G für den Nutzer statt eines Videos nur ein kleines Bild geladen wird.
• Client-Side Rendering: Auch Client-Side Rendering, bei dem die Seiten mithilfe von JavaScript-Frameworks wie React oder Angular direkt im Browser gerendert werden, sei eine gute Möglichkeit, den Largest Contentful Paint schneller für den Nutzer darzustellen.
• Weitere Optimierungstipps: Google selbst gibt in diesem Blogpost zahlreiche Tipps, wie der Largest Contentful Paint verbessert werden kann.

First Input Delay (FID): Wann kann der Nutzer mit der Seite interagieren?

Mit dem First Input Delay wird die Zeitspanne gemessen, die zwischen der erstmaligen Interaktion des Nutzers mit der Seite und der Browser-Reaktion vergeht. Wer eine Website besucht, versucht häufig, schon auf ein Textfeld oder einen Button zu klicken, ohne bis zum vollständigen Laden der Website abzuwarten. Oft tut sich dann noch nicht so viel, weil der Browser damit beschäftigt ist, die Seite darzustellen. Die folgende Darstellung zeigt schematisch die verschiedenen Parameter und Kennzahlen, die beim Laden einer Website eine Rolle spielen:

Damit Nutzer nicht gleich die Seite wieder unruhig verlassen, weil keine Browser-Reaktion auf ihre Eingabe erfolgt, misst die FID-Kennzahl, wie viel Verzögerung zwischen der Nutzereingabe und der Antwort des Browsers herrscht. FID-Werte bis 100 Millisekunden sind laut Google ein guter Wert, alles zwischen 100 und 300 Millisekunden ist verbesserungswürdig – und alles ab 300 Millisekunden ein schlechter Wert. Alle Angaben zum First Input Delay findet ihr in der Google-Dokumentation zum First Input Delay.

Optimierung für den First Input Delay

• Aufspalten von Long Tasks: Damit sind Phasen gemeint, in denen JavaScripte ausgeführt werden und Nutzer eventuell nicht mit der Website interagieren können. Google spricht von Long Tasks immer dann, wenn ein Code-Schnipsel den Main Thread für mehr als 50 Millisekunden blockiert.
• Interaktionen priorisieren: Damit ist gemeint, dass Code-Elemente, die elementar für eine Interaktion des Nutzers mit der Website sind, priorisiert geladen werden.
• Web Worker nutzen: Ein sogenannter Web Worker ermöglicht es z. B. aufwändige JavaScripte in einem separaten Thread auszuführen, so dass der Main Thread nicht stoppt.
• JavaScript-Ausführungszeit reduzieren: Nach einer kritischen Bestandsaufnahme aller JavaScripte, die beim Laden der Seite ausgeführt werden, sollten diejenigen Skripte, die nicht essenziell sind, erst später ausgeführt werden.
• Weitere Optimierungstipps: Google selbst gibt in diesem Blogpost zahlreiche Tipps, wie der First Input Delay verbessert werden kann.

Cumulative Layout Shift (CLS): Ist die Website visuell stabil?

Der Cumulative Layout Shift (CLS) drückt die visuelle Stabilität einer Seite bei der Interaktion aus. Beim Laden einer Website passiert es häufiger, dass Layout-Verschiebungen stattfinden und Elemente etwa nach unten rutschen, weil etwas anderes weiter oben nachgeladen wurde. Wenn sich der Content beim Laden verschiebt und der Nutzer bereits mit der Seite interagiert, kann dies ungewünschte Folgen haben, wie das nachfolgende Google-Demovideo zeigen will:

 

 

Die Messgröße Cumulative Layout Shift gibt also an, ob und in welchem Ausmaß unerwartete Layout-Veränderungen erfolgen, während der Nutzer mit einer Website interagiert – zum Beispiel, wenn ein neues Seitenelement dargestellt wird und sich die Position eines Buttons plötzlich und ohne Scrolling verschiebt. Je niedriger der Wert ausfällt, desto besser. Die Berechnung des Cumulative Layout Shift im Rahmen der Core Web Vitals geht wie folgt:

Impact Fraction x Distance Fraction = Layout Shift Score

Impact Fraction gibt den Prozentbereich des Bildschirms an, der von einer Änderung betroffen ist; und die Distance Fraction beschreibt, wie hoch der prozentuale Anteil an der Viewport-Höhe an, um den das Element durch den Layout Shift nach unten geschoben wurde. Beide Angaben werden als Wert zwischen 0 und 1 ermittelt und anschließend multipliziert: Als Ergebnis steht dann ein Layout Shift Score zwischen 0 und 1.

Für Google ist alles bis 0.1 ein guter Wert und ab 0.25 schlecht; dazwischen besteht Verbesserungsbedarf. Alle Angaben zum Cumulative Layout Shift findet ihr in der Google-Dokumentation zum Cumulative Layout Shift.

Optimierung für den Cumulative Layout Shift

• Bilder- und Video-Elemente ohne Breiten- und Höhenangaben: Damit Nutzer keine Überraschungen erleben, sollten Bilder und Videos stets mit einer Breiten- und Höhenangabe versehen sein. Alternativ kann der benötigte Platz auch mit der Aspect Ratio via CSS definiert werden. Damit wird sichergestellt, dass der Browser den exakten Platz fürs Bild oder Video freihält, während das Bild geladen wird.
• Werbung ohne Breiten- und Höhenangaben: Ads sind laut Google einer der häufigsten Gründe für einen Layout Shift auf Webseiten, da Werbenetzwerke – auch Google Ads – häufig dynamische Anzeigen-Größen anbieten. Um dies zu vermeiden, sei ein Platzhalter-Element anzuraten, und zwar in der wahrscheinlichsten Dimensionierung für eine bestimmte Werbefläche auf Grundlage historischer Daten.
• Dynamisch eingebundener Content: Elemente wie etwa Newsletter- oder Special-Offer-Banner, Related-Content-Blöcke oder GDPR-Hinweise als Block im Haupt-Content der Seite kann zu Layout-Verschiebungen führen. Deshalb empfiehlt Google auch hier, ein Platzhalter-Element einzufügen, damit Nutzer keine Überraschung erleben, wenn das Element geladen ist und den Content verschieben kann.
• Web-Schriftarten: Wer Schriftarten aus dem Web einbindet, hat womöglich Probleme mit Layout-Verschiebungen – etwa, wenn die Fallback-Schriftart mit der eigentlichen Web-Font ausgetauscht wird. Empfohlen wird daher, die Fonts vorzuladen; zudem können die genutzten Fonts auch auf dem eigenen Server gespeichert werden.
• Weitere Optimierungstipps: Google selbst gibt in diesem Blogpost zahlreiche Tipps, wie ein Cumulative Layout Shift verringert bzw. verhindert werden kann.

Case Study: So hat Modemarkt Chloé die Core Web Vitals optimiert

Wie die Modemarke Cloé es geschafft hat, die Core Web Vitals für ihre Website in einen grünen Bereich zu optimieren, erfahrt ihr in der folgenden Case Study im Video. Dabei hat Chloé etwa den Largest Contentful Paint von 2,9 Sekunden auf 1,5 Sekunden reduzieren können, etwa durch Critical CSS oder die genaue Dimensionierung von Bildern. Im Video nimmt euch Google-Entwickler Addy Osmani auf eine Hands-On-Reise durch die Core Web Vitals:

Fazit: Wie sich Webmaster und SEOs auf die Core Web Vitals vorbereiten

Die Core Web Vitals sollen DIE neuen Kern-Metriken werden, wenn es um die Beurteilung der User Experience einer Seite geht. Das ist erfreulich, da etwa Pagespeed-Optimierungen in den vergangenen Jahren mit verschiedensten Kennzahlen verschiedenster Google- und Nicht-Google-Tools recht unübersichtlich wurden.

Zum Start vereinen die Core Web Vitals Metriken aus den Bereichen Ladezeit (Largest Contentful Paint), Interaktivität des Nutzers mit der Seite (First Input Delay) und visuelle Stabilität (Cumulative Layout Shift). Ob die von Google gewählten Kern-Metriken wirklich sinnvoll sind, die wird sich vermutlich auch erst im Laufe des Jahres 2021 zeigen, wenn mehr Websites aus unterschiedlichen Branchen optimiert sind.

Weil keine anderen Ladezeit- und Performance-Metriken für das Google-Ranking eine Rolle spielen sollen, haben Webmaster, Developer und SEOs für die verbleibenden Monate genaue To-Dos: Optimierung der Website für die drei Kern-Metriken. Google hat dabei eine wirklich ausführliche Dokumentation für den LCP, FID und den CLS vorgelegt. Hier haben sich die Google-Entwickler richtig ins Zeug gelegt, um für klar nachvollziehbar zu machen, wie die Bewertung der einzelnen Kriterien entsteht und wie Webseiten optimiert werden können.

Wer es noch nicht getan hat, sollte via Search Console die eigenen Web-Projekte ausführlich auf die Ergebnisse hinsichtlich der Core Web Vitals überprüfen. Bei der Mehrzahl der Websites dürfte es Handlungsbedarf geben:

• Im Allgemeinen dürfte der Largest Contentful Paint für die meisten Websites wohl am schwierigsten zu optimieren sein, da hierfür an verschiedensten Bereiche der Website angesetzt werden muss.
• Bei der Optimierung des First Input Delays stehen vor allem die JavaScripte im Mittelpunkt. Websites, die komplett auf JavaScript setzen – etwa im Bereich Beauty & Apparel – dürften an dieser Metrik zu knabbern haben.
• Der Cumulative Layout Shift dürfte vor allem für Publisher eine Herausforderung werden, da diese vielfach auf automatisierte Lösungen für die Einbindung von Ads setzen. Diese Ads werden häufig erst später ausgeliefert als der Seiten-Content, weil im Hintergrund noch Bidding-Prozesse ablaufen, und können dann das Layout verschieben.

Google hat uns mit der ausführlichen Dokumentation und den Optimierungstipps für die Core Web Vitals sowie Analyse-Tools wie der Übersicht in der Search Console sowie Detail-Analysen via Google Lighthouse ausreichend Werkzeuge an die Hand gegeben, damit die verbleibende Zeit bis zum Launch des neuen Ranking-Faktors Page Experience produktiv genutzt werden kann – sonst drohen ab Juni  2021 empfindliche Ranking-Verluste für Low Performer.

Ihr wollt noch mehr über die Core Web Vitals erfahren? Wir haben eine ausführliche Analyse durchgeführt in unserer Google Core Web Vitals Studie: April 2021.

Studie herunterladen

*Der urprüngliche Rollout-Termin war für Mai 2021 geplant, doch Google verschob den Termin auf Juni 2021.