HowTo: Websites für die Core Web Vitals vorbereiten

|
Schon seit einigen Monaten ist bekannt, dass Google im kommenden Jahr die Einführung der Core Web Vitals plant. Die dazugehörigen Messmethoden, um Websites dafür checken zu lassen, gibt es schon. Wie du sie durchführst und deine Website optimierst? Das erfährst du in diesem Beitrag.

Die Core Web Vitals haben folgendes Ziel: Besuchern Frust rauben und damit benutzerfreundliche Websites schaffen. Auch wenn dazu mehr, als die hier genannten Faktoren gehören, so geht man mit der Einführung der Core Web Vitals einen guten Schritt. 

Die Core Web Vitals messen

Bevor du dich an die Optimierung der Core Web Vitals machst, hilft ein Blick auf Tools, mit denen du die bisherigen Werte messen kannst. Erst nach dem Optimieren zu messen ist natürlich möglich, doch fehlen dir dann die Vergleichswerte.

Für das Messen der Core Web Vitals stellt Google die PageSpeed Insights bereit. Wie die dort ermittelten Werte aussehen, zeigt dieses Beispiel für Stackoverlow. Die Core Web Vitals sind hier mit einer blauen Fahne markiert.

Screenshot PageSpeed Insights von Stackoverflow

Was du beachten solltest: In PageSpeed Insights wird zwischen der Auswertung für Desktop und Mobile unterschieden. Werden Optimierungen vorgenommen, die nur auf eine der beiden Gerätekategorien Einfluss haben, solltest du lediglich die dazugehörige Auswertung betrachten.

Nun aber zu den konkreten Optimierungen für die drei Core Web Vitals. 

Optimierungen für den Largest Contentful Paint (LCP)

Beginnen wir mit dem Largest Contentful Paint. Dieser Wert gibt an, wie lange es braucht, bis das größte Element des sichtbaren Bereichs aufgerufen wird. Hier geht es also um Geschwindigkeit und damit verbunden um die typischen Elemente, die zu diesem Thema gehören.

Ein wichtiger Faktor ist die Größe der Dateien. Öffnet ein Besucher die Website und sein Bildschirm ist zu 80 % von einem Video befüllt, das 10 Sekunden braucht, um geladen zu werden, ist das schlecht. Gleiches gilt für große Bilder. Hier können Pixel aber auch Qualitäten minimiert werden, um die Größe zu senken. Ebenfalls möglich ist das Wechseln auf andere Bildformate. 

Wichtig zu wissen: Der LCP nimmt auf Objekte Bezug, die beim Aufruf der Seite im sichtbaren Bereich des Besuchers liegen. Es geht demnach nicht um Elemente, die erst beim Scrollen zu sehen sind. Daher kann es sich für dich lohnen, große Elemente auf einer Seite nach unten zu schieben – und damit aus dem Bereich, der vom Besucher zuerst gesehen wird. Natürlich solltest du solche Entscheidungen nicht nur vom LCP, sondern vor allem von der Usability abhängig machen.

Daneben spielt die Reaktionsgeschwindigkeit des dahinterstehenden Webhostings eine Rolle. Je höher sie ist, umso später sieht der User die Inhalte auf seinem Bildschirm. Der Wert Time to first Byte (TTFB) ist hier ein guter Indikator. Lag dieser bei Mittwald in Vergangenheit z. B. bei einer Shopware Vorlage bei 203 ms, konnten wir den Wert durch unsere aktuellen Tarife auf 74 ms senken. Auch andere Systeme profitieren von den Optimierungen und genießen eine teilweise dreimal geringere TTFB. Genaueres dazu liest du hier.

Zuletzt sind es die hinter der Website arbeitenden Dienste, die Einfluss auf den Largest Contentful Paint nehmen. Je mehr von ihnen im Hintergrund arbeiten, umso länger braucht das Generieren der sichtbaren Inhalte. Zudem kann Caching, ob nun gut oder weniger optimal konfiguriert, die Ladezeit senken.

First Input Delay schlank halten

