Es ist längst kein Industriegeheimnis mehr, dass Google verschiedene Faktoren für das Ranking von Webseiten in ihrer Suche einsetzt und einer davon die Geschwindigkeit der jeweiligen Webseite ist. Doch was genau bedeutet es eigentlich, wenn man über die Geschwindigkeit einer Webseite, oder auch den "PageSpeed" dieser, spricht? In diesem Field Guide möchten wir Ihnen einen Einblick in die Web Vitals von Google geben, wie diese zum Ranking in der Suche beitragen und in welchem Maß und auch erste Tipps zur Optimierung der Web Vitals Ihrer Webseite mit auf den Weg geben.
Um die Core Web Vitals optimieren zu können, muss man erst einmal verstehen, worum es sich dabei eigentlich genau handelt. Zunächst: Oft werden "Web Vitals" und "Core Web Vitals" synonym verwendet, teilweise auch in Fachartikeln. Ganz korrekt ist dies jedoch nicht – bei den Core Web Vitals handelt es sich um eine Teilmenge der Web Vitals. Die Core Web Vitals bestehen aus nur drei Metriken der eigentlichen Web Vitals, welche laut Google für jede Webseite gemessen und optimiert werden sollten. Im weiteren Verlauf dieses Artikels werden wir uns daher selbstverständlich mit diesen Messwerten auseinandersetzen, jedoch auch mit anderen Daten der breiteren Web Vitals, die unserer Ansicht nach mindestens genauso wichtig sind.
Aber zurück zum Ursprung: Bereits seit einiger Zeit stand Google in Verdacht, die Ladegeschwindigkeit einer Webseite als Rankingfaktor zu nehmen. Im Jahr 2021 hat Google dann ein Update für ihren Rankingalgorithmus heraus gebracht, in welchem erstmals ganz offiziell von solch einem Faktor die Rede war. Google wollte fortan die Seiten nach "Web Vitals" ranken. Eine Menge an vordefinierten Messwerten, welche die Geschwindigkeit und im engeren Sinn auch die Bedienbarkeit einer jeden Webseite messen, gewichten und auswerten können.
Das Prinzip ist einfach zu verstehen: Google hat ein bestimmtes Bild davon, wie eine Webseite aufgebaut zu sein hat. Allerdings können sie den Inhalt und den Aufbau der Webseiten, die in der Suche angezeigt werden, nicht beeinflussen. Sehr wohl aber die Reihenfolge, in welcher sie angezeigt werden. Wenn Sie also planen, auf einen der Topränge in der Google-Suche für ein heißes Keyword zu kommen, werden Sie an der Optimierung Ihrer Web Vitals nicht vorbei kommen.
In diesem Artikel werden wir uns hauptsächlich mit den nachfolgenden Web Vitals auseinander setzen:
Es gibt innerhalb der Obermenge Web Vitals noch einige Messwerte mehr, welche jedoch einen kleineren Einfluss auf den Score haben, oder aber sehr selten zu Problemen führen, weshalb wir uns in diesem Artikel nur auf die oberen vier (bzw. fünf) Metriken beschränken werden.
Die obigen Messwerte und ihr Gewicht innerhalb der Berechnung des Performance-Scores sind nicht in Stein gemeißelt. Google aktualisiert ihre Algorithmen regelmäßig, und so auch die (Core) Web Vitals. Dadurch können sich auch die benötigten Optimierungen immer wieder ändern. Wenn Sie daher nicht gerade SEO hauptberuflich ausführen, kann es schwierig sein, aktuell zu bleiben. Eine Digitalagentur, welche sich mit Core Web Vitals tiefgreifend auseinandergesetzt hat, kann Ihre Webseite nachhaltig optimieren. Bei Kuatsu haben wir bereits viel Zeit in die Optimierung von Kundenprojekten als auch unserer eigenen Webseite (mehr dazu gleich!) investiert. Falls Sie also Ihre Zeit lieber in das Voranbringen Ihres Unternehmens stecken und das Optimieren der Core Web Vitals einem professionellen Anbieter überlassen möchten, sprechen Sie uns gerne an - wir haben hierfür eine Seite mit weiteren Infos zur professionellen Core Web Vitals Optimierung eingerichtet, auf der wir erklären, wie wir Ihnen helfen können.
Darüber hinaus sollten Sie beachten, dass Google die Web Vitals immer doppelt berechnet: Einmal für Mobilgeräte und einmal für Desktops. Die Desktop-Scores liegen im Prinzip immer höher als die Mobile-Scores, da Google bei der Berechnung letzterer auch eine künstliche Drosselung der Netzwerkgeschwindigkeit auf langsames 4G- oder gar 3G-Niveau vornimmt. Dabei sind die Mobile Scores eigentlich wichtiger als die Desktop Scores: Weltweit kommen laut einer Datenerhebung von StatCounter bereits mehr als 57% aller Seitenaufrufe von Mobilgeräten – Tendenz steigend. Die Optimierung Ihrer Webseite sollte daher stets primär auf Mobilgeräte ausgerichtet sein. Auf einem grünen Desktop-Score sollten Sie sich daher nicht zwangsweise ausruhen.
Bevor es an die Optimierung geht, sollte man natürlich erstmal den Status quo analysieren um zu sehen, wo Optimierungen gerade am meisten benötigt werden. Dabei führen mehrere Wege nach Rom.
Der einfachste Weg, an den Performance-Score der eigenen Webseite zu kommen, führt über die Google PageSpeed Insights. Hier muss nur die URL zur zu prüfenden Seite eingegeben werden, und die Server von Google übernehmen die Messung. Hierbei gilt es jedoch zu beachten, dass bei der Messung über die PageSpeed Insights nicht nur die aktuelle Messung in einer kontrollierten Umgebung ("Lab Data") in den Score mit einfließt, sondern auch "Field Data". Google bezieht hier also die Erfahrungen von echten Nutzern mit ein, welche Ihre Webseite aufgerufen haben (beispielsweise über Google Chrome). Die Web Vitals lassen sich daher auch nicht austricksen, indem man bei einer kontrollierten Messung einfach sämtliche Bilder und Skripte entfernt. Google bezieht die Daten für die Scores auch von echten Sitzungen.
Auch sollten Sie beachten, dass bei einer Messung über die PageSpeed Insights gegebenenfalls auch Ihr Serverstandort eine entscheidende Rolle spielt. Da die Messung über Googles Server erfolgt, kann es sein, dass erst eine sehr lange Verbindung zu Ihrem Server aufgebaut werden muss, was einige Scores natürlich katastrophal in den Keller ziehen kann. PageSpeed Insights misst von einem aus vier verschiedenen Standorten, basierend auf Ihrem aktuellen Standort:
Die Abdeckung ist daher nicht schlecht, aber wenn Ihr Server beispielsweise in Australien steht, kann die Verbindung durchaus einige Zeit in Anspruch nehmen. Selbst aus den Niederlandern zu einem Rechenzentrum in Frankfurt vergeht bereits einige Zeit.
Sie sehen also: Sie sollten sich nicht nur auf die PageSpeed Insights verlassen, da die Messung darüber nicht unbedingt die Erfahrungen echter Nutzer widerspiegelt.
Lighthouse ist ein Open-Source Tool, welches direkt von Google bereitstellt wird, und neben den Web Vitals auch zahlreiche andere wichtige Metriken zu Ihrer Webseite erfasst, unter anderem die Barrierefreiheit oder On-Page SEO. Lighthouse läuft lokal auf Ihrem Rechner, simuliert jedoch eine kontrollierte Umgebung, in welcher die Messwerte genau genommen werden können. Das Beste daran: Oftmals müssen Sie dafür nicht einmal zusätzliche Software herunterladen, zumindest wenn Sie als Browser Google Chrome verwenden. Lighthouse ist direkt in den "Chrome Dev Tools" integriert, welche Sie per Rechtsklick, einem Klick auf "Untersuchen" im Kontextmenü und der anschließenden Auswahl von "Lighthouse" innerhalb der oberen Toolleiste aufrufen können.
Als Beispiel einmal eine Mobile Performance-Messung unserer Webseite mittels Lighthouse über die Dev Tools:
Es gibt noch einige andere Wege, die Web Vitals zu messen, unter anderem über die Google Search Console. Diese richten sich aber eher an erfahrene SEOs. Für Anfänger, die die Performance der eigenen Webseite einschätzen wollen, eignen sich am besten die oben genannten PageSpeed Insights und Lighthouse.
Der Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte inhaltliche Element innerhalb des initialen Viewports (also der Bereich, den der Nutzer bei Seitenaufruf sieht) fertig dargestellt ist. Das können beispielsweise große Banner-Bilder sein, große Textblöcke, Videos, Buttons, aber auch eher unscheinbare Elemente. Das größte, inhaltliche Element auf unserer neuen Webseite ist laut Google beispielsweise das Logo im Navigationsbereich. Aber keine Sorge: Um das jeweilige Element zu finden, ist keine große Schnitzeljagd von Nöten. Sowohl PageSpeed Insights als auch Lighthouse zeigen Ihnen das Element mittels einem Klick auf "LCP" direkt an.
Google hat, wie bei jeder Metrik in den Web Vitals, sehr genaue Vorstellungen davon, wie schnell das Laden dieses Elements vonstatten zu gehen hat. Ein guter LCP ist demnach eine Ladezeit von unter 2,5 Sekunden, während alles über 4 Sekunden sehr schlecht ist und damit starken Handlungsbedarf hat. Alles dazwischen ist zwar in Ordnung, aber immer noch verbesserungswürdig. Und hinsichtlich der Gewichtung von 25% dieses Messwerts im Performance-Score sehen wir persönlich generell für alle Werte über 2,5 Sekunden einen dringenden Optimierungsbedarf.
Eine grundlegende Optimierung des LCP ist Gott sei Dank relativ einfach erledigt. Manchmal sind jedoch noch mehr tiefgreifende Optimierungen notwendig, um einen wirklich guten LCP-Wert zu erhalten. Die gängigsten Methoden zur Optimierung findest du aber hier in unserer Checkliste:
async
und defer
nach hinten zu verschieben. Während JavaScript oder CSS in den Browser geladen wird, kann das Document Object Model (DOM), in welches die eigentliche HTML-Struktur Ihrer Webseite, und damit auch das LCP-Element, geladen wird, nicht weiter ausgebaut werden.Der Cumulative Layout Shift (CLS) misst, vereinfacht gesagt, die visuelle Stabilität Ihrer Webseite während des Ladevorgangs. Um noch einmal das Beispiel von oben aufzugreifen: Stellen Sie sich einen Button vor, den Sie noch während des Ladevorgangs drücken möchten, der aber immer wieder seine Position ändert. Nervenaufreibend, nicht? Genau das soll mit einer Optimierung des CLS verhindert werden. Die CLS-Metrik spricht daher in erster Linie für eine gute Usability der Webseite. Kein Nutzer möchte versehentlich auf den Button klicken, der ihn zum Abschluss eines Jahres-Abos führt, wenn er eigentlich nur eine Ausgabe einer Zeitschrift erwerben wollte.
Wie aber lässt sich diese Layout-Verschiebung in einen vergleichbaren Wert packen? Für Google ist dieser Wert das Produkt aus der sogenannten Impact Fraction und der Distance Fraction. Die Impact Fraction sagt aus, wie stark ein instabiles Element des Layouts den Viewport zwischen zwei Frames beeinflusst. Wie bitte? Nochmal anhand eines Beispiels: Stellen Sie sich ein Element vor, das bei Seitenaufruf 50% der Viewport-Höhe einnimmt. Durch ein instabiles Layout wird es jedoch plötzlich um 25% nach unten verschoben. Damit hat das Element nun eine Impact Fraction von 75% (also 0,75). Die Distance Fraction ist im Prinzip der bewegliche Anteil der Impact Fraction. In unserem Beispiel läge die Distance Fraction bei 25%, da sich das Element um diesen Wert verschoben hat.
Besteht der CLS nur aus diesem Element, hätten wir also eine gesamte Impact Fraction von 0,75 und eine Distance Fraction von 0,25, was multipliziert miteinander einen CLS von 0,1875 ergibt. Dieser Score wäre laut Google ausbaufähig. Nur ein Score bis maximal 0,1 gilt als gut, alles über 0,25 als schlecht.
Nachdem wir die technischen Feinheiten geklärt haben, ist nun die Frage, wie wir diese Layout-Verschiebungen am besten verhindern können.
Der First Contentful Paint (FCP) ist eng verwandt mit dem LCP und misst, wann das erste inhaltliche Element auf der Webseite angezeigt wird. Bis zum FCP ist die Webseite daher weiß und für den Nutzer unbrauchbar. Der FCP sollte selbstverständlich weit früher als der LCP sein. Google gibt einen Wert von unter 1,8 Sekunden als gut an, während alles über 3 Sekunden schlecht ist.
Bei der Optimierung des FCP kommen viele Faktoren zusammen, welche teilweise auch direkte (positive) Auswirkungen auf die anderen Metriken haben.
Der FCP hängt naturgemäß stark davon ab, wie lang der Server benötigt, um das erste Byte an den Nutzer zu senden. Dieser Zeitraum wird auch Time To First Byte, oder auch TTFB genannt. Hierzu zählen Dinge wie die DNS-Anfrage, welche den Hostnamen (z.B. kuatsu.dev) in die IP-Adresse des Servers auflöst, oder auch SSL-Handshakes. All dies hat aber eine Sache gemeinsam: Sie sind Sache des Servers und können nur optimiert werden, indem der Server optimiert wird. Große, unübersichtliche Datenbanken können ein Grund für einen langen TTFB sein, oder auch schlechte Webserver-Konfigurationen. Die beste Konfiguration nützt jedoch nichts, wenn der Hosting-Provider schlichtweg nicht gut genug ist oder die Webseite von einem einzigen Server am anderen Ende der Welt im Vergleich zum Nutzer bereitgestellt wird. In der Checkliste für die FCP-Optimierung finden Sie auch einige Punkte, die direkt mit dem TTFB zusammenhängen.
Wir haben nun also erkannt, dass der FCP einer der wichtigsten Einflüsse auf die Nutzerzufriedenheit ist. Doch wie optimieren wie diesen Messwert? Hierzu gibt es unzählige Möglichkeiten, wovon Google zahlreiche in ihrem eigenen Blog-Eintrag vorstellt. Wir widmen uns einigen von diesen in unserer Checkliste.
Bitte beachten Sie, dass sich einige der zuvor genannten Optimierungsmöglichkeiten, vor allem im Bereich des Largest Contentful Paint (LCP), mit jenen des FCP überschneiden, und wir diese deshalb hier nicht noch einmal aufzählen.
Der First Input Delay (FID) steht für die Zeit, die es benötigt, bis ein Nutzer auf Ihrer Webseite interaktiv eine Aktion ausführen kann. Klickt ein Nutzer also während des Ladevorgangs auf einen Button, dauert es diesen Zeitraum, bis eine Reaktion entsteht. Auch hier gibt Google Referenzwerte vor: Eine Zeit von unter 100ms gilt als gut, alles über 300ms hingegen als schlecht.
Der First Input Delay kann sich als besonders knifflig bzw. technisch zu optimieren herausstellen. Oft ist es hier so, dass nur eine detaillierte Bestandsaufnahme der aktuellen Webseite und eine tiefgreifende, technische Optimierung einen schlechten FID beheben können. Hier sind jedoch einige Maßnahmen, die vorgenommen werden können:
async
oder defer
Attribute im script
-Tag nutzen.Seit Juli 2021 sind die Core Web Vitals offizieller Bestandteil des Google Rankings und wurden spätestens dann zur Hausaufgabe eines jeden ernstzunehmenden SEOs. Doch nicht nur für eine gute Aufstellung in der Google-Suche sollten Sie diesen Messwerten Beachtung schenken: Am Ende stellen sie gute Metriken da, um die echte Bedienbarkeit und Nutzerfreundlichkeit Ihrer Webseite zu messen und zu vergleichen. Eine Digitalagentur, die sich auf die Optimierung der Web Vitals spezialisiert hat, kann daher nicht nur das Google Ranking verbessern, sondern auch für einen echten Mehrwert bei den Nutzern sorgen. Wenn Sie die Optimierung für zu technisch empfinden, oder aber einfach nicht mehr weiter voran kommen in Ihren Optimierungen, wenden Sie sich an uns.