Eine gute Nutzererfahrung ist für eine erfolgreiche Webseite unabdingbar.
Mit den Core Web Vitals hast du die Möglichkeit wichtige Faktoren für die eine gute Nutzererfahrung zu optimieren. Die Analyse und Optimierung ist jedoch teilweise sehr technisch, was viele Webseitenbetreiber:innen abschreckt.
In diesem Guide erfährst Du die wichtigsten Aspekte der Core Web Vitals. Du erfährst, wie Du diese Schritt für Schritt verbessern kannst ohne ein Entwickler zu sein.
Was sind die Core Web Vitals und warum sind diese wichtig?
Bei den Core Web Vitals handelt es sich um drei nutzerzentrierte Metriken, die im Frühjahr 2020 eingeführt wurden. Diese sind grundsätzlich dem Thema “Ladezeit von Webseiten” zuzuordnen. Hier unser Guide zur Pagespeed Optimierung.
Ziel dieser Metriken ist die Bewertung der Nutzererfahrung anhand der Faktoren Ladegeschwindigkeit der Webseite, Interaktivität des Browsers und Stabilität des Layouts. Diese wirken sich maßgeblich auf die User Experience aus.
Die Core Web Vitals haben im Zuge des Google Page Experience Updates im Juni 2021 Einfluss auf das Google Ranking einer Webseite. Dennoch sollten die drei Metriken nicht als reine SEO-Faktoren gesehen werden.
Eine gute Nutzererfahrung kann sich ebenso positiv auf die Conversion Rate und damit den generierten Umsatz auswirken. Ebenso dürfte sich der Qualitätsfaktor in Google Ads verbessern, was günstigere Klickpreise zur Folge hat.
Was Du wissen musst
Grundsätzlich gibt es zwei Möglichkeiten zur Erfassung der Core Web Vitals und anderer PageSpeed Metriken. Welche das sind, wie sich diese unterscheiden und welche Vor- bzw. Nachteile beide jeweils haben, zeigt folgende Tabelle:
| Labordaten | Felddaten | |
| Erklärung | Werden in einer kontrollierten Testumgebung erfasst. Faktoren wie Endgerät und Verbindung können selbst definiert werden. |
Werden anonymisiert im Google Chrome Browser bei realen Nutzern erfasst und dann von Google weiterverarbeitet. |
| Vorteile |
|
|
| Nachteile |
|
|
| Anwendung | Analyse und Evaluierung von Optimierungsmaßnahmen. | Bewertungsgrundlage für Google. |
Hinweis: Nur die Felddaten der Core Web Vitals fließen mit in das Ranking in Google ein.
Der Fokus sollte dementsprechend auf den Felddaten der Core Web Vitals liegen und die Labordaten zur Analyse und Evaluierung der der Optimierungsmaßnahmen herangezogen werden.
Diese 5 hilfreichen Tools empfehle ich
Es gibt eine Vielzahl an Tools, die Dich bei der Analyse und Optimierung der Core Web Vitals oder der Ladezeit im Allgemeinen unterstützen können. Im Folgenden stelle ich Dir meine Empfehlungen für die unterschiedliche Anwendungsfälle vor.
Tools zum Monitoring der Core Web Vitals und Ladezeit
Ein regelmäßiges Monitoring der Core Web Vitals und der Ladegeschwindigkeit Deiner Seite ist wichtig, um frühzeitig auf negative Änderungen und Probleme aufmerksam zu werden.
Google Search Console
Die Google Search Console liefert bzgl. der Core Web Vitals einen Performance-Überblick der letzten drei Monate. Bei den Daten handelt es sich um Felddaten der Core Web Vitals.
Unter dem Menüpunkt “Nutzerfreundlichkeit -> Core Web Vitals” wird die aktuelle Seiten-Performance für Mobile und Desktop dargestellt. Dabei wird zwischen guten, zu optimierenden und schlechte URLs unterschieden.
Weitere Informationen zu den jeweils betroffenen URLs und den vorliegenden Problemen lassen sich über die Filterfunktionen anzeigen.
Chrome User Experience Report
Für einen Zeitrahmen größer als drei Monate, empfehle ich den Chrome User Experience Report.
Die Datengrundlage ist die Gleiche wie für die Search Console, aber die Datenpunkte werden weniger granular auf Monatsebene zusammengefasst. Zudem werden keine aktuellen Daten, sondern nur die Daten bis zum letzten Monat angezeigt, wodurch ein zeitkritisches Monitoring nicht möglich ist.
Dennoch ist der Chrome User Experience Report ein hilfreiches Tool, um die Performance-Entwicklung über mehrere Monate oder Jahre rückblickend zu betrachten.
Hier kannst Du den kostenlosen Report für deine Domain erstellen.
Tools zur Analyse der Core Web Vitals und Ladezeit
Sobald Du durch das kontinuierliche Monitoring auf URLs aufmerksam wirst, die die Core Web Vitals nicht erfüllen, kannst Du mit folgenden Tools eine tiefgehende Analyse durchführen.
Google PageSpeed Insights
Der Klassiker unter den Analyse-Tools rund um das Thema Ladezeit ist Google PageSpeed Insights.
Mit einem Klick analysiert das Tool die eingegebene URL für Mobile bzw. Desktop und zeigt Feld- und Labordaten an. Zudem erhältst Du hilfreiche Hinweise zur Optimierung deiner Webseite.
WebPageTest.org
Deutlich komplexer ist WebPageTest.org, welches sich aufgrund der Detailtiefe eher an Entwickler richtet.
Dieses Tool ist ebenfalls kostenlos und ermöglicht Dir die Durchführung von Analysen nach individuellen Kriterien. Du kannst beispielsweise die Test-Location, die genutzte Internetverbindung und das genutzte Device eigenständig auswählen, wodurch du gezielt testen kannst.
Im Gegensatz zu PageSpeed Insights erhältst Du bei diesem Tool eine genaue Aufschlüsselung der einzelnen Verbindungen: Ressourcenverteilung, eine Videoaufnahme des Ladevorgangs und weitere detaillierte technische Metriken. Eine Interpretation oder konkrete Optimierungsmaßnahmen fehlen hingegen.
Chrome Dev Tools
Als letztes Tool bleiben noch die Chrome Dev Tools bzw. die Entwicklertools in Browsern wie Safari, Firefox oder Edge zu erwähnen, die sich ebenfalls eher an Entwickler richten.
Mit den Dev Tools kannst Du den Seitenaufbau und das Ladeverhalten direkt in Deinem Browser untersuchen. Du öffnest die Dev Tools mit “Rechtsklick → Untersuchen” und kannst anschließend das Ladeverhalten im Performance-Tab untersuchen.
Um die Core Web Vitals untersuchen zu können, musst Du den entsprechenden Haken setzen. Diese kannst Du in Form von grünen, orangenen oder roten Markierungen in der Timeline sehen.
Largest Contentful Paint verbessern
Der Largest Contentful Paint (LCP) misst die Zeit bis zur Darstellung des größten Bildes, Videos oder Text-Blocks im direkt sichtbaren Bereich. Wie folgendes Beispiel zeigt, kann das Element während des Ladevorgangs auch wechseln; es zählt allerdings das final größte Element (Grün).
Auf YouTube wäre das größte Element beispielsweise das Video selbst. Auf einer Produktseite in einem Onlineshop ist es häufig das Produktbild. Auf einer Nachrichtenseite das Beitragsbild oder die Überschrift.
Bewertung des LCP:
Bis 2,5 Sekunden: gute Performance (Grün)
Von 2,5 bis 4 Sekunden: zu optimierende Performance (Gelb)
Größer 4 Sekunden: schlechte Performance (Rot)
So analysierst Du den LCP
Wenn Du in der Google Search Console feststellst, dass URLs hinsichtlich des LCP schlechte Werte liefern, solltest Du diese gezielt in den Chrome Dev Tools oder WebPageTest.org untersuchen. Dabei möchtest Du primär herausfinden, welches Element jeweils für den LCP relevant ist, damit Du dieses optimieren kannst.
Analyse mit den Chrome Dev Tools
Öffne die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Core Web Vitals angehakt und die Seite neu geladen hast, wird Dir in der Zeile “Timings” der LCP angezeigt. Sobald Du mit der Maus über dieses Kästen hoverst, wir das entsprechende Element auf der Webseite farbig hinterlegt.
Analyse mit WebPageTest.org
Alternativ kannst Du die Analyse auf WebPageTest.org durchführen. Gib Deine URL auf der Startseite ein und starte die Analyse. Sobald die Ergebnisseite geladen ist, kannst Du Dir mit einem Klick auf “Largest Contentful Paint” in der Ergebnistabelle folgende Details zum LCP anzeigen lassen.
So kannst Du den LCP optimieren
Weil die Messvorgaben für den LCP sehr konkret definiert sind, lassen sich Optimierungsmaßnahmen gezielt finden und umsetzen. Ziel ist es, dass das größte Element (Bild, Video oder Text) im direkt sichtbaren Bereich so schnell wie möglich angezeigt wird.
Welche Maßnahmen jeweils umgesetzt werden sollten, hängt von den individuellen Gegebenheiten und dem jeweils betroffenen Element ab. Hinweise kann hier eine Analyse in PageSpeed Insights liefern.
Antwortzeit des Servers verbessern
Ein wichtiger Aspekt bei der Verbesserung der Ladezeit ist die Antwortzeit des Server, auch Time to first Byte genannt. Nur wenn der Server schnell auf Anfragen reagieren und Inhalte bereitstellen kann, können Metriken wie LCP überhaupt gute Bewertungen erzielen. Dazu solltest Du folgende Aspekte prüfen und gegebenenfalls anpassen:
Prüfe ob der der Server bzw. das Hosting-Paket für den aktuellen Traffic der Seite ausgelegt ist oder ob ein Upgrade sinnvoll ist.
Überprüfe ob die Software auf dem Server aktuelle ist. Beispielsweise bringen Versions-Updates für PHP, SQL-Datenbanken etc. meist auch Steigerungen der Performance mit sich.
Aktiviere nach Möglichkeit http/2 und GZIP für einen schnelleren Datentransfer.
Nutze serverseitiges Caching, um dynamische Inhalte schneller ausspielen zu können – Viele CMS bieten dafür Cache-Plugins an.
Falls Du die Fragen selbst nicht klären kannst, solltest Du bei deinem Hoster nachfragen. Dieser kann in der Regel auch Updates bzw. Upgrades durchführen.
Bilder optimieren
Wenn ein Bild für den LCP verantwortlich ist, sollte dieses entsprechend optimiert und eingebunden sein. Dabei solltest Du vor allem auf folgende Punkte achten:
Das Bild sollte in einem modernen WebP Format vorliegen, weil dieses die aktuell beste Performance bietet und viele Vorteile vereint. Für ältere Browser muss ein Fallback als JPEG bzw. PNG hinterlegt sein, weil diese noch kein WebP unterstützen.
Bei der Skalierung ist darauf zu achten, dass das Bild in den Abmessungen übertragen wird, in den es angezeigt wird. Wenn ein Bild mit 650 x 300 Pixeln dargestellt wird, sollte es nicht in der doppelten Auflösung ausgespielt werden. Sonst müssen unnötig Daten transferiert werden. Zudem sollte ein Bild in verschiedenen Skalierungen bereitgestellt werden, damit Endgeräte wie Smartphones entsprechend kleinere Bilder laden können.
Abhängig vom Format ist eine verlustfrei Komprimierung möglich, um zusätzlich die Dateigröße zu verringern. Mit Tools wie compressor.io kannst Du Einsparungen vorab testen. Für das massenhafte Komprimieren von Bilder sind für viele CMS Plugins verfügbar.
Wenn Du diese drei Tipps beachtest, sollten deine Bilder schon deutlich schneller laden.
Videos optimieren
Sofern Videos für den LCp verantwortlich sind, solltest Du darauf achten, dass diese nicht zu lang sind. Zudem sollten sie nicht in der höchsten Auflösung bereitgestellt werden. Beides führt schnell zu langen Ladezeiten. Ein gutes Format ist WebM, welches, wie WebP für Bilder, eine gute Performance bietet.
Auch Videos sollten in unterschiedlichen Skalierungen bereitgestellt werden, sodass der Browser die jeweils passende Datei wählen kann und nicht unnötig große Dateien herunterladen muss.
Als letzten Punkt solltest Du auf das Poster-Attribut achten und dieses mit angeben. Dabei handelt es sich um eine Art Thumbnail, das bis zum vollständigen Laden des Videos angezeigt wird und dadurch den LCP positiv beeinflussen kann.
Preload der entsprechenden Ressourcen
Probiere die für den LCP relevanten Ressourcen (Bilder, Videos oder Fonts) möglichst frühzeitig zu laden. Mit Hilfe von Pre-Load kannst Du solche Ressourcen bereits im HTML-Head laden lassen. So stehen sie im späteren Verlauf direkt zur Verfügung und können zeitnah angezeigt werden. Beispiel:
<link rel=“preload“ href=“/LCP-relevantes-Bild.jpg“ as=“image“>
Ressourcen die das Rendering blockieren zurückstellen
Ein weiterer Punkt ist das Blockieren des Renderings durch CSS- und JS-Dateien. Beide haben die Eigenschaft, den Renderprozess des Browser zu blockieren und so den visuellen Seitenaufbau zu verzögern. Das Umsetzung ist nicht trivial und individuell, sodass folgende Tipps eher grundlegender Natur sind.
Versuche CSS und JavaScript zu reduzieren und auf einzelnen Seiten das zu laden, was benötigt wird. Beispielsweise wird eine separate CSS- bzw. JS-Datei für ein Kontaktformular nur auf der Kontaktseite benötigt. Auf allen anderen Unterseiten sollte es aus dem Code entfernt werden.
Lade JS-Dateien asynchron nach, sodass diese den Renderprozess nicht negativ beeinflussen. Dazu müssen Scripte zusätzlich mit dem Wort “async” eingebunden werden. Beispiel:
<script async src=“script.js“></script>
Wenn Du diese Tipps umsetzt, sollte der LCP deutlich besser werden. Überprüfen kannst du deine Änderungen unmittelbar in den Laborwerten. Dennoch solltest Du die realen Auswirkungen in der Google Search Console weiter beobachten.
First Input Delay verbessern
Das First Input Delay (FID) gibt an, wie schnell der Browser auf die Interaktion des Nutzers reagiert. Außerdem gibt es an wie “flüssig” sich das Nutzen einer Webseite für Besucher:innen anfühlt.
Dabei wird gemessen, wie lange der Browser nach dem ersten Anklicken, Antippen oder Tastendruck benötigt, um auf diese Eingabe zu reagieren. Falls der Browser zu diesem Moment mit der Ausführung von Scripten beschäftigt ist, muss diese Aufgabe zunächst abgeschlossen werden. Erst danach kann der Browser auf die Nutzereingabe reagieren. Dies wird als Verzögerung vom Nutzer wahrgenommen.
Die Verzögerung wird folgend bewertet:
Bis 100 Millisekunden: gute Performance (Grün)
Von 100 bis 300 Millisekunden: zu optimierende Performance (Gelb)
Größer 300 Millisekunden: schlechte Performance (Rot)
So analysierst Du den FID
Bei der Analyse des FID liegt der Fokus darauf, herauszufinden welche Scripte den Browser länger als 50 Millisekunden belasten. Diese diese sind potenzielle Auslöser für einen hohen FID.
Allerdings handelt es sich beim FID um die einzige Metrik der Core Web Vitals, die nicht im Labor erfasst werden kann. Dies liegt daran, dass ohne großen Aufwand keine zufällige Interaktion durch den Nutzer simuliert werden kann. Als Alternative kannst Du im Labor die Metrik Total Blocking Time (TBT) zu Rate ziehen, die mit dem FID korreliert.
Analyse mit den Chrome DEV Tools
Öffne zunächst die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Seite neu geladen und die Performance aufgezeichnet hast, werden Dir in der Zeile “Main” die problematischen Tasks mit einem roten Fähnchen angezeigt. Sobald Du einen solchen Task und in den Details “Bottom-Up” auswählst, kannst Du sehen welches Script für das Problem verantwortlich ist.
Analyse mit WebPageTest.org
Sobald Du Deine URL in WebPageTest.org getestet hast, kannst Du auf der Ergebnisseite auf das Wasserfalldiagramm klicken, wodurch dieses als große interaktive Grafik auf einer neuen Seite geöffnet wird. Scrolle nach unten und schaue nach roten Balken in der Zeile “Long Tasks”. Nun gehst Du im Diagramm senkrecht nach oben und suchst nach Zeilen, die zu diesem Zeitpunkt rosa Balken besitzen. Diese stellen einen Indikator für die Ausführung von JavaScript dar. Um welches Script es sich handelt, kannst Du in der linken Spalte des Diagramms ablesen.
So kannst Du den FID optimieren
Nachdem Du Scripte mit langen Ausführungszeiten gefunden hast, kannst Du mit der Optimierung beginnen. Das Ziel ist die Ausführungszeiten so zu reduzieren, dass die Wahrscheinlichkeit für kurze Reaktionszeiten steigt.
Allerdings ist die Optimierung der Scripte nicht einfach und kann nicht immer nach dem gleichen Schema erledigt werden. Zum Glück treten FID Probleme im Vergleich zu LCP bzw. CLS eher selten auf und es muss nicht jedes potenziell problematisch Script angegangen werden. Der FID hängt zu einem gewissen Grad vom Nutzer ab und wann dieser mit der Webseite interagiert. Selbst bei Seiten mit mehreren potenziell problematischen Scripten kann der FID Null oder sehr niedrig sein, sofern kein Besucher zu den Ausführungszeiten eine Interaktion durchführt.
Folgende Maßnahmen sollen dennoch Denkanstöße sein, um den FID zu minimieren:
JavaScript grundsätzlich reduzieren und ungenutzte Plugins bzw. Libraries entfernen – Alles was nicht geladen wird, kann auch keinen schlechten FID erzeugen.
Scripte nur auf den Seiten einbinden, auf denen diese wirklich genutzt werden – Beispielsweise Slider, Kontaktformulare, Tools zum Splittesten etc..
Wenn Du nicht alle Funktionen von Frameworks wie Bootstrap benutzt, solltest Du auch nicht das gesamte Framework einbinden. Viele dieser Frameworks bieten Dir die Möglichkeit, Funktionen gezielt nach Bedarf in Custom Builds zusammenzufassen.
Große Scripte aufteilen und in kleinere Tasks aufbrechen, die den Main Thread bei der Ausführung weniger lang an einem Stück blockieren.
Vor allem das Modifizieren von Scripten setzt einiges an Erfahrung voraus, aber alleine das entfernen von ungenutzten Scripten reicht in den meisten Fällen schon aus, um den FID deutlich zu verbessern.
Cumulative Layout Shift verbessern
Der Cumulative Layout Shift (CLS) misst die Stabilität des Layouts, d.h. ob und wie stark sich ein Layout nachträglich ändert. Solche Änderungen vermitteln dem Nutzer, dass die Seite noch nicht vollständig geladen und noch nicht nutzbar ist. Zudem können diese auch sogenannte misclicks erzeugen, bei denen der Nutzer durch die Veränderung des Layout unbeabsichtigt auf ein anderes Element klickt. Wie dies aussehen kann, zeigt folgende Animation.
Es zählen dabei nur Layoutänderungen, die nicht durch eine Interaktion des Nutzers ausgelöst werden. Änderungen durch den Klick auf einen Button werden nicht gewertet. In der Animation von Welt.de ist es beispielsweise der Werbeblock, der den Content nachträglich nach unten schiebt.
Der CLS ist eine einheitenlose Metrik und wird folgendermaßen bewertet:
Bis 0,1: gute Performance (Grün)
Von 0,1 bis 0,25: zu optimierende Performance (Gelb)
Größer 0,25: schlechte Performance (Rot)
So analysierst Du den CLS
Bei der Analyse des CLS geht es erstmal darum herauszufinden, welches Element für die Verschiebung verantwortlich ist. Anschließend kannst Du dann die Ursachen dafür suchen und weiter analysieren.
Analyse mit den Chrome Dev Tools
Öffne die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Core Web Vitals angehakt und die Seite neu geladen hast, werden Dir in der Zeile “Experience” CLS Probleme angezeigt, sofern es zu Layout Shifts kommt.
Klicke auf eine solche Markierung und anschließend auf “Summary” in den Details. Anschließend hoverst Du über die Einträge “Moved from” bzw. “Moved to” um das betroffene Element rot hinterlegt angezeigt zu bekommen. Der Eintrag “Related Node” zeigt ebenfalls an, welches HTML Element verschoben wurde.
Nachdem Du weißt, welches Element betroffen ist, kannst Du nach dem Element suchen, das für die Verschiebung verantwortlich ist. Dieses liegt logischerweise über dem verschobenen Element und kann durch eine visuelle Analyse erkannt werden. Dazu fährst Du mit der Maus über die Zeitleiste (roter Kasten im folgenden Bild) und vergleichst die Veränderungen rund um den Zeitpunkt des CLS. So kannst Du schnell die Veränderungen erkennen, die die Verschiebung zur Folge haben.
Analyse mit WebPageTest.org
Die Analyse mit WebPageTest.org ist komplizierter. In den meisten Fällen erscheint der Cookie Consent Banner vor dem Layout Shift und das Tool kann den Cookies nicht ohne weiteres zustimmen. Deswegen empfehle ich Dir an dieser Stelle die Analyse primär mit den Chrome Dev Tools.
So kannst Du den CLS optimieren
Das grundsätzlich Problem hinter dem CLS ist, dass Elemente nachträglich ins Layout eingefügt werden oder ihre Größe ändern.
Damit dies nicht passiert, sollten dem Browser die finalen Abmessung möglichst früh bekannt sein, sodass dieser beim Rendern ausreichend Platz reservieren kann. In den meisten Fällen kann der CLS durch folgende Maßnahmen behoben werden.
Klare Größenangaben für Bilder und Videos
Es ist wichtig das Bilder und Videos mit konkreten Angaben zur Abmessung (width und height) eingebunden werden. Andernfalls findet der Browser die Abmessungen erst nach dem Herunterladen des Bildes/Videos heraus und muss das Layout nachträglich anpassen. So kann er den benötigten Platz direkt mit einplanen und das Bild/Video nach dem Herunterladen einfügen.
Reservierter Platz für nachträglich geladene Inhalte
Häufig werden Werbeanzeigen nachträglich durch JavaScript in das Layout der Webseite geladen und verschieben dadurch das Layout. Um dieses Problem zu lösen, solltest Du an den Stellen, wo die Werbung erscheinen soll, einen ausreichend großen Container platzieren. In den können die Werbeinhalte geladen werden. Dadurch reserviert der Browser auch in diesem Fall eine ausreichend große Fläche im Layout.
Angepasstes Styling für Fallback-Fonts
Schriftarten können ebenfalls zu Verschiebungen im Layout führen. Das ist häufig der Fall, wenn eigene Schriftarten verwendet werden, die nicht zu den sicheren Schriftarten zählen. Diese müssen vom Browser erst herunterladen werden und in dieser Zeit zeigt der Browser die Inhalte in einer Standard Fallback-Schriftart an.
Sobald die Schriftarten geladen und angezeigt werden, kommt es in den meisten Fällen zu einer deutlichen Änderung im Aussehen der Inhalte. Zum Beispiel anderer Abstand zwischen Buchstaben, größerer Zeilenabstand etc.. Um dies zu verhindern solltest Du deine Fallback-Schriftart mittels CSS so anpassen, dass diese vom Platzbedarf mit der finalen Schriftart übereinstimmt.
Zusammenfassung
Die Nutzererfahrung rückte bereits in den letzten Jahren immer mehr in den Fokus von Google und Webseitenbetreibern:innen. Mit den Core Web Vitals ist dieses sehr subjektive Empfinden der Nutzer:innen nun messbarer und auch greifbarer geworden.
Auch wenn sich die Metriken in den nächsten Jahren vermutlich noch weiterentwickeln werden, bieten sie schon jetzt eine gute Möglichkeit die Nutzererfahrung einer Webseite zu verbessern.
