Tipps für UX-Designer und Webentwickler Core Web Vitals für mehr Nutzerfreundlichkeit

Von Klaus Kurz *

Anbieter zum Thema

Noch im Juni 2021 ist es so weit: Die Core Web Vitals von Google gehen an den Start. Auf die Entwickler kommt erst einmal zusätzliche Arbeit hinzu, um vorhandene Seiten zu prüfen und zu optimieren.

Die bereits in der Google Search Console gelisteten Core Web Vitals werden im Juni fester Bestandteil der Google-Rankingfaktoren.
Die bereits in der Google Search Console gelisteten Core Web Vitals werden im Juni fester Bestandteil der Google-Rankingfaktoren.
(Bild: mjessier / Unsplash)

Websites müssen schnell laden und technisch korrekt aufgebaut sein – dieser Grundsatz gilt schon seit langem. Deshalb gibt es die TTFB (Time To First Byte) und andere Messwerte für die Page Experience. Doch mit zunehmender Komplexität der Webentwicklung müssen Metriken her, die das Benutzererlebnis beim Aufruf einer Website besser in Zahlen fassen.

Core Web Vitals: Die Basis für Nutzerfreundlichkeit

Einige Beispiele für schlechte Page Experience: Beim Aufruf der Seite dauert es lange, bis größere Fotos geladen sind. Es gibt merkliche Verzögerungen, bevor etwas angeklickt werden kann. Plötzlich taucht in einer Leerzeile eine Anzeige auf und verschiebt den gesamten Content nach unten.

Diesen typischen Problemen moderner Websites widmet sich Google unter dem Oberbegriff „Core Web Vitals” mit neuen Metriken. Es handelt sich dabei um Rankings, die mit den Felddaten aus dem „Chrome User Experience“-Bericht zusammengestellt werden.

Insgesamt gibt es drei Core Web Vitals:

  • Largest Contentful Paint (LCP): die Zeit zwischen dem Aufruf der Seite und dem Erscheinen des größten Elements im sichtbaren Bereich. Gute Werte sind maximal 2,5 Sekunden, ab 4 Sekunden ist die Seite zu langsam.
  • First Input Delay (FID): die Zeit zwischen dem Seitenaufruf und dem Zeitpunkt, an dem erstmals Interaktionen möglich sind, etwa klicken oder scrollen. 100 Millisekunden oder weniger ist ein guter Wert, ab 300 Millisekunden reagiert die Seite zu träge.
  • Cumulative Layout Shift (CLS): betrifft die Stabilität des Seitenlayouts. Es ist instabil, wenn nachgeladene Objekte das Layout nachträglich verändern. Das sind zum Beispiel Anzeigen oder Videos, die nach dem Laden andere Inhalte zur Seite oder nach unten drücken. Werte bis 0,1 sind gut, ab 0,25 wird die Seite abgewertet.

Webseiten für die Core Web Vitals optimieren

Entwickler sollten die neuen Core Web Vitals berücksichtigen, denn ein schlechtes Nutzererlebnis führt zur Herabstufung einer Seite. Google nutzt aber weiterhin in erster Linie den Content für das Ranking. Zudem werden die Werte von Google unterschiedlich gewichtet: LCP und FID mit jeweils 25 Prozent, CLS jedoch nur mit fünf Prozent.

Doch besonders schlechte Ergebnisse in einer der drei Kennzahlen führen im Vergleich mit inhaltlich ähnlichen Seiten leicht zum Abstieg. Es ist also sinnvoll, auf gute Werte bei den Vitals zu achten. Glücklicherweise unterstützen inzwischen alle Google-Tools wie etwa die Suchkonsole die neuen Kennzahlen.

Für Entwickler besonders sinnvoll sind die Pagespeed Insights: Hier können die eigenen Seiten, aber auch beliebige andere Websites getestet werden. Das Ergebnis gibt erste Hinweise für die Optimierung. Sinnvollerweise sollten Entwickler zuerst beim schlechtesten Wert eingreifen. Dazu hat Google freundlicherweise selbst drei lange Listen mit Hinweisen zur Optimierung zusammengestellt: für LCP, FID und CLS.

In der Praxis zeigt sich jedoch, dass die Entwickler einige Einflussfaktoren nicht unter Kontrolle haben. Dies betrifft vor allem externe Ad-Server, ironischerweise auch Googles eigenes AdSense. Sie haben je nach Auslastung unterschiedliche Ladezeiten. Damit beeinflussen sie alle drei Core Web Vitals und zwingen die Seite unter Umständen in den negativen Bereich.

