Scroll
20 April 2021
Seit langem wird es angekündigt und es rückt immer näher: das Page Experience Update von Google. Mit im Gepäck hat es drei neue Kennzahlen, Core Web Vitals genannt. Nach Googles neusten Angaben werden sie ab Mitte Juni 2021 offiziell Teil der über 200 Rankingfaktoren für die mobile Suche. „Core Web...Was?“, fragst Du Dich? Keine Panik! Wir erzählen Dir hier alles, was Du über die Kennzahlen wissen musst: angefangen mit einer einfachen Erklärung (ganz ohne Fachchinesisch) bis zu praktischen Tipps, wie Du Deine Seite optimal auf das Update vorbereiten kannst. Husch husch, ran an den Lesestoff!
Übersicht:
Easy erklärt: Was sind die Core Web Vitals?
Time to check – Wie Du die Core Web Vitals für Deine Website prüfst
Wie wichtig ist das Ganze jetzt? – unsere Einschätzung
Heiße Tipps für die Optimierung der Core Web Vitals
Optimierungsmöglichkeiten für den LCP
Optimierungsmöglichkeiten für den FID
Optimierungsmöglichkeiten für den CLS
Easy erklärt: Was sind die Core Web Vitals?
Bei den Core Web Vitals handelt es sich um Kennzahlen, die es ermöglichen sollen, die Nutzererfahrung (User Experience oder kurz UX) einer Webseite zu untersuchen und mithilfe von konkreten Ziffern einheitlich zu bewerten. Denn obwohl die Nutzererfahrung bereits seit Jahren fester Bestandteil des Rankings ist, war sie bislang nur schwer greifbar – schließlich gab es keine messbaren KPIs. Einzig die Mobilfreundlichkeit, sicheres Browsen, HTTPS und keine aufdringlichen Interstitials (bspw. Pop-ups mit Werbung) waren als offizielle Faktoren für die Einschätzung der User Experience seitens Googles bekannt. Das ändert sich nun mit den Core Web Vitals. Sie geben Seitenbetreibern und SEOs Aufschluss über die Leistung des Ladevorgangs (Largest Contentful Paint), die Interaktivität (First Input Delay) sowie die visuelle Stabilität (Cumulative Layout Shift) einer Seite. Doch lass uns die drei Kennzahlen jeweils im Detail betrachten.
Largest Contentful Paint
Die Kennzahl Largest Contentful Paint – kurz LCP – bezieht sich auf die Ladezeit des Hauptcontents. Genauer gesagt handelt es sich um den Zeitraum vom Beginn des Ladevorgangs einer Seite bis zu dem Punkt, an dem das größte Element im Browser zu sehen ist.
Warum ist diese Messgröße nun überhaupt wichtig? Der Grund liegt auf der Hand: User wollen nicht stundenlang darauf warten, bis der Inhalt der besuchten Webseite geladen ist und sie ihn anschauen können. Eine lange Ladezeit des Hauptcontents führt dazu, dass sie sehr wahrscheinlich unzufrieden mit der Seite sind – sie eventuell sogar direkt wieder verlassen. Wie schnell der Ladevorgang wahrgenommen wird, ist also ein wichtiges Signal für die User Experience. In Googles Augen sollte das Laden des Hauptelements idealerweise nach 2,5 Sekunden abgeschlossen sein. Alles darüber sollte optimiert werden.
First Input Delay
Die zweite Kennzahl nennt sich First Input Delay (FID). Dieser Name mag zunächst ziemlich kryptisch klingen, doch die Größe lässt sich ganz leicht erklären. Es handelt sich schlichtweg um den Zeitraum zwischen der ersten Interaktion eines Users mit der Seite (bspw. wenn er auf einen Button klickt) bis tatsächlich etwas passiert und die gewünschte Aktion ausgeführt wird – sprich der Browser auf die Anfrage reagiert.
Um die Bedeutung des FID noch besser verstehen zu können, stell Dir einmal folgendes Szenario vor: Du suchst online nach einem Friseursalon in Deiner Nähe, klickst auf eines der Suchergebnisse und landest auf der Website des Friseurs. Da siehst Du direkt einen Button, hinter dem sich der Terminkalender verbergen soll. Du freust Dich über das praktische Feature und klickst sofort darauf, doch dann passiert erst einmal nichts. Du wartest und wartest – bis sich der Terminkalender für die Buchung endlich öffnet. Wärst Du happy? Nein, vermutlich wärst Du eher genervt. Und genau deshalb ist es wichtig, dass Deine Webseite möglichst schnell auf die Interaktionen von Besuchern reagiert und so eine positive Nutzererfahrung bietet. Optimal ist ein FID-Wert unter 100 Millisekunden.
Cumulative Layout Shift
Last but not least möchten wir Dir die Kennzahl zur Stabilität des Seitenlayouts – den Cumulative Layout Shift (CLS) – vorstellen. Dieser sagt aus, ob bzw. wie stark sich einzelne Elemente beim Laden der Webseite verschieben.
„Ist doch halb so wild, wenn das passiert“, denkst Du Dir? Da können wir Dir ganz klar sagen: Doch ist es wild, denn die User Experience kann erheblich unter starken, unerwarteten Layoutverschiebungen leiden! Möchte ein Webseitenbesucher etwa auf einen Button oder einen Link klicken, erwischt jedoch durch eine plötzliche Verschiebung der Elemente stattdessen die darüberliegende Anzeige, wird er das als äußerst störend empfinden. Du siehst also: Der CLS sollte so gering wie möglich sein, um dem User eine angenehme Seite zu bieten. Im Klartext heißt dies, dass ein CLS-Wert von max. 0,1 angestrebt werden sollte. In diesem Artikel aus dem Google Web Developer Blog findest Du eine detaillierte Beschreibung, wie sich der Wert genau zusammensetzt.
Time to check – Wie Du die Core Web Vitals für Deine Website prüfst
Falls Du jetzt denkst, Du musst Dich mit Stoppuhr und Maßband vor den Bildschirm hocken, können wir Dich beruhigen. Google stellt Dir verschiedene Tools zur Verfügung, mit denen Du die Werte für Deine Website kinderleicht herausfinden kannst:
- Bericht zum Verhalten von Seiten: Dieser neue Bericht in der Search Console bietet Dir die Möglichkeit, alle Signale zur Nutzererfahrung zentral zu überprüfen und zu überwachen – von der Mobilfreundlichkeit bis zu den Core Web Vitals. Mit nur einem Blick kannst Du sehen, wie viele Deiner URLs eine gute Page Experience aufweisen.
- PageSpeed Insights: Dort findest Du – falls genügend Daten für Deine Website vorhanden sind – zum einen die Übersicht mit echten Nutzerdaten zu den Core Web Vitals. Zum anderen kannst Du die Labdaten zur Leistung der überprüften URL, die mittels Lighthouse live erfasst werden, analysieren. Da für den FID Labormessungen nicht bzw. nur schwer möglich sind, wird kein Laborwert für diese Kennzahl angezeigt.
- Chrome UX Report: Als öffentlicher Datensatz bietet der Chrome User Experience Report (CrUX) Felddaten zur Nutzererfahrung von Millionen von Websites – Metriken zu den Core Web Vitals eingeschlossen.
- Chrome DevTools & Lighthouse: Die Chrome-Entwicklertools findest Du im gleichnamigen Browser (Shift+Control+J) und kannst über den Reiter „Lighthouse“ die Laborwerte für die Leistung der geöffneten Seite unter die Lupe nehmen. Auch hier werden keine Werte zum FID angegeben, da Labormessungen nicht möglich sind.
- Web Vitals Extension: Mit dieser Erweiterung bekommst Du die gemessenen Werte zu den Core Web Vitals, die zur Berechnung der Felddaten des Chrome UX Reports übermittelt werden, direkt beim Aufrufen von URLs im Browserfenster angezeigt.
Mithilfe der oben genannten Tools erhältst Du nicht nur Einblick in die genauen Messwerte, sondern durch das verwendete Ampelsystem ebenso einen direkten Überblick, ob und für welche Kennzahlen noch Verbesserungsbedarf besteht. Gerade rot markierten Größen solltest Du Deine Aufmerksamkeit schenken und mögliche Fehler beheben. Aber es ist nicht nur interessant, die Stärken und Schwächen der eigenen Website bzgl. der Nutzererfahrung zu kennen. Die Konkurrenz lässt sich mit Tools wie den PageSpeed Insights oder der Web Vitals Extension ebenfalls durchleuchten. So kannst Du die Leistung Deiner Website leicht vergleichen und ermitteln, ob Dir Deine Wettbewerber in diesem Bereich bereits einen Schritt voraus sind oder Du die Nase vorn hast.
Wie wichtig ist das Ganze jetzt? – Unsere Einschätzung
Inwiefern sich die neuen Metriken nun konkret auf das Ranking auswirken, können auch wir nur abwarten – es bleibt also spannend. Allerdings hat Google das Update lange im Voraus angekündigt, die neuen Metriken zur Nutzererfahrung als offiziellen Rankingfaktor bestätigt und stellt umfangreiche Informationsmaterialien zur Verfügung. Daher scheint es unwahrscheinlich, dass die Kennzahlen bloß hübsch anzusehen sind und keine Rolle spielen werden. Dennoch wird hochwertiger und vor allem relevanter Content für den Erfolg Deiner Seite nach wie vor essenziell sein und die Nutzererfahrung nur ein Rankingfaktor von vielen sein. Die Core Web Vitals allein werden somit weder bei schlechten Inhalten und mangelhafter SEO für Top-Platzierung in den Suchergebnissen sorgen, noch zu dramatischen Rankingverlusten einer sonst einwandfreien Seite führen. Sieh die neuen Metriken eher als Chance, zusätzlich zu punkten und Dein Ranking so ggf. etwas zu boosten.
Das Ziel von Google scheint recht klar: Das Unternehmen will Seitenbetreiber und SEOs dazu animieren, (insbesondere mobil) für eine gute User Experience zu sorgen. Und die Core Web Vitals – mit ihren konkreten Zahlen und der einfach zu interpretierenden Einstufungen von gut bis schlecht in Verbindung mit warnenden Ampelfarben – sollen ein attraktiver Anreiz dazu sein. Denn noch immer wird bei vielen Websites UX nicht großgeschrieben, was die aktuellen Zahlen aus dem Chrome User Experience Report für März verdeutlichen: Lediglich 24,81 % der Domains weisen gute Werte für alle drei Metriken der Core Web Vitals auf. Wie es scheint, ist bei vielen Websites in Sachen UX noch eine Menge Luft nach oben. Das will Google ändern. Deswegen wird der Suchmaschinenriese vermutlich auch in Zukunft die Nutzererfahrung weiter in das Ranking miteinbeziehen und ihre Berechnung immer wieder anpassen.
Solltest Du nun alles stehen und liegen lassen, um Dich um die Core Web Vitals für Deine Website zu kümmern? Zunächst einmal keine Panik! Das Update wird allmählich über mehrere Wochen ausgerollt, sodass die Core Web Vitals nach Googles Angaben erst im August ihre volle Wirkung als Rankingfaktor haben werden. Und selbst wenn Deine Werte bis dahin nicht alle im grünen Bereich liegen, wird die Welt nicht mit dem Update untergehen. Du solltest abhängig von Deiner individuellen Ausgangssituation entscheiden, ob sich der Aufwand der Optimierung für Dich lohnt. Vielleicht gibt es bei Deiner Website Low Hanging Fruits – sprich Punkte, die sich leicht verbessern lassen und eine große Wirkung erzielen. Bedenke in jedem Fall, dass Du mit einer guten User Experience einen Vorteil gegenüber Deinen Wettbewerbern rausschlagen kannst. Aus diesem Grund solltest Du Dich über kurz oder lang auf jeden Fall mit dem Thema UX und dazugehörigen Metriken beschäftigen. Schlussendlich möchtest Du Dich ja nicht von Deiner Konkurrenz abhängen lassen und die bestmögliche Seite für Suchmaschinen und User gestalten.
Heiße Tipps für die Optimierung der Core Web Vitals
Klar ist: Ohne Deine Website zu kennen, können wir nur schwer sagen, wo es hinsichtlich der Core Web Vitals wirklich bei Dir zwickt. Wir lassen Dich aber dennoch nicht im Regen stehen, sondern versorgen Dich mit hilfreichen Tipps, welche Stellschrauben es grundsätzlich für die Optimierung gibt.
Ein guter Anlaufpunkt, um ein erstes Bild von möglichen Problemen und Optimierungspunkten zu bekommen, ist das bereits vorgestellte PageSpeed Insights Tool. Darüber kannst Du die Laborwerte jeder einzelnen Seite Deiner Domain testen und erhältst Empfehlungen, wie Du die Leistung verbessern kannst. In den meisten Fällen wirst Du jedoch ohne eigene Programmierkenntnisse das Fachwissen eines Webentwicklers benötigen, wenn Du kritische Punkte in Bezug auf die Core Web Vitals aufdecken und beheben willst. Wir helfen Dir hier gerne weiter 😉!
Optimierungsmöglichkeiten für den LCP
Wenn der Largest Contenful Paint Deiner Seite in die Höhe schießt und der Wert im alarmierendem Rot aufleuchtet, heißt es erst einmal Ruhe bewahren und nach den Ursachen forschen! In diesem Artikel nennt Google folgende Punkte, die Du Dir dazu vorknöpfen solltest:
- Langsame Antwortzeit des Servers: Muss der Browser lange auf eine Antwort des Servers warten, dauert es entsprechend, bis er den Code auslesen kann. Daher solltest Du auf eine möglichst schnelle Antwortzeit abzielen.
- Blockieren des Renderns durch JavaScript & CSS: Vor dem Rendern Deiner Seite liest der Browser das HTML-Markup der Seite aus. Stößt er dabei auf externe Stylesheets oder Skripte, wird dieser Vorgang unterbrochen. Das wiederum hat eine Verzögerung des LCP zur Folge, weshalb Du das CSS und JavaScript nach Möglichkeit verkleinern oder verschieben solltest.
- Langsame Ladezeiten der Ressourcen: Müssen Elemente wie Bilder oder Videos im direkt sichtbaren Bereich geladen werden, kann das den LCP negativ beeinflussen. Um dem entgegenzuwirken, kannst Du bspw. Bilder komprimieren.
- Client-Side Rendering: Wird Deine Seite direkt im Browser gerendert und muss große JavaScript-Dateien laden, kann das zu einem Anstieg des LCP führen. In diesem Fall solltest Du die Menge an JavaScript möglichst minimieren oder über serverseitiges Rendering bzw. Pre-Rendering nachdenken.
Optimierungsmöglichkeiten für den FID
Deine Besucher müssen lange warten, bis Deine Seite auf ihre Interaktion reagiert? Meist liegt die Ursache hierfür bei einer massiven Ausführung von JavaScript im Hauptthread. Deshalb kann es bspw. helfen, die Ausführungszeit des JavaScripts zu reduzieren oder lange Aufgaben in kleinere aufzubrechen. Weiterführende Infos hierzu findest Du in diesem Artikel von Google.
Optimierungsmöglichkeiten für den CLS
Das Layout Deiner Seite verschiebt sich beim Laden und verärgert damit Besucher? Google führt hier übliche Gründe auf, die Du unbedingt überprüfen und ins Lot bringen solltest:
- Fehlende Dimensionen bei Bildern: Bilder sollten immer eine Angabe zur Größe – sprich der Höhe und Breite – enthalten. Alternativ kannst Du auch sogenannte CSS Aspect Ratio Boxes verwenden, die den Platz für das Bild reservieren.
- Fehlende Dimensionen bei Ads & Video-Einbettungen: Auch bei Anzeigen oder eingebetteten Videos sollte das Größenverhältnis hinterlegt werden. Gerade Werbebanner, die über dem Hauptcontent ausgespielt werden, können beim Laden schnell zur Verschiebung des nachfolgenden Contents führen und zu einem kritischen Punkt für den CLS werden.
- Dynamische Inhalte: Beim Laden der Seite sollte der neue Content nicht die bereits vorhanden Inhalte ersetzen, solange dies nicht durch eine Userinteraktion bewusst ausgelöst wird.
- Probleme durch Web Fonts: Web Fonts können ebenfalls zu einem schlechten CLS-Wert führen – entweder indem die Fallback-Schriftart mit der neuen Schriftart ausgetauscht wird oder wenn der Text unsichtbar ist, bis die tatsächliche Schriftart gerendert wurde. Willst Du das vermeiden, kannst Du bspw. auf die Font Loading API zurückgreifen, welche die Zeit bis zum Laden der benötigten Schriftart verkürzt.
- Animationen: Bei Animationen solltest Du die transform-Property nutzen, um ungewollte Layout-Veränderungen zu umgehen.
Nun steht Dir nichts mehr im Weg, um Deine Website für das kommende Google-Update fit zu machen und in Sachen UX zu glänzen. Falls Du noch Hilfe bei der Optimierung Deiner Werte oder anderen Maßnahmen zur Suchmaschinenoptimierung benötigst, haben wir natürlich immer ein offenes Ohr für Dich – melde Dich gerne bei uns!
Bildmaterial: kaboompics - Pixabay // Piscine - Adobe Stock // Myriam Jessier - unsplash.com