Core Web Vitals: 7 Tipps für eine bessere User Experience

Online-Käufer:innen neigen dazu, nach einer schlechten User-Erfahrung eine Website nicht noch einmal zu besuchen. Eine Tendenz, die auch Google registriert hat – und mit „Core Web Vitals“ reagiert das Unternehmen darauf. Das Algorithmus-Update, das im vergangenen Mai eingeführt wurde, soll ab 2021 auch dafür sorgen, dass sich eine schlechte Page Experience auf das Ranking bei den Suchergebnissen auswirken wird.  

So kannst du die Page Experience konkret optimieren

Das Core Web Vitals Update von Google bewertet Websites anhand dreier Schlüsselkennzahlen. Die erste verbirgt sich hinter der Bezeichnung Largest Contentful Paint (LCP).  Diese Metrik misst die Zeitspanne, in der die wesentlichen Inhalte einer Webseite vollständig sichtbar werden und Besucher:innen darauf zugreifen können.

Folgende Möglichkeiten gibt es, diesen LCP-Score nachhaltig zu verbessern:

1. Bilddateien optimieren

Der Schlüssel zu einem guten LCP liegt in der Identifizierung und Optimierung jenes Elements, welches lange Ladezeiten verursacht. Wenn dieses ein Bild ist, solltest du sicherstellen, dass es für alle relevanten Endgeräte optimiert ist. Für deine mobile Website solltest du ein speziell optimiertes Bild verwenden oder vollständig auf große Bilder im ersten Sichtbereich verzichten. Ein weiterer Tipp: Verwende das Bildformat WebP, um eine verlustfreie Komprimierung von Bildern im Web sicherzustellen. WebP-Dateien sind um bis zu 34 Prozent kleiner als PNGs und JPEG-Bilder in ähnlicher Qualität. 

2. Überflüssigen Code entfernen

Mit der Zeit kann sich auf deiner Website zusätzliche Code ansammeln – insbesondere dann, wenn neue Anwendungen manuell hinzugefügt und alter Code nicht entfernt wird. Wenn Elemente stattdessen nur ausgeblendet oder Code auskommentiert wird, kann sich die Größe der Browser Downloads stark erhöhen. Entsprechend solltest du sichergehen, dass überflüssiges HTML, CSS oder JavaScript ganz von der Website entfernt wird.

3. Externe Ressourcen vorverbinden

Ein weiterer Erfolgsfaktor für schnelle Ladezeiten ist das Vorverbinden externer Ressourcen. Je mehr solcher Ressourcen – also Anzeigen, Share-Schaltflächen, Social-Media-Beiträge oder Widgets – abgerufen werden müssen, desto größer ist das Potenzial für eine kumulative Verlangsamung einer Website. Ein Lösungsansatz ist das sogenannte Prefetching. Hier werden alle externen Ressourcen aus Anwendungen bezogen, die sich physisch nicht auf deiner Website befinden. Erst, wenn ein Besucher eine Seite besucht, ruft der Browser diese Ressourcen tatsächlich auf. 

First Input Delay: Prüfe Elemente von Dritten

Die zweite relevante Kennzahl im Zuge der Core Web Vitals ist der First Input Delay (FID). Der FID misst die Verzögerung, die Nutzer:innen erleben, wenn er zum ersten Mal mit einer Website interagiert, zum Beispiel in Form eines Klicks.

Gibt es hier Verzögerungen, erscheint eine Seite träge und reaktionslos – was die Nutzer:innen wiederum frustriert. Im Folgenden findest du eine zentrale Maßnahme, mit denen du die Reaktionsschnelligkeit deiner Seite verbessern kannst:

4. Elemente von Drittanbietern reduzieren

Seiteninhalte von Drittanbietern können auf einer Website den Thread und den Haupt-Thread blockieren und so die Time to Interactive (TTI) erhöhen. Für eine Verbesserung der FID-Punktzahl solltest du also zu allererst sämtliche Anwendungen, Plugins und Skripte überprüfen, die du von Dritten beziehst. Dabei sollte jedes einzelne Element bewertet und im nächsten Schritt unnötige Inhalte bestmöglich reduziert werden.

