Core Web Vitals: Ein umfassender Ratgeber

Google hat die Page Experience Ranking-Faktoren um zusätzliche KPIs für Benutzerfreundlichkeit ergänzt.

Was sind die Core Web Vitals?

Die Core Web Vitals sind von Google definierte Kennzahlen, die die Benutzerfreundlichkeit einer Webpage messen sollen. Sie sind Teil des Page Experience Updates, dessen Rollout ursprünglich für den Mai 2021 geplant war, dann jedoch auf Mitte Juni 2021 verschoben wurde. Erst Ende August 2021 sollen die Core Web Vitals vollständig von den Ranking-Systemen beachtet werden.

Für viele Website-Betreiber und Kunden unserer SEO-Agentur sind die Core Web Vitals Anlass, die Benutzerfreundlichkeit ihrer Websites zu verbessern. Schließlich können schnelle und benutzerfreundliche Webpages an Sichtbarkeit gegenüber langsameren Webpages gewinnen. Die ursprünglichen Pläne von Google, Webpages mit einer guten Page Experience zusätzlich durch ein Badge in der Suchtrefferliste hervorzuheben, wurden hingegen höchstwahrscheinlich verworfen – so vermutet Googles John Müller auf Twitter.

(Was ist der Unterschied zwischen Websites und Pages?)

Die Core Web Vitals heißen LCP, FID und CLS und werden im Nachfolgenden näher definiert.

1. Largest Contentful Paint (LCP): Ein KPI für die Ladezeit

Der LCP misst, wie lange es dauert, bis das größte Element im sichtbaren Bereich der Webpage geladen hat. So wird die empfundene Ladezeit bewertet.

Klassifizierung von Google:

• Gut: schneller als 2,5 Sekunden
• Verbesserungswürdig: zwischen 2,5 und 4,0 Sekunden
• Schlecht: langsamer als 4,0 Sekunden

2. First Input Delay (FID): Ein KPI für die Interaktivität

Der FID misst, wie lange es dauert, bis der Browser reagiert, nachdem der Nutzer zum ersten Mal mit der Page interagiert hat. Interaktionen sind z. B. Link-Klicks, Button-Klicks, Scrollen oder Formulareingaben. Insofern ist dieser Core Web Vitals KPI ein Maß für die empfundene Reaktionsträgheit.

Klassifizierung von Google:

• Gut: schneller als 100 Millisekunden
• Verbesserungswürdig: zwischen 100 und 300 Millisekunden
• Schlecht: langsamer als 300 Millisekunden

3. Cumulative Layout Shift (CLS): Ein KPI für die visuelle Stabilität

Häufig verschieben sich Layout-Elemente während des Ladevorgangs einer Page. Das kann den Nutzer frustrieren, etwa weil er sich dadurch „verklickt“ oder sein Lesefluss unterbrochen wird.

Der CLS fragt zweierlei für jedes Element, das sich verschiebt:

1. Wie groß ist die betroffene Fläche?
2. Wie weit verschiebt sich das Element?

Die Ergebnisse werden für jedes Element quantifiziert und anschließend addiert (daher „cumulative“). Daraus entsteht ein CLS-Score von 0 (am stabilsten) bis 1 (am instabilsten). Damit wird die empfundene Instabilität gemessen.

Klassifizierung von Google:

• Gut: niedriger als 0,1
• Verbesserungswürdig: zwischen 0,1 und 0,25
• Schlecht: mehr als 0,25

Wie kann ich die Core Web Vitals messen?

Mit diesen Tools können Sie die Core Web Vitals messen:

• PageSpeed Insights (PSI)
• Chrome User Experience Report (CrUX)
• Google Search Console (GSC)
• Chrome DevTools
• Lighthouse, auch via web.dev/measure/
• Web Vitals (Browser-Extension für Chrome)

	LCP	FID	CLS
PageSpeed Insights	✓	✓	✓
Chrome UX Report	✓	✓	✓
Search Console	✓	✓	✓
Chrome DevTools	✓	TBT	✓
Lighthouse	✓	TBT	✓
Web Vitals Extension	✓	✓	✓

FID kann nur aus Felddaten ermittelt werden. Weil Chrome DevTools und Lighthouse mit Labordaten in einer simulierten Umgebung arbeiten, gibt es dort TBT als Ersatz für FID. TBT steht für „Total Blocking Time“. Die Grundidee:

• Der Browser kann keine Tasks unterbrechen. Wenn es User Input während eines Tasks im Main Thread gibt, muss der Task zuerst abgeschlossen werden, bis der Browser antworten kann. Der Main Thread ist sozusagen „blockiert“.
• Tasks, die länger als 50ms dauern, werden als langsame Tasks definiert. Während dieser Tasks fühlt sich die Page reaktionsträge für den Nutzer an.
• Für jeden Task im Main Thread wird geprüft, um wie viele Millisekunden 50ms überschritten werden. Diese Zeiten, in denen Tasks blockiert sind, werden addiert und ergeben TBT.

