INTERNET WORLD Business Logo Abo
Core Web Vitals

Ab dem 1. Mai 2021 Core Web Vitals: Last Minute-Tipps für die Optimierung

shutterstock.com/Piscine26
shutterstock.com/Piscine26

Ab Mitte Juni gelten die Core Web Vitals für Google als Ranking-Faktoren. Thomas Kaiser von morefire erklärt, wie Website-Betreiber ihre Seite mit kleinen Kniffen fit für das Update machen können.

Von Thomas Kaiser, Experte für technisches SEO und Page-Speed-Optimierung bei der Digitalagentur morefire

Mit den ab Mitte Juni greifenden Core Web Vitals setzt Google künftig noch mehr auf die Qualitätssicherung der User Experience und der Suchergebnisse. Unterbewusste Fragen von Nutzern wie "Lädt die Seite schon?" und "Entspricht die Seite meinen Wünschen?" werden noch intensiver in den Fokus gerückt. Umso wichtiger, dass Sie sich spätestens jetzt dem Thema Core Web Vitals widmen, damit Ihre Seite entsprechend Ihren Wünschen rankt und Ihre Besucher zufrieden sind.

Core Web Vitals - was sie bedeuten

Unter den sogenannten Core Web Vitals versteht man nutzerzentrierte Metriken zur Messung der technischen Performance einer Webseite. Die Qualität der User Experience soll mithilfe dieser Metriken messbar gemacht werden. Dafür beruft sich Google auf drei definierte Core Web Vitals: 

  1. Geschwindigkeit (Largest Contentful Paint = LCP)
  2. Interaktivität (First Input Delay = FID)
  3. Stabilität (Cumulative Layout Shift = CLS)

Geschwindigkeit (Largest Contentful Paint = LCP)

Der LCP repräsentiert die Geschwindigkeit. Diese Metrik misst die Zeit, bis das größte Content-Element im sichtbaren Bereich dargestellt wird / erscheint. Als Content-Element versteht man Bilder, Videos, Textblöcke oder sonstige Elemente mit Hintergrundbildern.

Als Richtwerte wird folgende Skala festgelegt:

Geschwindigkeit

morefire

Liegt die Ladezeit demnach unter 2,5 Sekunden für das größte Elemente im sichtbaren Bereich, ist keine Verbesserung von Nöten. Ab 2,5 Sekunden Ladezeit bedarf der Nachrüstung und Optimierung.

Interaktivität (First Input Delay = FID)

Der FID bezieht sich auf die Interaktivität. Diese Metrik misst die Reaktionszeit des Browsers auf die Interaktion des Users.

Als Richtwerte wird folgende Skala herangezogen:

Interaktivitaet

morefire

Liegt die Reaktionszeit des Browsers unter 100 ms, kann der Leser die Seite flüssig nutzen und die Seite bedarf keiner Optimierung. Über 100 ms Reaktionszeit deuten daraufhin, dass der FID optimiert werden sollte / könnte.

Beträgt die Wartezeit für den User über 300 ms, ist eine Optimierung zwingend erforderlich, da der Besucher die Verzögerungszeit deutlich spürt.

Stabilität (Cumulative Layout Shift = CLS)

Die dritte und letzte messbare Metrik ist der CLS - er misst die Stabilität eines Website-Layouts und ob es gegebenenfalls eine Veränderung des Layouts gibt. Darunter versteht man beispielsweise Werbebanner, die nachgeladen werden, die einen in Sekundenschnelle an eine andere Position auf der Website springen lassen, ohne dass es gewollt ist. Das ist nicht nur unschön für den Leser, sondern wird künftig auch von Google abgestraft. 

Als Richtwerte hat Google folgende Skala festgelegt:

Stabilitaet

morefire

Liegt der Wert unter 0,1, ist die Stabilität des Layouts ausreichend und der Besucher kann die Seite nutzen, ohne dass sie springt. Ab einem Wert von 0,1 kann nachjustiert werden - ist der Wert >= 0,25 sind Anpassungen ratsam.

Erfassung der Metriken

Um die genannten drei Metriken messen zu können, können verschiedene Tools zur Hilfe genommen werden. Das funktioniert etwa über Tools wie die Google Search Console, Pagespeed Insights und Chrome User Experience.

