Google Core Web Vitals – Verstehen und Optimieren

Core Web Vitals Titelbild
Zuletzt aktualisiert:

Die Core Web Vitals sind von Google festgelegte Qualit├Ątssignale zur Bewertung der User Experience. Stand heute sind dies (1) Largest Contentful Paint (LCP), (2) First Input Delay (FID) und (3) Cumulated Layout Shift (CLS). Durch das von Google angek├╝ndigten und in 2021 durchgef├╝hrten „Page Experience Update“ sind sie ein hei├č diskutiertes Thema bei Suchmaschinen-Optimierern und Website-Betreibern. Erfahre in diesem Beitrag, was f├╝r Website Betreiber und Webmaster wichtig ist.

Zun├Ąchst wurden sie von SEOs noch ignoriert, da sich zu Beginn keine gro├čen Effekte messen lie├čen. Eine Untersuchung von Sistrix hat jedoch gezeigt, dass es Ende 2021 zu messbaren Effekten gekommen ist und die Core Web Vitals nun definitiv ein Ranking Faktor sind. So ranken Seiten, die mindestens eine der Metriken verfehlen im Schnitt um ganze 3,7% schlechter!

Googles John M├╝ller hatte skeptische SEOs schon vorher auf die Bedeutung der Core Web Vitals hingewiesen und betont, dass diese Messwerte ├╝ber das Ranking hinaus noch Wirkungen haben, weil schnelle Seiten mehr Geld verdienen. Sehr interessant in diesem Zusammenhang ist diese Sammlung von Fallstudien.

Das auch immer mehr Website Betreiber dieser Ansicht sind, merke ich zur Zeit an einer steigenden Anzahl an Anfragen zur Page Speed Optimierung.

Wie gehst du als Website Betreiber aber nun am besten damit um? Antwort: Erstmal pr├╝fen, wie deine Seite da steht. Vielleicht ist sie ja schon super schnell und du hast bereits einen Wettbewerbsvorteil. Das w├Ąre fast etwas schade, denn bei sauber programmierten Seiten ist eine Optimierung oft recht schnell gemacht.

Messung der Core Web Vitals: „Labordaten“ vs. echte User-Daten

Wie kannst du nun herausfinden, wie deine Website bez├╝glich der Core Web Vitals performt? Zun├Ąchst sind zwei verschiedene Dinge zu unterscheiden:

  1. Labordaten, welche i.d.R. mit dem Tool Lighthouse gemessen werden
  2. Felddaten, die Google ├╝ber das Datensammeln von Usern des Google Browsers Chrome generiert.

Dabei ist es wichtig zu wissen, dass Google keine Labordaten sondern ausschlie├člich Felddaten verwendet! Die Messung der Labordaten ist jedoch im Optimierungsprozess sehr wichtig. Dazu sp├Ąter mehr.

Labordaten

Labordaten werden die Ergebnisse einzelner genormter Messungen genannt. Dabei kommt das Open Source Tool Lighthouse zum Einsatz. Es wird eine Anfrage mit einem simulierten Mobilger├Ąt (zur Zeit Motorola G4) und einer auf einen Normwert gedrosselten Internetverbindung erzeugt und dann die Reaktion der Website aufgezeichnet.

Auf der Seite des anfragenden Ger├Ątes ist durch die Simulation immer gleicher Zust├Ąnde eine hohe Vergleichbarkeit gegeben. Allerdings sind die Ergebnisse immer nur eine Momentaufnahme und sie h├Ąngen davon ab, was gerade sonst noch auf deinem Server los ist.

Wenn es dort gerade eine Vielzahl von parallelen Anfragen anderer Nutzer gibt, ist das Ergebnis schlechter als wenn dort nur eine einzelne Anfrage bearbeitet werden muss.

Damit soll aber nicht gesagt werden, dass die Serverauslastung der entscheidende Faktor f├╝r gute Messwerte ist. Eine Optimierung des Codes der Website ist ein deutlich gr├Â├čerer Hebel.

Ein weiterer Faktor ist jedoch die Internetgeschwindigkeit. Die Erfahrung zeigt, dass allen Vorurteilen zum Trotz das Internet in Deutschland im Schnitt doch nicht so langsam scheint und die meisten echten Website Besucher (siehe unten) scheinen deutlich mehr Bandbreite zu haben als Google mit Lighthouse simuliert.

Das f├╝hrt dazu das auch Websites welche eher schlechte Labordaten liefern den Core Web Vitals Test bestehen k├Ânnen.