Felddaten vs. Labordaten

Zur Interpretation der Messwerte für die Core Web Vitals ist es wichtig, den Unterschied zwischen Felddaten und Labordaten zu verstehen.

Entnehmen Sie dieser Tabelle, welche Tools mit Felddaten bzw. Labordaten arbeiten. In den PageSpeed Insights ist die Art der Daten jeweils separat gekennzeichnet.

	Felddaten	Labordaten
PageSpeed Insights	✓	✓
Chrome UX Report	✓
Search Console	✓
Chrome DevTools		✓
Lighthouse		✓
Web Vitals Extension	✓

Felddaten

Felddaten für die Core Web Vitals sind anonymisierte Daten von realen Google Chrome Nutzern. Da Endgeräte, Netzwerkbedingungen und Nutzerverhalten jedes Mal unterschiedlich sind, reflektieren sie eine große Bandbreite von Nutzererfahrungen.

Wichtig: Es handelt sich um historische Daten. Wenn Sie etwas an der Benutzerfreundlichkeit Ihrer Webpage verändern und die Core Web Vitals direkt im Anschluss erneut prüfen möchten, sind Felddaten dafür ungeeignet. Konsultieren Sie stattdessen Ihre Labordaten.

Labordaten

Labordaten für die Core Web Vitals stammen aus einer simulierten Umgebung und sind essenziell für die Entwicklung Ihrer Webpage in Echtzeit, aber sie können die Präzision und Vielseitigkeit von Felddaten nicht ersetzen.

Wichtig: Stützen Sie Ihre Benutzerfreundlichkeits-Optimierungen nicht nur auf Labordaten. Aufgrund der Art der Messung können Ihnen systematische Probleme entgehen, die ausschließlich mit Felddaten feststellbar sind.

Wie interpretiere ich die Ergebnisse?

• Gesamthaft: Betrachten Sie LCP, FID und CLS mit ihren farbcodierten Ergebnissen gemeinsam. Z. B. ist es nicht zielführend, einen extrem kurzen FID, aber einen extrem langsamen LCP zu haben. Um mit Blick auf Page Experience gut abzuschneiden, müssen Sie in allen Bereichen ähnlich gut aufgestellt sein. Identifizieren Sie Optimierungsmaßnahmen mit dem höchsten Return on Investment für Ihre Webpages und priorisieren Sie diese.
• Page für Page: Wie der Name „Page Experience“ schon sagt, beziehen sich die Feld- und Labordaten für die Core Web Vitals auf die Benutzerfreundlichkeit der getesteten Webpage, nicht auf die Ihrer gesamten Website. Weil jede Page Ihrer Website andere Inhalte hat, kann man von einer einzelnen Page nur eingeschränkt auf den Rest der Website schließen (Unterschied: Websites vs. Webpage). Seien Sie sich auch im Klaren darüber, welche Core Web Vitals Sie prüfen: für Desktop, für Mobile oder beide.
• Im Wettbewerbsvergleich: Vergleichen Sie Ihre Page mit jenen Pages von Wettbewerbern, die für ähnliche Keywords ranken. Wenn die Pages hinsichtlich Erfüllung der Suchintention und Content-Qualität ähnlich gut sind, können Benutzerfreundlichkeit und Core Web Vitals den ausschlaggebenden Unterschied machen.
• Im Kontext mit anderen Ranking-Faktoren: Die vorherrschende Meinung unter SEOs: Die Page Experience mit den Core Web Vitals sei einer von vielen Ranking-Faktoren. Fest stehe, dass die Erfüllung der Suchintention und die Content Qualität deutlich wichtiger für das Ranking seien. Darüber hinaus seien Nutzer geneigt, eine durchwachsene Usability zu vergeben, wenn sie das Gefühl hätten, auf der Website einer starken Marke zu navigieren.
• Mit Bounce Rates und Conversion Rate: Dennoch sind mit Benutzerfreundlichkeit und Geschwindigkeit dermaßen wichtige Vorteile jenseits von Google-Rankings verbunden, dass man sie nicht ignorieren kann. Eine gute Page Experience macht sich in niedrigeren Bounce Rates, gesteigerten Page Views per Session und verbesserten Conversion Rates bemerkbar – und zwar drastisch.

Wie verbessere ich meine Core Web Vitals?

Für LCP optimieren (Auswahl)