Weitere Metriken zur Analyse hinzuziehen

Die neuen Core Web Vitals bedeuten nicht, dass die älteren Metriken bedeutungslos sind. Vor allem die TTFB (Time to First Byte) hat auch weiterhin große Aussagekraft. Sie beschreibt die Latenz der Verbindung zwischen Website und Backend. Hohe Werte verweisen auf ein Problem, das mit einer veränderten Server-Konfiguration oder von den Backend-Entwicklern gelöst werden kann.

Auch FCP (First Contentful Paint) ist immer noch für die Fehlersuche sehr nützlich. So könnte es beispielsweise eine auffällige Verzögerung zwischen dem Beginn des Renderings (FCP) und dem Rendering des größten Objekts (LCP) geben. Damit können Entwickler analysieren, ob es Hindernisse beim Laden von Inhalten gibt.

Die beiden Metriken TBT (Total Blocking Time) und TTI (Time to Interactive) unterscheiden sich von den Core Web Vitals, da es reine Labordaten sind, die aber gute Analysehilfen für die Optimierung der Ladezeiten sind. Der beste Weg, hier etwas zu optimieren, ist der Test der Seiten mit Lighthouse, das über die Chrome DevTools zu erreichen ist.

Zusätzlich zu diesen Metriken bewertet Google für das Ranking noch einige andere Signale. Dazu gehört beispielsweise die Optimierung für Mobilgeräte, den Sicherheitsstatus der Website, die Nutzung von HTTPS und der Verzicht auf lästige Interstitials. Insgesamt bilden die Core Web Vitals und die weiteren Signale den neuen Rankingfaktor Page Experience (Nutzerfreundlichkeit). Er wird ab Mitte Juni 2021 schrittweise in den Google-Core übernommen.

Nutzerfreundlichkeit und Observability

Die Core Web Vitals werden bald eine große Bedeutung für die Webentwickler haben. Die Maßnahmen auf der Inhaltsseite nehmen schon länger den Nutzer in den Blick. So werden lesefreundliche Seiten mit einem eigenen Inhaltsverzeichnis und einer klaren Gliederung deutlich gegenüber reinen Textwüsten bevorzugt.

Die neuen Kennziffern rücken die Nutzerfreundlichkeit nun auch auf der technischen Seite stärker in den Vordergrund. Entwickler müssen dafür die Zielgruppe der Website in den Blick nehmen. Es ist denkbar, dass Core Web Vitals und Design-Ideen bei einzelnen Webprojekten kollidieren. Vor allem Websites mit viel JavaScript werden Probleme mit den FID-Werten bekommen.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

Letztlich kommt es auf den Langmut der Nutzer an. Ein Beispiel: Wer eine Webseite öffnet, um ein Video zu sehen, wird mit langen Verzögerungen bis zum Anklicken des Startknopfes sehr unzufrieden sein, während ihn das verzögerte Anzeigen von Werbung weniger stört. Für diese Situation ist zum Beispiel die Analyse des Abstands zwischen LCP und FID sinnvoll. Je größer er ist, desto eher strapaziert die Website die Geduld der Besucher.

Solche Beispiele zeigen, dass Kennzahlen wie die Core Web Vitals sich gut eignen, Nutzerfreundlichkeit zu operationalisieren und damit fassbar zu machen. Die neuen KPIs und Tools von Google geben Entwicklern letztendlich Anreize und Möglichkeiten die Nutzerfreundlichkeit von Websites zu erhöhen.

Klaus Kurz
Klaus Kurz
(Bild: New Relic)

Entwickler und UX-Designer sind dadurch nicht mehr auf Schätzungen angewiesen, um optimale Websites zu entwickeln. Darüber hinaus können sie durch Observability-Lösungen wie beispielsweise dem New Relic Browser Monitoring zur Überwachung der Browser-Leistung relevante Kennzahlen für das Website-Monitoring in Echtzeit erhalten.

* Klaus Kurz ist seit Herbst 2019 Director, Solutions Consulting Central Europe bei New Relic. Hier führt er ein stetig wachsendes Team an Solution Engineers, Solution Consultants und Solution Architects, das Kunden bei der Umsetzung ihrer Digitalisierungspläne unterstützt. Zuvor arbeitete er 15 Jahre bei Adobe und füllte Positionen vom Manager Business Development bis zum Head of Solution Consulting für Zentral- und Osteuropa.

(ID:47429939)