Echte Userdaten

Echte Userdaten basieren auf Daten die Google von Usern seines Chrome Browsers anonym (angeblich…) aufzeichnet. Sie werden an verschiedenen Stellen deines Google Profils angezeigt. Z.B. in der Search Console, Google Analytics und im PageSpeed Insights Tool.

Ein Problem liegt darin, dass dort ├╝berhaupt nur f├╝r URLs echte Userdaten angezeigt werden, die sehr viel Traffic bekommen. Wieviel, das h├Ąngt auch davon ab, wie hoch der Anteil der Chrome User an den Besuchern ist und die „durchschnittliche“ Technologieauswahl schwankt zwischen verschiedenen Nutzergruppen erfahrungsgem├Ą├č stark.

Aus meinen Erfahrungen w├╝rde ich von ca. 1000 monatlichen Besuchern auf der JEWEILIGEN URL ausgehen die notwendig sind, damit Google f├╝r die Core Web Vitals echte Nutzerdaten anzeigt.

Diese echten Nutzerdaten sind das worauf wir schauen sollten! Viele Website Betreiber, die die Google Page Speed Insights nutzen, konzentrieren sich auf Werte, die nicht entscheidend sind.

Das heisst: Wenn dir in den Page Speed insights, Search Console oder Google Analytics angezeigt wird, dass alles in Ordnung ist, sind aus reiner SEO Sicht keine Ma├čnahmen erforderlich. Wenn du deine UX Standards h├Âher setzen willst darfst du das nat├╝rlich.

Nutzerfreundlichkeit in der Search Console

In der Search Console werden dir echte Daten von Chrome Usern gesammelt. Im Men├╝punkt Nutzerfreundlichkeit findest du dort den Unterpunkt Core Web Vitals. Findest du dort nur gute URLs, ist alles in Ordnung. Doch schon die gelb dargestellten „zu optimierenden URLs“ k├Ânnen zu Abwertungen f├╝hren. Hier solltest du untersuchen, welche URLs betroffen sind und Optimierungsma├čnahmen (siehe unten) einleiten.

Google Core Web Vitals Messung in der Search Console
Bild: Hier ist alles in Ordnung – aus SEO Sicht sind keine Optimierungen erforderlich

Messung mit den Google PageSpeed Insights

F├╝r viele sind die PageSpeed Insights von Google die erste Anlaufstelle f├╝r eine Analyse. Tats├Ąchlich bekommst du dort Labor- und Felddaten, also eigentlich alles, was man braucht. Meine pers├Ânliche Erfahrung mit Kunden, die eine Pages Speed Optimierung anfragen zeigt jedoch, dass die meisten nicht verstehen, was hier genau los ist.

Viele kommerzielle B to B Seiten erreichen n├Ąmlich die oben genannte Zugriffszahl nicht und es werden keine echten Userdaten angezeigt. Als n├Ąchstes springt daher der fettgedruckte, mit eine bunten Kreis hervorgehobene Page Speed Index ins Auge.

Page Speed Index Screenshot
Bild: Ein Hingucker – die Zahl des Page Speed Indexes springt den meisten ins Auge

Dieser Wert ist ein Laborwert! Er wurde durch eine Anfrage ermittelt, die gestartet wurde, als du den „Analysieren“ Button gedr├╝ckt hast. Es ist also zun├Ąchst einmal eine Momentaufnahme. Au├čerdem ist das Scoring in diesem Wert f├╝r sich genommen nicht der entscheidende Faktor. Wichtig in Bezug auf Rankings ist, dass die echten Userdaten f├╝r alle 3 Core Web Vitals (CLS, LCP & FID) gute Werte zeigen. Studien zeigen, dass schon schlechte Werte bei einer Kennzahl das Ranking negativ beeinflussen.

Der Zahlenwert des Page Speed Index ist eine Aggregation aus verschiedenen Kennzahlen und es ist durchaus m├Âglich, dass hier ein hoher Wert angezeigt wird, obwohl deine Seite in einer der Metriken durchf├Ąllt. Das ist so weil es sich eben um einen Momentane Messwert handelt und die einzelnen Metriken nur ein Teil des Gesamtwertes ausmachen. Andersrum ist es auch keine Seltenheit, dass Google f├╝r Seiten, die einen miserablen Page Speed Index haben anzeigt, dass alle Core Web Vitals bestanden sind.

