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

88 Prozent der Online-Käufer:innen sagen, dass sie nach einer schlechten Nutzererfahrung eine Website nicht noch einmal besuchen würden. Eine klare Tendenz, die auch Google registriert hat – und nun mit “Core Web Vitals” darauf reagiert. Das Algorithmus-Update, das im kommenden Mai eingeführt wird, soll dafür sorgen, dass sich eine schlechte User Experience sich auf das Ranking bei den Suchergebnissen auswirken wird.

Im Folgenden erklären wir, was es mit den Core Web Vitals genau auf sich hat und geben 7 Tipps, mit denen Webseiten-Betreiber:innen ihren Auftritt optimieren können und so mit einer guten Platzierung belohnt werden.

[toc]

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 künftig 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:

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.

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.

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.

Die zweite relevante Kennzahl im Zuge der Core Web Vitals ist der First Input Delay (FID). Der FID bezieht misst die Verzögerung, die ein Nutzer erlebt, 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 den Nutzer wiederum frustriert. Im Folgenden zwei zentrale Maßnahmen, mit denen du die Reaktionsschnelligkeit deiner Seite verbessern kannst.

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.

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 wesentliche Tipps zur Optimierung:

Ein Ursache für eine niedrige CLS-Punktzahl ist die Verschiebung von Seitenelementen. Typische Verursacher, auf die Website-Betreiber 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.

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.

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.

Dass die Optimierung der drei Core Web Vitals wichtig wird, hat Google mehr als deutlich herausgestellt. Für Webmaster:innen 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. Gleichzeitig 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.