Wer die Benutzererfahrung positiv beeinflussen kann, der hat bekanntlich sehr gute Chancen bei Google ganz oben in den Suchergebnissen zu erscheinen. Im März 2020 gab Google bekannt, dass ein “Google Page Experience Update” für für 2021 geplant ist.

Dieses Update wird einiges bewirken, da die Webseiten Erfahrung als offizieller Google-Ranking-Faktor integriert wird. Daher erklären wir dir jetzt schon was du am besten machen solltest um auf das große Update vorbereitet zu sein.

Google Core Vitals
Aussage von Google im Webmaster Blog

Im gleichen Atemzüge gibt Google aber gleich bekannt, dass ein toller Wert nicht die Webseite auf Platz 1 zaubert, dazu zählen bekannterweise über 200 weitere Faktoren eine entscheidende Rolle.

Aussage Google über Core Vital Werte
Google sagt, dass ein guter Wert nicht automatisch Platz 1 bedeutet

Core Web Vitals

Die – “Core Web Vitals” – stehen bildlich für alle Web-Erfahrungen und sind von zentraler Bedeutung für Google. Die Basis bilden Ladeerfahrung, Interaktivität und visuelle Stabilität. Diese findest du in der “Google Search Console” unter “Verbesserungen”

Der neue Google Ranking Faktor wird wie oben erwähnt als “Page-Experience-Signal” von Google deklariert und und wird in Kombination mit folgenden Metriken verwendet:

Largest Contentful Paint (LCP))

Misst die wahrgenommene Ladegeschwindigkeit und markiert den Punkt in der Seitenladezeit Leiste, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde. Nehmen wir an ihr besitzt ein großes Header oder Teaser Bild. Dieses Bild ist groß und führt dazu, dass eure Seite länger braucht bis dieses Bild geladen wird.

Genau dies wirkt sich dann schlecht auf den Largest Contentful Paint Wert eurer Webseite aus. Habt ihr hingegen im nicht sichtbaren Bereich, z.B. ganz unten im Footer ein großen Bild das eine lange Ladezeit verursacht, so beeinflusst dies nicht den LCP Wert. Ist der Wert unter 2,5 Sekunden, dann habt ihr einen guten Wert. Ab 4 Sekunden ist er schlecht und muss verbessert werden.

Den LCP-Score kann man mit Google PageSpeed Insights einsehen. Dort sieht man was für die Seitengeschwindigkeit wirklich wichtig ist. Es ist für den Nutzer wichtig, die Seite zu sehen und mit ihr interagieren zu können und das schnell und effizient.

Google – Pagespeed Insights

Wir überprüfen und empfehlen immer die Daten auch in der “Google Search Console”. Warum fragst du dich?

  • LCP-Daten messen die gesamte Seite, nicht nur die jeweils überprüfte oder eine zufällige Webseite.
  • Wir erhalten hierdurch eine Liste mit spezielle LCP-Richtlinien aufgeteilt in gut, schlecht und Optimierung erforderlich.

Zusammengefasst: Google möchte das alle Seiten binnen von 2,5 Sekunden auf LCP trifft. Gerade bei großen Seiten oder Webseiten mit viel Funktionen wird dies eine echte Herausforderung werden.

Beispiele für LCP

Hier sind einige Beispiele dafür, wann der LCP auf einigen beliebten Websites auftritt:

Die nächsten beiden Beispiele zeigen wann der LCP auftritt, bevor die Seite vollständig geladen wird.

Im Beispiel 1 sieht man, dass das Instagram-Logo relativ früh geladen wird und die ganze Zeit das größte Element bleibt. Im zweiten Beispiel ist und bleibt der Textbaustein das größte Element auch wenn Bilder nachgeladen werden.

