Core Web Vitals: Neue Ranking-Faktoren für deine Website
Philipp Zeder
Kategorie:in
Entwicklung & Performance
Veröffentlicht am 15. März 2021
Aktualisiert am 9. Mai 2022
Ab Mai 2021 prüft Google neue Eigenschaften deiner Website, die dann das Ranking in den Suchergebnissen zusätzlich beeinflussen werden. Was diese «Core Web Vitals» genau sind, mit welchen Tools du die Core Web Vitals deiner Website untersuchst und mit welchen Massnahmen du die Faktoren verbesserst, zeigen wir dir in diesem Blogbeitrag.
Was sind Core Web Vitals?
Die sogenannten Web Vitals sind Faktoren, die Google benutzt, um das Erlebnis zu messen, das du mit einer Website hast. Die Core Web Vitals stellen quasi den Kern dieser Faktoren dar und bestehen aus diesen 3 Merkmalen: LCP, FID und CLS. Diese 3 Abkürzungen solltest du ab Mai 2021 verinnerlicht haben, denn dann wird Google damit beginnen, die Core Web Vitals als Ranking-Faktor zu nutzen. Das hat es mit LCP, FID und CLS genau auf sich hat:
Largest Contentful Paint (LCP): Wie schnell lädt eine Seite?
Der wichtigste Faktor der 3 Core Web Vitals ist der sogenannte Largest Contentful Paint (LCP). Mit dem Faktor wird gemessen, wie schnell das grösste Element im sichtbaren Bereich geladen ist.
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport.
Liegt der LCP-Wert unter 2.5 Sekunden bist du mit der gemessenen Seite im grünen Bereich. Google empfiehlt, dass 75 % der Seiten deiner Website diesen Zielwert erreichen. Und das sowohl auf Desktop- wie auch auf Mobil-Geräten.
Quelle: web.dev, Creative Commons BY 4.0
So optimierst du LCP für deine Website
LCP ist hauptsächlich abhängig von 4 verschiedenen Faktoren. Daraus ergeben sich diese 4 Empfehlungen, um den LCP deiner Website zu optimieren:
- Achte darauf, dass die Antwortzeit deiner Website möglichst gering ist. Da hilft zum einen der Einsatz eines Webhosting-Anbieters mit einer schnellen Infrastruktur (?) und zum anderen der Einsatz von Caches, sowohl server- als auch browserseitig.
- Minimiere den Einsatz von JavaScript und CSS, die das Rendern der aufgerufenen Seite blockieren.
- Verringere die Zugriffszeiten auf die Ressourcen deiner Website.
- Achte bei Websites, die hauptsächlich im Browser generiert werden, darauf, dass du den verwendeten JavaScript-Code möglichst klein und schlank hältst.
Unter https://web.dev/optimize-lcp/ findest du weitere, ausführliche Tipps dazu, wie du LCP für deine Website optimierst.
First Input Delay (FID): Wie schnell reagiert die Seite?
Der zweite Faktor, der sogenannte First Input Delay (FID), ist etwas komplexer als LCP. Er misst, wie lange es dauert, bis der Browser nach der ersten Interaktion durch Besucherinnen und Besuchern reagieren kann. «Reagieren kann», weil geprüft wird, ob der Browser nicht gerade noch mit anderen Aufgaben beschäftig ist. Für den FID sind Klicks, Tippen auf dem Bildschirm oder das Drücken einer Taste relevant. Interaktionen wie Zoomen oder Scrollen sind für den FID hingegen nicht massgebend.
FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.
Beim FID sind Werte unter 100 Millisekunden gut. Auch hier empfiehlt Google, dass sich 75 % der Seiten im grünen Bereich bewegen.
Quelle: web.dev, Creative Commons BY 4.0
So optimierst du FID für deine Website
Den FID deiner Seiten optimierst du vorwiegend durch den optimalen Einsatz von JavaScript:
- Teile lange Aufgaben in kleinere Stücke auf. Google nennt den Wert von 50 ms, ab dem ein Code-Schnipsel den Haupt-Thread zu lange blockiert.
- Priorisiere die Code-Elemente, die für die Interaktion mit der Seite verantwortlich sind.
- Setze Web-Worker ein.
- Reduziere die Ausführungszeit des gesamten JavaScript-Codes und verschiebe die Ausführung von weniger wichtigen Aufgaben an den Schluss.
Unter web.dev/optimize-fid/ findest du die ausführlichen Tipps von Google, wie du FID für deine Website optimieren kannst.
Cumulative Layout Shift (CLS): Alles an seinem Platz?
Der dritte Messwert im Core-Web-Vitals-Bunde nennt sich Cumulative Layout Shift (CLS). Der CLS-Score setzt sich aus der Summe aller einzelnen «Layout Shift»-Scores zusammen, die auf der aufgerufenen Seite berechnet werden.
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
Ein solcher «Layout Shift» passiert, wenn ein sichtbares Element in der darauffolgenden Bildwiederholung (dem nächsten «Frame») seine Position verändert.
Für CLS gilt ein Wert unter 0.1 als gut. Und auch bei diesem Faktor solltest du bei allen Seiten deiner Website die 75-%-Marke anpeilen, genau wie für LCP und FID.
Quelle: web.dev, Creative Commons BY 4.0
So optimierst du CLS für deine Website
Achte für einen optimalen Cumulative-Layout-Shift-Score darauf, dass sich möglichst wenige Inhalte nach dem Laden der Seite verschieben. Das erreichst du, indem du auf folgende Punkte achtest:
- Gib bei Bildern immer die Höhe und Breite im HTML an.
- Vermeide Werbebanner, eingebettete Inhalte und iFrames ohne Grössenangabe.
- Schaffe für dynamisch geladene Inhalte Platz, indem du Platzhalter verwendest.
- Verhindere für eingebundene Schriftarten FOUT (Flash Of Unstyled Text) und FOIT (Flash Of Invisible Text).
Die ausführlichen Tipps von Google, wie du den CLS-Score optimierst, findest du unter web.dev/optimize-cls/.
Warum sind Core Web Vitals wichtig für deine Website?
Google hat angekündigt, dass ab Mai 2021 die sogenannten «Page-Experience»-Signale zu einem Ranking-Faktor werden. Zu diesen Signalen gehören neben einer guten Bedienbarkeit auf Mobilgeräten und verschlüsselten Verbindungen auch das Fehlen von Malware und aufdringlichen Interstitials sowie eben die Core Web Vitals.
Quelle: Google Developers, Creative Commons BY 4.0
Tools, mit denen du die Core Web Vitals im Blick behältst
Die beliebten Entwickler*innen-Tools von Google unterstützen alle Core Web Vitals, womit du ein ganzes Arsenal an Werkzeugen zur Verfügung hast, um deine Website für die kommende Google-Änderung fit zu machen. Ein guter Startpunkt ist die Google Search Console. Du findest dort einen Menüpunkt «Core Web Vitals» unter dem du passende Reports generieren kannst. So hast du im Handumdrehen den Überblick darüber, welche Seiten deiner Website noch ein bisschen Core-Web-Vitals-Liebe benötigen.
Quelle: web.dev, Creative Commons BY 4.0
Mithilfe von PageSpeed Insights kannst du dann die einzelnen Seiten einer genaueren Prüfung unterziehen. Sowohl PageSpeed Insights als auch web.dev/measure/ geben dir wertvolle Tipps, an welchen Stellen du noch schrauben kannst. Für lokale Tests eignen sich die DevTools und die integrierte Lighthouse-Funktion im Chrome-Browser. Einen Überblick über all diese Tools von Google findest auf web.dev/vitals-tools/. Viel Erfolg beim Optimieren! ?
Beteilige dich an der Diskussion
9 Kommentare
Interessanter Bericht. habe gerade 5 meiner vielen Webseiten mit der Search Console geprüft. Bei Core Web Vitals steht bei JEDER nicht genügend Daten. Dabei haben meine Seiten mehrere tausend Besucher und einen CTR von über 5% in den vergangenen 3 Monaten.
Ist der CWV erst später aktiv verfügbar?
Seit gegrüsst
Markus
Hi Markus. Die Core-Web-Vitals-Statistiken in der Search Console basieren auf dem Chrome User Experience Report und werden durch echte Besuche gefüttert. Die Besucherinnen und Besucher müssen allerdings einige Kriterien erfüllen. Ich gehe davon aus, dass da bislang einfach nicht genügend qualifizierte Besuche stattgefunden haben.
Danke für die “frühe” Message. Konnte EINIGES verbessern dadurch.
web.dev/measure meldet ‘does not use https’ und gibt meiner Website Orange.
Seit cyon https anbietet, nutze ich es, und in der url wird es angezeigt.
Was meinen Sie?
Vielen Dank für den Blog-Beitrag!
Das Tool scheint Weiterleitungen absichtlich zu ignorieren und geht bei einer Eingaben ohne https:// davon aus, dass die unverschlüsselte Verbindung genutzt werden soll. Ist eine Weiterleitung auf https:// aktiv, wird im detaillierten Report folgende Meldung angezeigt: «The page may not be loading as expected because your test URL (http://example.com/) was redirected to https://example.com/. Try testing the second URL directly.»
Den Score zu erreichen ist einfach für alle schlanken und kleinen Seiten. Bestimmte Webseiten leben aber bewusst von grossen und scharfen Bildern, oder von umfangreicherem Code, welcher die Seite attraktiv macht (wenn sie dann geladen ist :-) ).
Was machen CMS Webseiten-Ersteller, welche mit Pagebuildern in WordPress oder Joomla ohne Codierung oder “Developper-Kenntnisse” Webseiten erstellen? kleine Bilddateien ist wohl das Meiste, was getan werden kann. Allenfalls noch Lite-Speed Cache aktivieren.
Ich bin dann gespannt, ob und wie stark das Google Ranking sich verändert nach der Aktivierung. Wird die Vereins-Webseite dann nicht mehr gefunden? Wohl kaum..
Vielen Dank aber trotzdem für den Blogbeitrag :-)
Auch mit grossen Bildern kann man den Score ohne Weiteres erreichen. Dafür sorgen die Bildformate AFIV und WebP, kombiniert mit den Attributen “srcset”, “loading=’lazy'”, “width” und “height”.
Die Grössenangaben mit “width” und “height” auf dem Bildelement sorgen dafür, dass das Bild bereits den benötigten Platz reserviert hat, auch wenn es noch nicht geladen wurden. Das bringt den CLS Score runter.
Das “loading=’lazy'” für alle Bilder, die nicht above-the-fold platziert sind, sorgt dafür, dass die Webseite beim Laden nicht durch Bilder blockiert wird und bringt somit den FID score runter.
Mit “srcset”, WebP/AFIV und das korrekte Priorisieren der Network-Requests auf den obersten Bildern bringen wir den LCP runter. Das ist der schwierigste Teil, da CSS und JavaScript Dateien den Score hier massiv hochdrücken.
Wer WordPress nutzt, ist wahrscheinlich nicht so schlecht abgedeckt mit eingebauten Funktionen und Plugins, um diese Dinge automatisiert anzuwenden, und basierend darauf, was WordPress in Vergangenheit nachgeliefert hat, dürfte es wahrscheinlich sein, dass das jetzt oder in naher Zukunft alles eingebaut ist.
Bei den Page Builder Plugins bin ich skeptisch. Aber diese waren schon vorher keine guten Lösungen, wenn man auf SEO und Performance setzen möchten.
WP und andere CMS werden die neuen CWV früher oder später adaptieren – da brauchts keine Dev-Kenntnisse. Dass eine Seite dann nicht mehr auffindbar ist, ist eher unwahrscheinlich, es ist ja nur ein weiterer Faktor von vielen. Ich habe ein paar Seiten von mir (u. a. WP) in der Search Console mit PageSpeed Insights durchgecheckt, die sind alle grün oder zumindest am oberen orangen Rand und lassen sich einfach in den grünen Bereich bringen.
Ich denke, dass der serverseitige Cache oft keinen so grossen Einfluss hat. Was einen grossen Unterschied macht sind in der Tat die Bilder – und dort kann man doch einiges herausholen, wenn man verschiedene Grössen je nach Device-Grösse zur Verfügung stellt, da ja wiederum Desktop und Mobile separat gemessen werden.
Ich verwende UIKit und hatte für die einzelnen Elemente oft Transitions (fade-in). Diese habe ich alle entfernt, da es sich einfach zu negativ auf die Ladezeit auswirkt.