• Content Delivery Network (CDN): CDNs sind eine Ergänzung zu gewöhnlichem Webhosting. Die „Edge Server“ eines CDNs speichern den statischen Content einer Website auf verschiedenen global verteilten Servern. Wenn ein Nutzer die Website aufruft, liefert der geografisch am nächsten gelegene Server den Content. Sie können CDNs nutzen, um die Ladezeit Ihrer Website zu beschleunigen.
• rel=‘preconnect‘: Mit dem preconnect-Attribut kann der Ladevorgang wichtiger Ressourcen beschleunigt werden, einschließlich des LCP-Elements.
  Wenn z. B. ein CSS-Stylesheet vorsieht, eine Schriftart zu laden, müssen nach Abschluss des Ladevorgangs für die CSS-Datei normalerweise zunächst die DNS-, TCP- und TLS-Verbindungen zum Ursprung der Schriftart hergestellt werden, und erst danach kann die Schriftart selbst geladen werden.
  Mit preconnect können die DNS-, TCP- und TLS-Verbindungen für die Schriftart parallel zum Ladevorgang der CSS-Datei aufgebaut werden, sodass nach Abschluss des Ladevorgangs der CSS-Datei nur noch die Font-Datei selbst geladen werden muss.

• Statische Inhalte cachen: Inhalte, die bereits im Browsercache des Nutzers zwischengespeichert sind, müssen nicht erneut heruntergeladen werden, wenn der Nutzer sie nochmals ansteuert. Was gecached werden sollte und was nicht, hängt davon ab, mit welcher Regelmäßigkeit sich die Inhalte verändern. Z. B. einen Live-Ticker sollte man nicht für ein Jahr lang cashen, ein Stylesheet möglicherweise schon.
  Jede Website muss für sich betrachtet werden; es gibt keine allgemeingültigen Caching-Policies, die für jede Website gleichermaßen effizient sind. Das Thema Caching birgt meistens Verbesserungspotenzial, weil der Urzustand vieler Websites dahingehend ineffizient ist.
• Dateigrößen reduzieren: Durch Text- und Bildkomprimierung, das Einsparen von ungenutztem CSS oder JavaScript oder die Bereitstellung von Inhalten in modernen Dateiformaten können Dateigrößen des LCP-Elements reduziert werden. Manchmal können scheinbar unwichtige Dinge wie die Löschung von ungenutzten Emojis aus Schriftarten einen entscheidenden Unterschied für die Core Web Vitals machen.

Für FID optimieren (Auswahl)

• Skripte von Drittanbietern reduzieren: Drittanbieter-Skripte verlangsamen Ihre Webpage. Dazu zählen leider auch Google Analytics, Google Adsense oder essenzielle Skripte für E-Commerce. Es ist nicht immer realistisch, auf wichtige Skripte zu verzichten oder ein Laden on demand umzusetzen. Trotzdem sollte die bestmögliche Lösung implementiert werden. Wenn Sie sich mit der Reduktion von Skripten schwertun, geht es ähnlich aufgestellten Wettbewerbern vermutlich genauso wie Ihnen und selbst kleine Verbesserungen sind ein Gewinn.
• Tasks im Main Thread verkürzen: Wie oben im Abschnitt zu TBT beschrieben, werden Webpages mit Tasks im Main Thread, die über 50ms dauern, als reaktionsträge empfunden. Es empfiehlt sich, nicht-essenzielle Tasks herauszukürzen oder lange Tasks in mehrere kurze Tasks aufzuteilen.

Für CLS optimieren (Auswahl)

• Dimensionen von Bildern oder eingebetteten Elementen definieren: Mit den CSS-Attributen height und width können Sie die Höhe und Breite von Inhalten festlegen. Dadurch werden sie in einen vordefinierten Platz geladen, anstatt CLS auszulösen.
• Werbeanzeigen einen statischen Platz zuweisen: Wenn Sie auf Ihrer Website Werbeflächen vermieten, empfiehlt es sich, auch den Werbeanzeigen einen statischen Platz zuzuweisen. Wenn es dort vorübergehend keine Werbeanzeigen gibt, wird diese Fläche leer gehalten. So oder so wird CLS vermieden.
• Keinen Content dynamisch über existierendem Content hinzufügen: Banner, Formulare und Content Recommendation Module („Das könnte Sie auch interessieren“) sind häufige Stellvertreter für diesen Case. Definieren Sie die erforderliche Fläche vorab, damit kein CLS stattfindet.

Core Web Vitals als Ranking-Faktor (oder: Page Experience Optimierung)

Die Core Web Vitals sind kein Ranking-Faktor für sich allein, sondern werden mit anderen, bereits bekannten Faktoren für Benutzerfreundlichkeit kombiniert. Gemeinsam bilden Sie das Page Experience Ranking-Kriterium.

