Core Web Vitals – Bereite dich auf die neuen SEO Faktoren vor

Autor: Markus Szymanski

 

Seit Beginn der Corona-Pandemie wurden sie mehrfach vertagt, ab Mitte Juni 2021 ist es soweit: Google führt die Core Web Vitals ein, um zukünftig die Nutzerfreundlichkeit von Websiten zu bewerten. 

Laut einer Google Core Web Vitals Studie (April 2021) von Searchmetrics, sind es lediglich 3 Prozent der deutschen Websites, welche beim neuen Update „gut" abschneiden. Der Rest der untersuchten URLs schneidet in mindestens einer der Messkriterien mit „verbesserungswürdig" oder „schlecht" ab. Doch wie prüfst du als Onlinehändler:in, ob und wie sich die Platzierung deiner Seite in den SERPs verändert hat?

In diesem Beitrag zeigen wir dir, wie du Kennzahlen auswertest und welche Auswirkungen die Core Web Vitals auf deinen Onlineshop haben. Gleichzeitig erklären wir, wie das Update sich auf deine SEO und dein Ranking auswirkt und wie du deine Onpage optimierst.

Der Knackpunkt: Was sind die neuen Messwerte und wie messe ich sie?

Mit den Core Web Vitals misst Google von nun an die Qualität und Nutzererfahrung deiner Website. Über Kennzahlen kannst du die User Experience (UX) deines Onlineshops einschätzen und bei Bedarf anpassen. Bei der Messung werden der Ladevorgang der Seite, ihre Interaktivität und die visuelle Stabilität ausgewertet.

Drei Messkriterien, die du kennen solltest:

1. Largest Contentful Paint (LCP): Diese Kennzahl misst die Dauer des Ladevorgangs deiner Hauptinhalte. Im Idealfall dauert die Ladezeit deiner Website 2,5 Sekunden. Besser eingestuft werden noch schnellere Ladezeiten.
2. First Input Delay (FID):  Bei diesem Wert wird die Interaktion zwischen dem Nutzer deines Shops und der Reaktionszeit des Browsers gemessen. Zu den Inhalten die getestet werden zählen Verlinkungen, JavaScript-gesteuerte Steuerelemente und Schaltflächen.
3. Cumulative Layout Shift (CLS): Diese Kennzahl misst Werte für alle unerwarteten Layoutverschiebungen, die während der Nutzung deines Onlineshops auftreten können. Google gibt dabei als Idealwert 0,1 oder niedriger vor.

Wie du die Metriken auswertest:

Laut Google liegt es an den Seitenbetreibern die gemessenen Werte richtig einzuschätzen und die Usability ihrer Internetpräsenz zu optimieren. Für gängige CMS (Content Management Systeme) wie zum Beispiel WordPress gibt Google in den Core Web Vitals konkrete Hinweise, welche Einstellungen oder Plugins Probleme verursachen und wie diese behoben werden können. 

Deine Web Vitals kannst du in den folgenden Tools einsehen:

• Web Vitals Extension
• Diese Erweiterung misst die Core Web Vitals und liefert sofortiges Feedback zu Lade-, Interaktivitäts- und Layout-Shift-Metriken. Es stimmt damit ab, wie diese Metriken von Chrome gemessen und an andere Google-Tools gemeldet werden (z. B. Chrome User Experience Report, PageSpeed ​​Insights, Search Console).

• DevTools
• Die DevTools führen einen Test auf deiner Website durch, indem du die URL eingibst, um zu sehen, wie gut sie bei Audits abschneidet. Sieh dir die Leistung deiner Website in den Bereichen an und hole dir dort Tipps zur Verbesserung. Jeder Test enthält hilfreiche Schritte, um die Ergebnisse deiner Website zu verbessern.

• Search Console
• Die Tools und Berichte der Search Console unterstützen dich dabei, den Google Suche-Traffic deiner Website und deren Leistung zu messen sowie Probleme zu beheben. Außerdem sorgen sie dafür, dass deine Website in den Google Suchergebnissen hervorragend dasteht.

• PageSpeed Insights
• PageSpeed Insights analysiert den Inhalt einer Webseite und erstellt dann Vorschläge zur Verbesserung der Geschwindigkeit dieser Seite. Ähnlich wie bei der Search Console gibst du im Suchfeld deine URL an und erhältst im Anschluss eine Analyse deiner Website.

