Nach der Einführung der Google Web Vitals ist die Page Experience noch besser messbar geworden und soll sogar zukünftig ein Rankingfaktor werden (voraussichtlich 2021). Wird sich SEO aufgrund dieser neuen Kennzahlen grundlegend verändern müssen oder bleibt alles wie bisher?
Google Web Vitals – Was ist das überhaupt?
Google hat die Web Vitals ins Leben gerufen, um die Performance einer Website noch besser und eindeutiger messen zu können. Vor allem versucht man, es den Webmastern anhand des Web-Vitals-Berichts – der mittlerweile Einzug in die Google Search Console gehalten hat – jetzt noch besser verständlich zu machen, wo genau die Defizite einer Website liegen. Insbesondere spielen dafür 3 wichtige KPIs eine Rolle:
Largest Contentful Paint (LCP)
Bei dem Largest Contentful Paint (kurz: LCP) geht es wie beim Page-Speed-Bericht auch, vor allem um die Ladezeit einer Website bzw. einer Unterseite. Im Konkreten wird hierbei berücksichtigt, wann das größte Element des Gesamtinhalts der Seite geladen ist. Das bezieht sich allerdings nur auf den sichtbaren Bereich („above the fold“). Dank des LCP haben Websitebetreiber nun eine bessere Vorstellung davon, wann der sichtbare Inhalt bzw. Main Content ihrer Seiten für die Nutzer fertig gerendert ist.
Google bewertet alle Ladezeiten über 2,5 Sekunden als optimierungsbedürftig und Ladezeiten über 4 Sekunden bereits als schlecht.
Einteilung des Largest Contentful Paint in drei Bereiche (gut, optimierungsbedürftig, schlecht)
First Input Delay (FID)
Unter First Input Delay (kurz: FID) versteht man die Wartezeit zwischen der ersten Nutzerinteraktion und der Reaktion des Browsers. Das kann beispielsweise ein Klick auf einen Link oder Button sowie die anschließend verstreichende Zeit bis zur Ausführung der gewünschten Aktion sein.
Google schätzt hier eine Wartezeit unter 100 Millisekunden als gut ein, während eine Verzögerung zwischen 200 und 300 Millisekunden bereits als optimierungsbedürftig angesehen wird.
Einteilung des First Input Delay in drei Bereiche (gut, optimierungsbedürftig, schlecht)
Cumulative Layout Shift (CLS)
Der Cumulative Layout Shift (kurz: CLS) misst die „Visual Stability“ – das heißt, wie sehr sich Inhalte im Ladeprozess der Seite noch verschieben. So könnte eine Seite zum Beispiel bereits interaktionsfähig aufgebaut sein, bevor sich am oberen Rand nachträglich noch ein Banner zeigt, was zur Folge hat, dass sich alle schon angezeigten Inhalte in dem Moment nach unten verschieben. Die schlechte Nutzererfahrung kennen viele: Ein Nutzer war gerade im Begriff, auf ein Element (etwa einen Button) zu klicken, als sich genau in der Sekunde die Inhalte verschoben haben, wodurch der Nutzer ungewollt ein anderes Element angeklickt hat. Das kann insbesondere bei höheren Ladezeiten sehr ärgerlich sein, da der Aufbau des vorigen Fensters erneut auf sich warten lässt.
Die Berechnung des Scores ergibt sich beim CLS aus der Größe des Inhaltsbereichs, der verschoben wird, und der Distanz, um die sich jener Inhalt verschiebt. Ausgedrückt in einer Formel sieht das so aus:
layout shift score = impact fraction * distance fraction
Verschiebt sich also die Hälfte des Inhalts im sichtbaren Bereich um ein Drittel nach unten, wäre der Wert von „impact fraction“ 0,5 und der Wert von „distance fraction“ 0,33. Daraus ergibt sich ein Layout Shift Score von 0,165.
Google sieht jeden Wert über 0,1 als optimierungsbedürftig an und einen Wert über 0,25 als schlecht.
Einteilung des Cumulative Layout Shift in drei Bereiche (gut, optimierungsbedürftig, schlecht)
Wie können die Web-Vitals-Werte ermittelt werden?
Schon jetzt gibt es verschiedene Möglichkeiten, sich die Web-Vitals-Werte von Websites anzeigen zu lassen bzw. diese zu ermitteln. Google möchte dabei nicht nur Performance-Experten ansprechen, sondern es jedem Websitebetreiber so einfach und verständlich wie möglich machen, die neuen Werte auszulesen. Dazu können unter anderem Browser-Extensions wie Lighthouse oder Web Vitals verwendet werden. Der Umgang damit ist wahnsinnig einfach. Durch einen Klick auf die Web Vitals Extension (Abbildung 4) werden die Werte zu Largest Contenful Paint, First Input Delay und Cumulative Layout Shift ausgegeben und bereits farblich markiert (grün = gut, gelb = optimierungsbedürftig, rot = schlecht). Hier ist zu beachten, dass sich die Wertung auf genau die Ansicht bezieht, in der wir uns aktuell befinden – im Screenshot also auf die Desktop Ansicht.
Chrome Web Vital Extension
Die Lighthouse Extension (Abbildung 5) hat ebenfalls Web Vitals mit in den Bericht aufgenommen, zusätzlich zu Speed Index, First Contentful Paint (FCP), Total Blocking Time (TBT) und Time To Interactive (TTI).
Web Vitals als Ergänzug zu den bestehenden Page-Speed-Metriken in der Lighthouse Extension
Ähnlich wie Lighthouse gibt auch Pagespeed Insights die neuen Metriken der Google Web Vitals aus (Abbildung 6). Hier sind diese sogar zusätzlich gekennzeichnet und somit besonders gut ablesbar.
Page Experience als Rankingfaktor: Wird sich SEO durch die Google Web Vitals verändern?
Da diese Tools die Web Vitals immer nur für die jeweils untersuchte URL ausgeben, lohnt sich auch ein Blick in die Google Search Console, um so für jede URL einer Website den Web-Vitals-Wert zu erfahren. Wo früher noch der Page-Speed-Bereich zu finden war, befinden sich nun die Core Web Vitals. Dank dieses Berichts bekommt man sehr schnell einen Eindruck von der Gesamtperformance der Domain und deren Entwicklung. Zudem wird in dem Core-Web-Vitals-Bericht auch zwischen Desktop- und Mobile-Ansicht unterschieden (Abbildung 7).
Unterscheidung zwischen Desktop- und Mobil-Nutzung im Core-Web-Vitals-Bericht innerhalb der Google Search Console
Im vorliegenden Screenshot wird deutlich, dass die Performance der Website insgesamt sehr zu wünschen übrig lässt. Aber es zeigen sich auch positive Ausreißer: Vermutlich sind hier einige „optimierungsbedürftige“ URLs bereits optimiert worden, wodurch sie nun laut Google Search Console zumindest für Nutzer mit mobilen Endgeräten gut performen.
Mit einem Klick auf „Bericht öffnen“ lassen sich unter „Details“ die genauen Probleme und auch die jeweils betroffenen URLs eruieren. Im Beispiel der Abbildung 8 lässt sich gut erkennen, dass die Probleme der betrachteten Website vor allem den Cumulative Layout Shift (CLS) betreffen.
Detailbericht der Core Web Vitals in der Google Search Console
Zu wissen, wie die eigene Seite bewertet wird und wo dies ausgelesen werden kann, reicht den meisten Websitebetreibern natürlich nicht. Der entscheidende Punkt ist, sich bei den Web-Vitals-Bewertungen zu verbessern und die eigene Website in den grünen Bereich zu bringen.
Wie optimiert man auf einen guten Google Web Vitals Score?
Für jede der drei Metriken gibt es ganz eigene Möglichkeiten, eine Website zu optimieren. Besonders die Punkte Largest Contentful Paint und First Input Delay sollten keine gänzlich neu zu entwickelnden Maßnamen erforderlich machen, da sie bereits von etablierten Page-Speed-Optimierungsmaßnahmen profitieren. Beide Metriken messen schließlich die Zeit, die zur Beantwortung der Nutzeranfrage gebraucht wird.
Largest Contentful Paint optimieren
Im Grunde genommen ist auch bei der Optimierung des Largest Contentful Paint all das zu tun, was auch bisher schon zu optimieren gewesen ist, wenn es darum ging, Ladezeiten niedrig zu halten. Die Möglichkeiten der Optimierung sind hier sehr umfangreich. Einige haben jedoch einen besonders großen Einfluss auf den Largest Contentful Paint:
- Gzip-Komprimierung – Die Komprimierung einer Website kann enorm Ladezeit einsparen, indem nach unnötigen Strings gesucht wird und diese eliminiert werden – und im Fall eines doppelten Strings auf den ersten String verwiesen wird. Gzip ist für alle Arten von Websites empfehlenswert.
- Bildoptimierung – Bilder sollten in modernen Formaten wie JPEG200 oder webp eingefügt werden. Außerdem sollten sie bereits richtig dimensioniert sein. Ein Bild mit einer Breite von 1920 Pixeln, das auf der Seite ohnehin nur mit 300 Pixeln Breite dargestellt wird, ist eine enorme Verschwendung von Ressourcen und ein echter Performance-Killer.
- Preloading – Oftmals werden wichtige Elemente erst später geladen als gewünscht. Mit dem HTML-Befehl <link rel=”preload”> können diese Elemente priorisiert und somit schneller ausgegeben werden.
- Caching – Statische Ressourcen, zum Beispiel ein Header-Image, können „gecacht“ werden. Das führt dazu, dass beim erneuten Besuch eines Nutzers auf der Website dieses Bild nicht erst wieder von dessen Browser geladen werden muss, sondern direkt vom HTTP-Cachespeicher geladen werden kann. Das kann die Ladezeiten erheblich verkürzen.
- Einsatz eines CDN – Das Nutzen eines Content Delivery Networks hat vor allem dann Vorteile, wenn die Besucher einer Website aus verschieden Regionen der Erde kommen. Ein CDN leitet den Nutzer immer zu genau dem Server, der ihm am nächsten ist, und verhindert so langwierige Anfragen „vom anderen Ende der Welt“.
- JavaScript-Reduzierung – Werden einige Elemente der Website erst sichtbar, nachdem bestimmte JavaScripts heruntergeladen worden sind, sollte die Größe der zu ladenden JavaScripts unbedingt reduziert werden. Zum Beispiel sollten ungenutzte Scripts aufgeschoben werden. Auch das serverseitige Rendern von JavaScript kann den Wert für den Largest Contentful Paint erheblich verbessern, weil dabei der Inhalt bereits auf dem Server und nicht erst im Client gerendert wird.
Es ist ersichtlich, dass all diese Maßnahmen bereits vorher schon essenziell für eine gute Seitenladegeschwindigkeit waren und dementsprechend der Largest Contentful Paint den meisten Webmastern – die ihr Handwerk verstehen – kaum Probleme bereiten wird. Auch bei der Optimierung des First Input Delay sind bereits bekannte Page-Speed-Maßnahmen anzuwenden.
First Input Delay optimieren
Die Ursachen für einen schlechten First Input Delay liegen meist bei JavaScript. Folglich ist eine JavaScript-Optimierung auch eine First-Input-Delay-Optimierung. Es sorgt beispielsweise häufig für große Verzögerungen, dass der Browser Main-Thread JavaScripts ausführt und unterdessen nicht auf Nutzeranfragen reagieren kann. Es ist also darauf zu achten, dass die JavaScripts den Main Thread des Browsers lediglich so kurz wie möglich blockieren. Dazu sollten zum Beispiel momentan noch nicht genutzte JavaScripts aufgeschoben werden. Denn solange der Browser ein JavaScript herunterlädt, parst, kompiliert und ausführt ist das Rendern der entsprechenden Seite unterbrochen.
Eine weitere Möglichkeit zur Optimierung besteht im Unterteilen eines einzelnen großen JavaScripts in mehrere kleine, sodass jeweils nur das Script geladen werden muss, das gerade wirklich benötigt wird. Der Vorteil ist dann also, dass es keine riesige Datei mehr gibt, die den Main Thread sehr lange blockiert. Es wird stattdessen nur sehr wenig JavaScript-Code initial geladen und weitere kleine Scripts folgen auf Anfrage. Übrigens gilt für Google jede JavaScript-Ausführung über 50 ms als sogenannter „Long Task“. Ziel sollte es sein, vor allem Long Tasks zu eliminieren.
Außerdem sollten alle Scripts komprimiert werden. Dazu eignet sich beispielsweise das Tool Terser. Es sorgt dafür, dass ein Script um alle Zeichen reduziert wird, die vom Browser nicht zum Lesen benötigt werden (Einrückungen, Kommentare, Abstände, lange Variablennamen und Ähnliches).
Lange Wartezeiten sind aber nicht die einzigen Faktoren, die das Nutzererlebnis auf einer Website maßgeblich beeinträchtigen. Auch das oben beschriebene Verschieben von Elementen während des Seitenaufbaus wird als sehr frustrierend empfunden.
Cumulative Layout Shift optimieren
Besonders bei Seiten mit langen Ladezeiten kann sich das versehentliche Klicken auf ein Element, das gerade erst das eigentlich anvisierte Element an der Stelle verdrängt hat, extrem negativ auf die Nutzererfahrung auswirken. Zur Verhinderung solcher Verschiebungen gibt es ebenfalls eine Reihe von Optimierungsansätzen.
Eine der häufigsten Ursachen für Layout Shift ist die fehlende Dimensionsvorgabe für Bilder und Ads (es fehlen Angaben zu “width” und “height” im Quellcode). Der auf der Seite zur Verfügung stehende Platz ist oft viel zu klein für das Bild in seinen Originalabmessungen. Dieses wird später geladen als andere Elemente (etwa Text) und nimmt dann viel mehr Platz ein, als dafür reserviert war. In der Folge verschieben sich der Text und/oder weitere Elemente.
Sind Bilder in ihren Dimensionen dagegen bereits vor dem vollständigen Laden definiert, ist sichergestellt, dass genau der notwendige Platz für sie bereitsteht und sie somit keine Verschiebung anderer Elemente bewirken. Abbildung 9 zeigt, wie sich die Dimensionierung eines Bildes auf den Cumulative Layout Shift auswirkt.
Die Auswirkung der Dimensionierung von Bildern auf den Cumulative Layout Shift
Der Lösungsansatz für Ads oder eingebettete Inhalte wie YouTube-Videos, Social-Media-Posts und Ähnliches mehr ist dem Prinzip nach identisch mit jenem für Bilder.
Da die meisten Ad Networks allerdings dynamische Abmessungen für ihre Ads verwenden, ist die Vorgehensweise hier etwas anders. Dem Element sollte von vornherein ein geeigneter Platz reserviert werden. Es kann allerdings passieren, dass die Anzeige kleiner ausgespielt wird, als der reservierte Platz dafür dimensioniert ist. Dies kann zu ungenutztem Raum führen, was jedoch für einen besseren Cumulative Layout Shift in Kauf genommen werden kann. Das ist zwar nicht optimal – aber dennoch optimiert.
Auch für Embedded Content wie YouTube-Videos oder Social-Media-Posts sollten stets Platzhalter integriert werden.
Google Web Vitals als weiterer Rankingfaktor für die Page Experience
In Form der Web Vitals stehen Google nun noch einmal mehr Metriken dafür zur Verfügung, die Nutzerfreundlichkeit einer Seite messen und bewerten zu können. Deswegen dürfte die Page Experience 2021 zu einem bedeutenden Rankingfaktor werden.
Aber nicht nur eine Optimierung auf die neuen Google Web Vitals wird zu einem guten Page Experience Ranking führen. Bewährte Maßnahmen wie Mobile-Optimierung, Nutzung von HTTPS, Safe-Browsing-Features sowie ein Verzicht auf Pop-ups und Spam-Werbung tragen auch zukünftig zu einer guten Nutzererfahrung auf einer Seite bei und werden dementsprechend als Page Experience Signals berücksichtigt werden (Abbildung 10).
Page Experience als wichtiger Rankingfaktor
Die meisten der Page Experience Signals sind alles andere als neu und werden von kompetenten Webmastern bereits heute berücksichtigt. Die neuen Google Web Vitals werden die Suchmaschinenoptimierung also keinesfalls auf den Kopf stellen. Stattdessen sind Unternehmen mit optimierten Internetseiten, die schon jetzt auf Nutzerfreundlichkeit ausgelegt sind, bestens aufgestellt. An den grundsätzlichen Anforderungen an eine Website wird sich schließlich nichts ändern: einen Nutzer bestmöglich zufriedenzustellen und ihm das zu bieten, wonach er gesucht beziehungsweise was er sich gewünscht hat. Idealerweise wurde und wird eine solche gute Page Experience dann mit einer Conversion belohnt – sei es ein Kauf, eine Registrierung oder ein Download.
Dank der neuen Google-Metriken werden aber wahrscheinlich viele SEOs und Webmaster noch mehr für die Page Experience sensibilisiert und besinnen sich darauf, dass ihre Optimierungen nicht in erster Linie für eine Maschine, sondern für ihre Nutzer vorgenommen werden.