Hier sind einige Dinge, die Sie tun können, um das LCP Ihrer Site zu verbessern:

  • Entfernen unnötiger Skripte von Drittanbietern
  • Wähle einen besseren Webhoster, durch besseres Hosting steigt durch schnellere Ladezeiten meistens auch der LCP Wert.
  • Mit “Lazy-Loading” werden Bildern erst geladen, wenn ein Nutzer an die Stelle scrollt. Sehr gut bei der Verbesserung von LCP Werten.
  • Im Google Pagespeed sieht man unter dem Punkt “Largest Contentful Paint-Element 1 element found” welches Element den LCP Wert verlangsamt.

  • Minimieren und vereine deine CSS-Dateien da dies LCP-Werte verlangsamen könnte.

Zusammengefasst: Versuche folgende Punkte zu Verbessern. Ladezeiten von Ressourcen wie CSS oder optimieren. Server-Antwortzeiten optimieren(Stichwort SSD Festplatten). Javascript, CSS und auch Fonts wie Google optimieren und so das Rendering-Blocking und Client Side Rendering, reduzieren

Die Verzögerung der ersten Eingabe(First Input Delay (FID)

Misst die Reaktionsfähigkeit und quantifiziert die Erfahrung, die Benutzer beim ersten Versuch mit der Seite machen. Üblicherweise könnte dies der Klick auf ein Button oder Link sein, damit “passiert” etwas eine Aktion des Nutzers. Für Googles Messkriterien bedeutet eom niedrige FID, dass die Seite verwendbar ist. Der erste Eindruck zählt, so ein bekanntes Sprichwort. Das ist nicht nur im privaten Umfeld sondern auch im World Wide Web genauso wichtig, wenn man Erfahrungen sammelt. Legst du also mit deiner Webseite einen schlechten Eindruck hin, wird der User nie wieder zurück kommen. Google misst mit der FID-Metrik (First Input Delay) genau diesen virtuellen ersten Eindruck deines Benutzers. Angefangen von der Interaktivität über die Reaktionsfähigkeit deiner Website.

Animation, die zeigt, wie ein ausgelasteter Hauptthread die Reaktion auf eine Benutzerinteraktion verzögert.

Ein gutes Beispiel hierfür, wie wir den FID unseren Kunden erklären ist das “Tür und Klingel” Beispiel. Nehmt einmal an, ihr seit zum Grillen bei einem Freund eingeladen und klingelt an der Türe. Jetzt kann es unterschiedliche Gründe haben, wieso euer Freund länger braucht, bis er euch aufmacht. Er könnte im Garten sein und muss zu Türe laufen oder er kann sich nicht schnell bewegen. Das kann man auf den FID Wert übertragen, eine Webseite ist mit anderen Arbeiten beschäftigt oder das Gerät des Benutzers ist langsam.

Auf der Webseite betrifft dies z.B. folgende Konstellationen die ein User ausführen möchte:

  • Klick auf einen Link in der Navigation der Site
  • Auswählen einer Option aus einem Menü
  • Öffnen von „Akkordeontext“ auf Mobilgeräten
  • User die Ihre E-Mail-Adresse in ein Feld eingeben

Google hält FID für wichtig, da es berücksichtigt, wie reale Benutzer mit Websites interagieren.

Zusammengefasst: Der First Input Delay (FID) miss die erste Interaktion eines Users mit eurer Webseite. Dies kann ein Klick auf ein Button sein auf einen Link usw.Bis genau zu diesem Zeitpunkt, wenn der Browser des Nutzers es schafft auf diese Interaktion(z.B. einen Klick) zu reagieren.

Was ist ein guter FID-Wert?

Die Core Web Vitals und speziell der First Input Delay (FID) legen einen großen Wert auf gute Benutzererfahrung. Deswegen wird empfohlen, dass ihr eure Webseite auf eine max. Verzögerung der ersten Eingabe von unter 100 Millisekunden bekommt. Das Ziel muss es sein, dies zu 75% zu erreichen,
aufgeteilt auf Mobil- und Desktop Geräte.

In diesem Beispiel sieht man eine Zeitleiste mit einem typischen Ladevorgangs einer Webseite:

In diesem Beispiel werden höchstwahrscheinlich Momenten CSS- und JS-Dateien mit einigen Request abgefragt. Nachdem diese vom Nutzer heruntergeladen wurden, werden sie im Hauptthread verarbeitet. Das Resultat führt dann zu unterschiedlichen Perioden, bei einem der Haupt-Thread beschäftigt ist(gelb gefärbten Blöcke).

Hier sieht man ein Beispiel wie es aussieht, wenn die erste Verzögerung lang ist da First Contentful Paint (FCP) und Time to Interactive (TTI) durch einen Teil erst noch geändert werden muss, bevor man zuverlässig interagieren kann.

Wie kann man den FID-Werte verbessern.

Versuchen Sie das JavaScript zu reduzieren oder zusammenzufassen. Wir finden das dies einer der Schlüssel für gutes FID ist. Denn ein Nutzer deiner Webseite kann fast unmöglich damit kommunizieren, wenn der Browser das JavaScript rendert bzw. lädt.

Wir haben in einigen Projekte getestet, wie sich das entfernen von nicht kritische Skripte von Drittanbietern auswirkte. Beispielsweise haben wir Google Analytics und noch ein paar andere Skripte entfernt und konnten den FID-Wert erhöhen.

Um den Benutzer bzw. dessen Browser eine bessere und schnellere Ladezeit zu verschaffen, setzen Sie auf einen Browser-Cache.

Zusammengefasst: Um den FID Wert zu Verbessern, versuche Scripte von Drittanbietern zu reduzieren. Reduziere die Datenmengen und die Request an den Browser. Arbeite mit CDN Anbietern um die JavaScript-Ausführung noch schneller und effizienter zu machen.

Die kumulative Layoutverschiebung(Cumulative Layout Shift (CLS)) 

Misst die visuelle Stabilität und quantifiziert das Ausmaß der unerwarteten Layoutverschiebung des sichtbaren Seiteninhalts. Ein typisches Beispiel wäre hierfür eine asynchron geladene Seitenelemente, die auf einmal das Layout eines Textes verändern. Der CLS Wert berechnet sich aus zwei Werten die miteinander multipliziert werden.

Die Formel des Cumulative Layout Shifts sieht so aus: layout shift score = impact fraction * distance fraction

Dieser Messwert war zuvor eher sehr wenig bekannt, er soll aber für visuelle Stabilität beim Laden einer Webseite und z.B. Buttons stehen. Ein gutes Beispiel, dass jedem schon einmal passiert ist, beschreibt diesen Wert am besten. Man lädt eine Webseite, möchte auf einen Link oder Button klicken, dann lädt die Seite plötzlich nach und das Layout verschiebt sich. Der Button ist dann nicht mehr an derselben Position sondern woanders. Das Resultat man klickt ungewollt den falschen Button an.

Google lässt diesen Wert deshalb so stark einfließen, da es für den Nutzer einer Webseite ärgerlich sein könnte, wenn zwei Buttons untereinander liegen und er den falschen Button auswählt.

  • Nehmen wir an der Button 1 führt eine Bestellung final aus.
  • Button 2 bricht die Bestellung ab.

Man möchte also z.B. abbrechen und führt durch die Verschiebung des Layouts, die Bestellung aus versehen durch. Ärgerlich für den Nutzer.

Wie kann man den CLS Wert verbessern?

Bei einem schlechten CLS Wert von 0,1 sollte man handeln und Verbesserungen vornehmen.

  • Bilder sowie Videos müssen mit einer festen Breite und Höhe im HTML/CSS Code angegeben werden.
  • Versuche immer die Webseite so gut wie es geht statisch zu lassen.
  • Nutzt man Werbung(Ads) sollte man diesen auch ein feste Breite und Höhe im Quellcode geben.

Zusammengefasst: Die Bilder und Video-Elemente müssen im Quellcode mit einer festen Größenangabe integriert werden. Elemente dürfen nicht die Größe während dem Aufbau(Rendern) ändern.

Bei der Optimierung der Seitenerfahrung geht es nicht darum, bestimmte Kriterien für Suchmaschinen zu erfüllen. Es geht darum, echten Benutzern die bestmöglichen Erfahrungen zu bieten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.