• Lighthouse
• Die Lighthouse-Reports werden einmal pro Tag automatisch ausgeführt und ihre Ergebnisse gespeichert. Das Device kann in den Einstellungen von Mobile auf Desktop geändert werden. Im Optimizer siehst du neben dem Lighthouse Performance-Score außerdem die drei Werte der Core Web Vitals.

Noch in der Schmiede: Ein neuer Rankingfaktor

Zu der oberen Liste soll demnächst ein weiterer Maßstab hinzukommen – das Page Experience Signal. Dieser Wert soll die Core Web Vitals (LCP, FID und CLS) mit bestehenden UX-Signalen, die durch den Nutzer und die Art seiner Interaktion mit Inhalten entstehen, kombinieren. Zu letzteren gehören:

• Mobile-Friendliness: Die Nutzerfreundlichkeit deiner Website für Mobilgeräte kannst du beim Google Mobile-Friendly Test messen.
  
  
• Safe-Brwosing: Der Bericht „Sicherheitsprobleme" zeigt Seitenbetreiber:innen an, welche Probleme beim Surfen aufkommen und wie diese behoben werden.
  
  
• HTTPS-Security: Das kleine Schloss-Symbol links neben der URL zeigt an, dass die Webpage eine sichere HTTPS-Verbindung nutzt.
  
  
• Intrusive Interstitial: Hierbei handelt es sich um eine Werbeform mittels Pop-ups, Banner und Overlays, die auf Websites angezeigt werden, um für ihre Dienste zu werben und das Hauptmotiv des Benutzers, das Lesen des Inhalts auf der Website, zu stören. 

So optimierst du deinen Content für das Google Core Update

Du kannst einige Dinge auch ohne großes Vorwissen mit Hilfe der Tools in deinem Onlineshop anpassen. Beispielsweise verbesserst du deine LCP und CLS, indem du Bilder in genau der Größe verwendest, in der sie auf deiner Seite angezeigt werden. 

Das bedeutet:

• Vermeide Bilder mit 2000 x 2000 Pixel Größe, wenn sie nur mit 600 x 600 angezeigt werden. 
• Durch optimale Komprimierung der Bilder, kannst du die Dateigröße reduzieren.
• Verwende JPG-, WebP-, PNG-Dateiformate

Weitere Anpassungen setzen meistens mehr technisches Wissen voraus. Auch hier bietet Google passende Anleitungen für Neueinsteiger an, die wir dir im Folgenden auflisten und erklären.

Die UX deiner Onpage lässt sich mit einigen Umstellungen optimieren.

Beschleunige deine Ladezeiten 

Um den Wert LCP zu optimieren, also die Zeit zu verkürzen, bis das größte Content-Element geladen wurde, empfiehlt Google sich folgende Punkte anzuschauen:

Langsame Server-Antwortzeiten (TTFB): 

• Halte deine Server auf dem neuesten Stand der Technik, um die Leistung zu verbessern. 
• Liefere statische Inhalte wie JS, CSS und Bilder mit den richtigen Angaben zum Caching aus und cache die HTML-Seiten ebenfalls.
• Verbinde Domains für 3rd-party Skripte frühzeitig (preconnect)

Render-Blockierungen von JavaScript und CSS

• Lade JavaScript-Dateien, die nicht für den direkten Seitenaufbau wichtig sind, so spät wie möglich. Die booleschen Attribute 'async' und 'defer' werden verwendet, um externe Javascript-Bibliotheken effizient in deine Webseite zu laden. Mit ‘defer’ führt der Browser die Skripte in der Reihenfolge aus, in der sie aufgeführt sind. Skripte mit ‘async’ können geladen und ausgeführt werden, während das Dokument noch nicht vollständig geladen wurde, etwa wenn das Script klein oder im Cache ist und das Dokument lang genug. Füge sie möglichst am Fuß der Seite ein, und nutze ‘defer’ oder ‘async’ bei der Einbindung.