Wirklich n├╝tzlich sind in den Page Speed Insights die Empfehlungen die Google zur Verbesserung liefert! Diese beruhen nat├╝rlich auf einer Momentaufnahme, aber vieles wird an der Beschaffenheit deiner Website liegen und dauerhaft negative Auswirkungen haben. Die Optimierungsvorschl├Ąge lassen sich nach den verschiedenen Metriken filtern, je nachdem was du gerade optimieren willst. Mehr dazu im n├Ąchsten Abschnitt.

Optimierung der Core Web Vitals

Wer sich als Nicht-Entwickler schonmal die Empfehlungen des PageSpeed Insight Tools bei einer schlecht optimierten Seite angesehen hat, den hat wahrscheinlich eine Mischung aus Panik und Ratlosigkeit ├╝berkommen. Die Verbesserungsvorschl├Ąge sind teilweise sehr komplex und vieles l├Ąsst sich nicht l├Âsen ohne den Code der Website anzupassen.

Eine gut programmierte WordPress Website l├Ąsst sich aber durch die richtigen Schritte auch von Laien auf Turbo schalten. Wenn man das Beispiel WordPress betrachtet gibt es jedoch einige Feinde guter Lade-Performance:

  • Page Builder wie Elementor und Co.
  • Einsatz vieler Plug-Ins
  • ‚Premium“ Themes die mit Funktionen ├╝berfrachtet sind um m├Âglichst flexibel zu sein

Doch auch in solchen F├Ąllen ist es oft m├Âglich zumindest eine Verbesserung der Core Web Vitals zu erreichen. Dazu ist es auch nicht notwendig jeden einzelnen Vorschlag den Google (bzw. Lighthouse) in den Page Speed Insights gibt zu verstehen oder gar umzusetzen. Zumal es zwischen den Ma├čnahmen h├Ąufig Trade Offs gibt. D.h. eine Ma├čnahme die eine Metric verbessert kann eventuell negativ auf eine andere Metrik wirken.

Es macht daher Sinn einen Blick auf die h├Ąufigsten Ursachen langsamer Seiten zu schauen, f├╝r die es relativ einfache L├Âsungen gibt (leider nur relativ – nicht v├Âllig einfach). Es ist bereits ein eigener Optimierungsbeitrag in Arbeit, daher werde ich dich hier nur in eine grobe Richtung stupsen. Wenn du bis dahin Fragen hast, nimm gerne Kontakt auf!

1. Bilder optimieren

Bilder machen h├Ąufig einen Gro├čteil der Datenmenge einer Website aus. Umso wichtiger ist es sie optimal auszuliefern. Wichtig ist, dass sie nicht unn├Âtig gro├č sind und f├╝r das Web nach deinen Bed├╝rfnissen komprimiert sind. Zum komprimieren kannst du z.B. den Service von Tinypng nutzen.

Au├čerdem solltest du auf die richtigen Formate achten: Bilder als JPG oder WebP, Grafiken ohne Farbverl├Ąufe als png, gif am besten niemals und Vektorgrafiken als SVG.

Wichtig ist auch Lazyloading und dabei, dass du wirklich nur Bilder lazy l├Ądts, die nicht sichtbar sind. Durch falsches Lazy Loading hat sich schon manch einer den Largest Contentful Paint Wert versaut.

2. Laden von JavaScript und CSS

Hier geht es eigentlich tief in Entwickler-Gebiet. F├╝r WordPress User gibt es jedoch das fantastische Plugin Autoptimize. Hier erkl├Ąre ich es: Autoptimize einbinden.

3. Fonts/ Schriftarten

Fonts sind eine absolute Bremse und es sollte keine einzige Schriftart oder auch nur Schriftst├Ąrke eingebunden werden. Ausgerechnet die Einbindung von Google Fonts ├╝ber das Google CDN ist keine optimale L├Âsung. Finde heraus, welche Schriftarten du unbedingt brauchst und binde diese ├╝ber deinen eigenen Webspace ein (Google nach „webfonts selbst hosten“ – eine Erkl├Ąrung gibt es hier im ratgeber demn├Ąchst auch noch, dauert aber noch).

Wichtig ist, dass du so wenig Varianten der Schriftarten l├Ądts, wie eben m├Âglich. F├╝r fette und kursive fonts kannst du eventuell die Browser generierten bold und italic Varianten „faux bold“ und „faux italic“ verwenden oder direkt eine variable Schriftart.