Die Core Web Vitals sind die ideale Lösung genau zu optimieren, da sie entsprechend gemessen und analysiert werden können. Tipps für die Optimierung der Core Web Vitals:

3 Tipps zur Optimierung der Geschwindigkeit (LCP)

Um den LCP zu optimieren, sollte daran gearbeitet werden, dass das größte Bild- / Video- oder Textelement - so schnell wie möglich - geladen und angezeigt wird.

Dafür können folgende Maßnahmen ergriffen werden:

  • Reduzieren Sie die Antwortzeit des Servers: Das heißt im Klartext, der Server sollte idealerweise in der Nähe der Nutzer stehen. Sollte ihr Webshop also zum Großteil in Deutschland verkaufen, befindet sich der Server idealerweise nicht in den Staaten. Außerdem sollten Sie jetzt unbedingt sicherstellen, dass die Serverleistung ausreichend ist und Sie kein Geld an falscher Stelle sparen. Eine besucherstarke Seite sollte nicht auf einem Server für wenige Euro laufen - Probleme sind vorprogrammiert.

  • Optimieren Sie Content-Elemente: Content-Elemente wie Bilder, Videos oder anderweitige Content-Blöcke führen häufig zu Ladeverzögerungen. Achten Sie daher auf moderne Formate (JPG, WebP, usw.), auf die Skalierung von Bild- und Videomaterial und sorgen Sie für eine verlustfreie Bilderoptimierung. Hierbei können CMS-Plugins helfen. Bei Wordpress könnten Sie und ihr Team beispielsweise auf "Image File" oder "Smashing" zurückgreifen.

  • LCP-relevante Inhalte priorisieren, sodass Video- und Bildmaterial schnell geladen werden, damit der sichtbare Bereich direkt dargestellt wird

3 Tipps zur Optimierung der Interaktivität (FID)

Kommen wir zur Optimierung der Interaktivität, des FIDs. Ist dieser verbesserungsfähig (was aus eigener Erfahrung vergleichsweise selten vorkommt), steht im Fokus, die Reaktionszeit des Browsers auf Interaktionen des Nutzers zu verringern. Dies geht hauptsächlich damit einher, auf der Homepage ständig ladende Scripte zu hinterfragen, denn jeder zusätzliche Content auf der Website verlangsamt die Reaktionszeit des Browsers.

Folgend unsere 3 Tipps zur Optimierung:

  • Reduzieren Sie JavaScripte: Laden Sie Scripte nur auf Seiten, auf denen diese benötigt werden, beispielsweise beim Kontaktformular oder als Slider (brauchen Sie den Slider wirklich?). Splitten Sie außerdem lange JavaScript-Tasks auf. Mit der Aufsplittung von langen JavaScripten können Sie Phasen verhindern, in denen der Browser JavaScripte lädt, während der Nutzer nicht mit der Seite interagieren kann. Werfen Sie also einfach mal einen Blick in PageSpeed Insights und sprechen Sie mit einem Entwickler aus ihrem Team um mit wenigen Klicks die Interaktivität zu verbessern.

  • Hinterfragen Sie Ihre Plugins: Stellen Sie sich regelmäßig die Fragen "Brauche ich das Plugin wirklich? Schaffst das Plugin Mehrwert? Was ist nur 'Spielerei'?" Installieren Sie nur Plugins, die sie wirklich benötigen, denn je mehr installierte Plugins, desto mehr Arbeit für den Browser. Das gilt auch für Third-Party-Plugins wie Tracking-Plugins (Analytics, Heat-Maps, Facebook-Pixel). Dies sind alles Skripte, die ausgeführt werden müssen und demnach nur gezielt eingesetzt werden sollten.

  • Nach A/B-Testing, Scripte entfernen: Binden Sie die Skripte nur auf genau den Seiten ein, wo Sie testen. Ist ihr Testing abgeschlossen, pausieren Sie das Script nicht nur, sondern entfernen Sie es tatsächlich komplett. Nur so gehen Sie sicher, dass das Script nicht mehr (im Hintergrund) geladen werden muss.

3 Tipps zur Optimierung der Stabilität (CLS)

Müssen Sie die Stabilität der Website optimieren, heißt es als primäres Ziel, unerwartete Verschiebungen im Layout zu verhindern. Denn nicht selten kommt es auf diversen Websites vor, dass Elemente / Texte oder Ähnliches an eine andere Stelle rutschen, weil ein anderes Element auf der gleichen Seite weiter oben oder unten nachgeladen wurde.