• Reduziere die Dateigröße von JavaScript- oder CSS-Dateien durch „Minifying.“ Hierbei werden alle unnötigen Leerzeichen entfernt und der Code wird nacheinander in einer Zeile geschrieben. Mit dieser Technik wird die Dateigröße reduziert, was sich positiv auf die Performance der Website auswirkt.
  
  
• Um langsame Ressourcen-Ladezeiten zu vermeiden, nutze CDN-Server zur Auslieferung von statischen Inhalten wie JS, CSS und Bildern.
  
  
• Client-seitiges Rendering vermeidet das Rendern der Seite mit JavaScript im Browser und liefert dazu einen möglichst weit vorgerenderten HTML-DOM aus.

Mit den richtigen Einstellungen lassen sich Ladezeiten verkürzen.

Optimiere die Reaktionszeit auf deiner Seite

Um den Wert FID zu optimieren, also die Zeit zu verkürzen, bis die Webseite auf User-Eingaben reagiert, kannst du als Onlinehändler:in auf den Wert „Total Blocking Time“ (TBT) ausweichen und folgende Maßnahmen anwenden:

• Reduziere die Laufzeit von JavaScript Tasks – alles über 50 Millisekunden ist zu lang.
• JavaScript Tasks beinhaltet Codes, die von den Standardmechanismen ausgeführt werden sollen, z. B. das anfängliche Starten eines Programms, das Ausführen eines Ereignisses oder das Auslösen eines Intervalls oder einer Zeitüberschreitung. Diese werden alle in der Aufgabenwarteschlange eingeplant.
  
  
• Nutze Code-Splitting
• Um zu vermeiden, dass du mit einem großen Bündel an Dateien („Bundle") endest, ist es gut, dem Problem voraus zu sein und mit dem „Splitten” (dt. aufteilen) deines Bundles zu beginnen. Durch sie werden mehrere Bundles erzeugt, die zur Laufzeit dynamisch geladen werden können.

Prüfe das Layout deiner Website

CLS lässt sich am besten in den Chrome DevTools überprüfen. Zur Kontrolle der Maßnahmen sollten aber auch die Daten aus dem CrUX hinzugezogen werden. Um den Wert zu optimieren, empfiehlt Google folgende Maßnahmen:

• Füge Bilder, Anzeigen oder Iframes immer Angaben zu den Meta-Tags hinzu, um deine Inhalte barrierefrei zu gestalten. Sollten Bilddateien nicht geladen werden, werden sie durch Textangaben beschrieben.
  
  
• Vermeide dynamisch eingefügte Inhalte, wie zum Beispiel GIFs oder Animationen, im oberen Bereich der Seite. Hierbei kann es durch falsche Formatierungen zu verschobenen Layouts kommen.
  
  
• Füge beim Einbetten von Web-Schriften die Angabe „swap" für die CSS-Anweisung „font-display" hinzu, um die Effekte FOIT/FOUT zu vermeiden.
  
  
• Vermeide JavaScript-Aktionen, die auf eine Netzwerkantwort warten, bevor der DOM aktualisiert wird. 
• Wenn der Browser beispielsweise denselben JavaScript-Thread verwenden müsste, um eine Aufgabe auszuführen, wenn die HTTP-Netzwerkantwort empfangen wird, reagiert die Webseite für Sekunden oder sogar Minuten nicht mehr.

Auf die Details kommt es an – Verbessere dein Ranking beim Core Web Vitals Test

Im Rahmen von Googles Core Web Vitals kommt es auf Kleinigkeiten an–gerade wenn es darum geht, Bereiche einer modernen Webseite zu optimieren. Hierbei wird zum Teil tiefgehendes Wissen über Server, JavaScript und Rendering benötigt. Wie vor jeder großen Prüfung, gilt deswegen auch für das Core-Update – fange frühzeitig an, dich und deinen Shop auf die Änderungen vorzubereiten. Gegebenenfalls solltest du Zeit für Schulungen oder Kosten für externe Unterstützung einkalkulieren.

Bei SEO wird das O groß geschrieben, denn die Optimierung hört nie auf. Aber genau das ist das Spannende an der Suchmaschinenoptimierung – jede Änderung kann deine Werte beeinflussen. Bist du bereit für das Core Web Vitals Update?

Titelbild von Glen Carrie. Weitere Bilder von David Travis und Mike van den Bos.