HowTo: Websites für die Core Web Vitals vorbereiten
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.
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
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!