In diesem Beitrag findest du so ziemlich alles, was du ├╝ber die Fonts Optimierung wissen musst. Leider erf├Ąhrst du auch, dass viele Ma├čnahmen Vor- und Nachteile haben.

4. Caching (Server)

Je nachdem was f├╝r eine Technologie du verwendest (z.B. WordPress), ist Caching in den meisten F├Ąllen absolut Pflicht und ohne eine gute Performance unm├Âglich. Beim Server Caching werden auszuliefernde Inhalte als „fertig“ HTML Seiten vorgehalten, die dem Browser sofort geschickt werden k├Ânnen. Bei WordPress l├Ąsst sich das z.B. durch ein kostenloses Plugin wie WP Fastest Cache realisieren. Einige Premium WordPress Hoster wie Kinsta Cachen deine Seite auch schon von sich aus.

Dies ist nicht mit dem Browser Cache zu verwechseln, der sich auf deine Ger├Ąt befindet. Lighthouse erw├Ąhnt hier manchmal „effiziente Caching Richtlinien“. F├╝r diese zu sorgen ist Aufgabe von Entwicklern.

Eingebundene YouTube Videos und Core Web Vitals

Kommen wir zu einem etwas leidigen Thema: YouTube Videos und Core Web Vitals. Betrachten wir zwei Fakten:

  1. YouTube Videos rei├čen die Metriken der Core Web Vitals in den Abgrund.
  2. Durch das Einbinden von YouTube Videos kannst du mit deiner eigenen URL, auf der das Video eingebunden ist in der Google Video-Suche ranken (ein SEO Traum)

Nicht lange um den hei├čen Brei geredet: Es gibt eine Methode um (1) zu verhindern, n├Ąmlich indem das Video per JavaScript nachgeladen wird und zun├Ąchst nur ein Platzhalter geladen wird.

ABER sollten wir das tun? NUR MIT VORSICHT! Denn Google indiziert kein JavaScript, dass erst durch User Interaktion nachgeladen wird. D.h. Stand heute f├╝hren alle Workarounds die du irgendwo im Netz findest dazu, dass deine URL nicht mehr in der Video Suche auftaucht. Googles John M├╝ller hat diese Problematik einger├Ąumt.

Handelt es sich um Videos, bei denen es eher unwahrscheinlich ist, dass sie zum Ranking deiner URL f├╝hren, kann die getrost gemacht werden. Produzierst du aber extra aus SEO Gr├╝nden Videos, musst du der Verfall der Core Web Vitals wohl oder ├╝bel hinnehmen.

Umso wichtiger ist, dass der Rest der Seite gut performt. Bindest du ein YouTube Video auf eine ohnehin schon langsame Seite ein, ergibt sich sonst ein Desaster.

H├Ąufig gestellte Fragen zu den Core Web Vitals

Was sind die Google Core Web Vitals?

Die Core Web Vitals sind Metriken, die Google zur Beurteilung der User Experience von Websites festgelegt hat. Zur Zeit sind dies (1) Largest Contentful Paint (LCP), (2) First Input Delay (FID) und (3) Cumulated Layout Shift (CLS).

Wie kann man die Core Web Vitals messen?

Die Core Web Vitals lassen sich Online mit dem PageSpeed Insights Tool von Google messen. Au├čerdem werden dir die Daten in der Google Search Console angezeigt. Wichtig ist es, den Unterschied zwischen den „echten Nutzerdaten“ und der punktuellen Messung, welche die PageSpeed Insights durchf├╝hren, zu verstehen. Dieser wird in diesem Beitrag erkl├Ąrt.

Sind die Google Core Web Vitals ein Rankingfaktor?

Mittlerweile ist die Antwort ein klares Ja! John M├╝ller von Google hat das immer wieder betont und mittlerweile zeigen auch Untersuchungen einen klaren Einfluss!

Wie kann man die Core Web Vitals optimieren?

Es gibt zur Zeit 3 Metriken die zu den Core Web Vitals geh├Âren. Jede muss f├╝r sich optimiert werden, viele der einzelnen Optimierungsma├čnahmen haben jedoch Auswirkungen auf andere der Messwerte. Hauptansatzpunkte zur Optimierung der Core Web Vitals sind Bilder, Caching und Ladereihenfolge.

Nehmen Sie Kontakt auf!

EINGENETZT B2B SEO & Webentwicklung

Im Kaiserviertel
Bismarckstra├če 54
44135 Dortmund

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie auch die Kontakt-Buttons unten rechts!