Weiter gehts zum First Input Delay (FID). Er erklärt, wie viel Zeit zwischen der Interaktion eines Users und einer Reaktion der Website liegt. Ein Beispiel: Wenn ein User zweimal auf einen Button klickt, weil er unsicher ist, ob sein Kontaktformular abgeschickt wurde, hat die Seite vermutlich einen hohen FID.

Den First Input Delay zu optimieren ist zumindest für Nicht-Programmierer ein schwieriges Unterfangen. Denn beim FID geht es für Änderungen unweigerlich an den Code. Eine Hilfe findest du auf Web.dev. Dort erklären Google-Mitarbeiter, wie sich lange Prozesse in JavaScript in mehrere kleinere aufteilen lassen. Außerdem erfährst du, wie Scripte Dritter die Prozesse auf der Website stören können und wie Webworker den First Input Delay optimieren können. 

So gelingt ein niedriger Cumulative Layout Shift

Jetzt wird es noch spannender. Ging es in den vorherigen Metriken um klar messbare Reaktionen oder Geschwindigkeiten, betrachtet der Cumulative Layout Shift den Hauptinhalt einer Website. Er untersucht, ob sich ebendieser beim Nutzen der Website verschiebt.

Ein bekanntes Beispiel für Websites, die einen hohen CLS erhalten würden, sind News-Seiten. Hier wird Werbung häufig nachträglich geladen. Das führt dazu, dass der Text eines Artikels beim Scrollen "springen" kann. Der Leser braucht Zeit um herauszufinden, wo er gerade gewesen war. Ein ebenfalls bekanntes Beispiel sind die regelmäßigen Spendenaufrufe auf Wikipedia. Wenige Momente nach Aufruf der Website wird am Anfang der Seite ein Spendenaufruf eingeblendet. Das verschiebt den Inhalt der Seite um einige Pixel nach unten. 

In diesem Video findest du eine genaue Erklärung der CLS-Formel. 

Annie Sullivan :: Understanding Cumulative Layout Shift :: #PerfMatters Conference 2020

Mit der Wiedergabe dieses Videos werden Daten an Youtube übertragen.

Hinweise dazu erhältst du in der Datenschutzerklärung.
Inhalte von Youtube laden

Wie kann der Cumulative Layout Shift optimiert werden?

Mit dem Verständnis, wie der CLS funktioniert, kannst du als Websitebetreiber schnell Optimierungen vornehmen. Hierfür suchst du auf der Website (Mobile wie auch auf Desktop) nach Elementen, die beim Scrollen auf der Website für "Sprünge" sorgen. Das kann ein automatisch laufender Slider mit Bildern in unterschiedlichen Höhen sein oder ein Menü, das beim Scrollen seine Höhe variiert. Diese Elemente gilt es so anzupassen, dass sie das Layout der Website nicht mehr verschieben.

Ein abschließender Hinweis zu den Core Web Vitals

Negative Werte in den PageSpeed Insights können für Panik sorgen. Daher mein Tipp: Führe schnellstmöglich Optimierungen durch, damit die Seite keine wertvollen Rankings verliert, wenn im Mai 2021 die Einführung erfolgt. Doch sei dir auch darüber bewusst: Die Core Web Vitals werden zwar Einfluss auf die Einschätzung deiner Website durch Google haben, allerdings nehmen sie dabei "nur" einen von vielen Plätzen in der langen Liste von Rankingfaktoren ein. Sie komplett zu ignorieren wäre falsch, genauso wie sie in den Vordergrund zu stellen und dabei altbewährte SEO-Maßnahmen zu vergessen. ;-) 

Hast du Fragen oder Gedanken zur Diskussion zu dem Thema? Ich freue mich, von dir in den Kommentaren zu lesen!

Ähnliche Artikel:

Hosting

HowTo: Websites für die Core Web Vitals vorbereiten

Das Page Experience Update: praktisch. Erfahre, wie dir die Optimierung von First Input Delay, Cumulative Layout Shift und Largest Contentful Paint gelingt.