Mobile Friendliness

• Mobile-Friendly Test: Überprüfen Sie Ihre Website mit dem Mobile-Friendly Test von Google und setzen Sie ggf. angegebene Handlungsempfehlungen um.
• Nutzen Sie ein responsives Webdesign: Responsive Webdesigns passen Ihre Website der Bildschirmgröße des Endgerätes an, auf welchem sie geladen werden.
• Inhalte mobil optimieren: Gewährleisten Sie, dass die Schriftgrößen und -arten auf kleinen Endgeräten gut lesbar, interaktive (Schalt-)Flächen leicht zugänglich und Bilder klar erkennbar sind. Stellen Sie vertonte Videos mit Untertiteln bereit. Schaffen Sie einen Prozess, der die Prüfung neuer Inhalte auf mobilen Screens vor deren Live-Schaltung berücksichtigt.

Safe Browsing

• GSC Sicherheitsprobleme: Öffnen Sie den Report “Sicherheitsprobleme“ im Reiter „Sicherheit & Manuelle Maßnahmen“ in der Google Search Console. Dort erscheint ggf. eine Warnung, wenn Ihre Website gehackten Content aufweist.
• Google Safe Browsing API: Prüfen Sie, ob Google Malware auf Ihrer Domain gefunden hat. Dazu können Sie die kostenpflichtige Software urlprofiler mit der Google Safe Browsing API verknüpfen.

HTTPS

• SSL / TLS-Zertifikat: Bestellen Sie ein SSL / TLS-Zertifikat bei Ihrem Provider und installieren Sie es. Notieren Sie sich das Ablaufdatum und tauschen Sie das Zertifikat durch ein neues aus, bevor es abläuft.
• 301-Redirects: Stellen Sie sicher, dass die URL-Formen Ihrer Website mit „http“ auf eine URL-Form mit „https“ weiterleiten. Diese Einstellungen kann Ihr Entwickler in der .htaccess-Serverkonfiguration anpassen.
• robots.txt: Die „robots.txt“-Datei darf die https-Form Ihrer Website nicht blockieren. Auch als Nicht-Entwickler können Sie Ihre robots.txt ganz einfach ansehen, indem Sie domain.com/robots.txt in Ihrem Browser öffnen.
• Extern eingebettete Inhalte: Wenn Sie Inhalte von externen Domains einbetten, die nicht mit einem SSL / TLS-Zertifikat geschützt sind, ist der Datenverkehr des Nutzers nicht vollständig abgesichert. Ein vollständiger Crawl Ihrer Website kann solche Inhalte identifizieren.

Keine intrusiven Interstitial Ads

• Interstitials visuell untersuchen: Prüfen Sie, wie viel Fläche die Interstitials einnehmen, ob diese rechtlich (z. B. Cookie Banner) oder redaktionell (Filter, Content-Individualisierung) erforderlich sind, oder ob es sich um Werbung handelt. Versetzen Sie sich in die Situation des Nutzers und hinterfragen sie, ob nicht zwingend notwendige Interstitials ablenken, behindern oder negative Assoziationen mit Ihrem Unternehmen oder Ihrer Marke wecken.
• ScreamingFrog JS Rendering: Um eine Website systematisch nach Interstitials abzusuchen, können Sie die ScreamingFrog SEO Spider nutzen und im „JS Rendering“-Modus gezielt danach filtern.

Fazit: Wie sind Core Web Vitals und Page Experience insgesamt zu beurteilen?

Mit den Core Web Vitals misst Google der Benutzerfreundlichkeit von Webpages mehr Bedeutung zu und es sind neue KPIs hinzugekommen.

Der Fokus der SEO liegt immer noch auf der Erfüllung der Suchintention und der Bereitstellung hochwertigen Contents, aber die Core Web Vitals können jetzt zu mehr Sichtbarkeit beitragen.

Darüber hinaus macht sich die Benutzerfreundlichkeit auf Bounce Rate, Page Views pro Session und Conversion Rate bemerkbar.

Deswegen sollte jedes Unternehmen, das seinen Online-Auftritt strategisch angeht, seinen Status quo hinsichtlich Page Experience kennen und eine Strategie zur kontinuierlichen Optimierung entwickeln und umsetzen.

SEO-Agentur gesucht?

Gern machen wir Ihr Unternehmen mit einem Core Web Vitals Audit und einer Page Experience Strategie gegenwarts- und zukunftsfähig. Kontaktieren Sie uns!

Quellenangabe:
Teile dieses Artikels basieren auf unserer Notiz aus der Präsentation „The Future of Speed and Performance: Your Core Web Vitals Strategy“ von Alexis Sanders und Rachel Costello auf dem SEJ eSummit 2021.