Nehmen Sie Kontakt auf!

EINGENETZT Webentwicklung

Im E-Port Dortmund
Mallinckrodtstrasse 320
44147 Dortmund-Hafen

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie auch die Kontakt-Buttons unten rechts!

Google Core Web Vitals – Verstehen und Optimieren

Zuletzt aktualisiert:
  • Erfahre was die Core Web Vitals sind
  • Wie schĂ€tzt man seine Website RICHTIG ein?
  • Wie stark sind sie als Rankingfaktor?
  • Welche OptimierungsansĂ€tze gibt es fĂŒr Laien (Nicht-Entwickler)?
Google Core Web Vitals Titelbild

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 verdienten. Sehr interessant in diesem Zusammenhang ist diese Sammlung von Fallstudien.

Das auch immer mehr Website Betreiber dieser Ansicht sind, merke ich zu 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 (hoffentlich wirklich 🤞 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 zur VerfĂŒgung gestellt. 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.

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.

5/5 - (1 Bewertungen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Nehmen Sie Kontakt auf!

EINGENETZT Webentwicklung

Im E-Port Dortmund
Mallinckrodtstrasse 320
44147 Dortmund-Hafen

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie auch die Kontakt-Buttons unten rechts!