Der CLS ist somit eine ziemlich greifbare Metrik, da man alle Probleme direkt sieht respektive mitbekommt. Beispielsweise geschieht es immer wieder bei Webseiten, dass die enthaltenen Anzeigen verspätet laden und der Artikel dann springt. 

Unsere 3 Maßnahmen lauten:

  • Legen Sie für Bilder und Videos fixe Größenangaben fest: Ein häufiger Fehler von Webseiten-Betreibern ist es, Bilder und Videos ohne feste Größenangabe hochzuladen. Das kann falsche Wiedergaben der Elemente zur Folge haben, daher ist es immer ratsam, die Elemente mit festen Höhen- und Breitenangaben zu versehen.

  • Für nachgeladene Inhalte (Ads) Platz im Layout reservieren: Für nachgeladene Inhalte wie beispielsweise Ads sollte ein DIV-Container mit fester Größe vergeben werden. In diesem Bereich lädt also immer eine Werbeanzeige, was der Browser dann schon beim Laden einplant und nicht nach dem Laden an die entsprechende Stelle springen muss. Legen Sie hierfür feste Positionen fest, wie beispielsweise nach der 2. H2-Überschrift usw.

  • Lassen Sie Schriftarten frühzeitig laden und passen Sie das Styling der Fallback-Font an: Wenn Sie Schriftarten aus dem Web darstellen und in ihr Layout einbinden möchten, kann es zu Problemen bei der Darstellung kommen. Das passiert meist dann, wenn die Fallback-Schriftart (die alternative Schriftart) nicht korrekt dargestellt werden kann. Es ist von Vorteil, Fallback-Fonts hinsichtlich des Stylings so anzupassen, dass sie visuell und vom einzunehmenden Platz der gewünschten Schriftart ähnelt.

Analyse und Monitoring

Wie bei vielen anderen Online-Disziplinen spielt die Analyse eine elementare Rolle. Sie als Webseitenbetreiber müssen wissen, in welchen Disziplinen ihre Webseite gut performt und in welchen sie Optimierungsbedarf hat. Gerade bei einem so umfangreichen Google-Update lohnt der Blick in die Google Search Console. Hier bietet Google einen guten Überblick der aktuellen Seiten-Performance. 

Als zweiten Schritt können wir PageSpeed Insights empfehlen, denn auch hier sieht man auf einen Blick, wo Handlungsbedarf besteht. Spielereien wie Slider oder Animationen die PageSpeed einbußen, werden mit diesem Update immer weniger sinnvoll. Für Sie und ihr Team gilt es diese Performance-Killer ausfindig zu machen. 

Ein drittes Tool, welches wir regelmäßig für unsere Kunden nutzen, ist der Chrome User Experience Report. Mit wenigen Klicks haben Sie hier die Möglichkeit etwas tiefer in die Analyse zu gehen. Alle drei Tools sind kostenfrei.

Fazit: Core Web Vitals

Zusammenfassend ist wichtig zu erläutern, dass Core Web Vitals nicht nur ein reines SEO-Thema sind, denn gut laufende Core Web Vitals dienen außerdem dazu:

  • die Absprungsrate auf Ihrer Website niedrig zu halten
  • die Conversion Rate hoch zu halten
  • das Ranking in Google auf einem guten Level zu halten und
  • Google-Ads kostengünstiger ausspielen zu lassen.

Dabei werden die Metriken je nach Endgerät getrennt bestimmt, d.h. die Richtwerte variieren zwischen Desktop und Mobile. Core Web Vitals sind also kein reines SEO-Thema, sondern tief in der UX einer Website verwurzelt. 

Es ist wichtig zu ergänzen, dass das Rankingsignal einer Website nur positiv ist, wenn alle drei Core Web Vitals erfüllt sind. Es reicht demnach nicht, sich mit einem Core Web Vital im grünen Bereich zu befinden, solang die anderen beiden Metriken im roten Bereich liegen.

Außerdem sollte der Blick immer wieder in Richtung Updates hinsichtlich der Core Web Vitals gerichtet werden. Google wird künftig die Core Web Vitals stetig anpassen beziehungsweise ergänzen.

Das könnte Sie auch interessieren