So vermeidest du Layout-Verschiebungen

Stelle dir vor, du klickst auf eine Schaltfläche, während im Hintergrund ein großer Inhaltsbereich der Website geladen wird. Ist der Ladevorgang abgeschlossen,  schiebt das neue Element die Schaltfläche nach unten – und du klickst den falschen Inhalt an. Dieses Verhalten einer Website ist frustrierend. Der Cumulative Layout Shift (CLS) soll als dritte Metrik künftig die visuelle Stabilität von Webseiten bewerten.

Hier findest du wesentliche Tipps zur Optimierung: 

5. Anzeigen und Banner kritisch prüfen

Ein Ursache für eine niedrige CLS-Punktzahl ist die Verschiebung von Seitenelementen. Typische Ursachen, auf die Website-Betreiber:innen achten müssen, sind Anzeigen oder Banner, die dynamisch eingefügt werden, oder auch extern geladene Widgets. Ein Lösungsansatz ist das sogenannte ‘Lazy Loading’: Die Methode ermöglicht, dass bestimmte Objekte erst geladen werden, wenn sie sich im sichtbaren Bereich befinden. So wird wertvolle Ladezeit für Elemente, die außerhalb des Sichtfeldes liegen, eingespart.  

6. Width- und height-Attribute hinzufügen

Um den CLS Score zu verbessern, ist eine Option das Hinzufügen von width- und height-Attributen, die die Größe von Seitenelementen verbindlich festlegen. So wird verhindert, dass Website-Inhalte beim Laden von 0 auf x Pixel wechseln und so eine Seitenverschiebung ausgelöst wird. Alternativ kannst du auch ein CSS Styling implementieren, das früh geladen wird.

7. Platz für Inhalte reservieren

Reserviere Platz für deine Inhalte, zum Beispiel in Form eines Blocks von vordefinierter Größe für jenen Inhalt, der dynamisch eingefügt wird. Der Code sollte die Höhe und Breite einer injizierten Suchleiste haben, um die Position zu fixieren, bevor HTML und CSS verfügbar sind. Ein weiterer Tipp: Stelle sicher, dass kritisches CSS wie Struktur, Layout oder Menü vor dem jeweiligen Inhalt geladen wird.

Fazit: Die Nutzer:innen profitieren!

Dass die Optimierung der drei Core Web Vitals wichtig wird, hat Google mehr als deutlich herausgestellt. Für Webmaster jedoch kein Grund zur Sorge: Über verschiedene Tools existieren genügend Möglichkeiten, um Potenziale zur Optimierung von FID, LCP und CLS zu identifizieren und diese auch umzusetzen. So kannst du bereits bei Lighthouse, über PageSpeed Insights und in der Google Search Console prüfen, inwieweit deine Seiten auf die Kriterien vorbereitet sind. Außerdem gibt es bereits einen dedizierten Core-Web-Vitals-Bericht bei Google.

Allerdings solltest du den Hype um die Core Web Vitals nicht überbewerten. Zum einen handelt es sich bei zweien der drei Metriken um Kennzahlen, die bereits existiert haben, bevor die Einführung der Core Web Vitals überhaupt bekannt wurde: Die Wichtigkeit von FID und LCP ist durch ihre Definition als Core Web Vitals zwar gestiegen – um neue Metriken handelt es sich dabei aber nicht. Lediglich den Cumulative Layout Shift (CLS) gab es bisher noch nicht. 

Dennoch bieten die Core Web Vitals eine sehr gute Möglichkeit, um anhand eindeutiger Kennzahlen vorzeigbare Auswertungen der User Experience vorzunehmen. So lässt sich sehr schnell und einleuchtend aufzeigen, welche Probleme es gibt – und welche der genannten Tipps Seitenbetreiber:innen umsetzen können, um ihre Zielgruppen zufrieden zu stimmen. Bei web.dev findest du eine umfassende Dokumentation zu den relevanten Core Web Vitals, an der du dich orientieren und wichtige weiterführende Links finden kannst.