Zentrale Web-Vitaldaten von Google

Es ist keine Überraschung, dass Google sich zunehmend auf das Benutzererlebnis der Besucher einer Website konzentriert. Wie auch von Kollegin Liza in dem Blog-Artikel “The Google Page Experience update” beschrieben, kündigte Google Ende letzten Jahres (November) an, dass die Nutzererfahrung einen drastischen Einfluss auf Ihr Ranking in Google haben wird. Der Algorithmus von Google wird ständig optimiert, um sicherzustellen, dass Sie als Google-Besucher die besten Ergebnisse für Ihre Suchanfrage erhalten.

Das oben genannte Update wird ab Mitte Juni 2021 in Kraft treten und konzentriert sich hauptsächlich auf die Website-Technologie. Obwohl noch niemand genau weiß, wie groß die Auswirkungen dieser neuen Maßnahmen sein werden, ist die Wahrscheinlichkeit groß, dass es zu vielen Verschiebungen in den Rankings kommen wird.

Ich sage Ihnen gerne, wie Sie Ihre Website (technisch) optimal auf dieses Update vorbereiten können!

Die Core Web Vitals großer Teil der Google Page Experience

Die Google Page Experience sind eine Reihe von Komponenten, die messen, wie das Nutzererlebnis auf einer Website ist. Dabei geht es nicht nur um den Informationswert, sondern auch um die sogenannten Core Web Vitals.

Was sind die Web Core Vitals?

Um ein gutes Nutzererlebnis zu gewährleisten, hat Google eine Reihe von Metriken festgelegt, die das Nutzererlebnis in Echtzeit für die Ladeleistung, Interaktivität und visuelle Stabilität einer Seite messen.

Diese Daten bestehen aus den folgenden Komponenten:

1. Größtes inhaltsreiches Bild (LCP)
2. Verzögerung der ersten Eingabe (FID)
3. Kumulative Layout-Verschiebung (CLS)

Überblick über die Elemente, aus denen die Core Web Vitals bestehen

Ich werde sie der Reihe nach durchgehen und erklären.

1. Largest Contentful Paint (LCP) im Detail

Um ein gutes Nutzererlebnis zu bieten, sollte die Seite darauf abzielen, dass der LCP innerhalb der ersten 2,5 Sekunden nach dem Laden der Seite stattfindet. Die LCP gibt die Anzeigedauer des größten Elements (Bild oder Textblock) an, das im Viewport (Bildschirm Ihres Geräts) sichtbar ist, und zwar ab dem ersten Laden der Seite.

Bestimmte Elemente der Website-Technologie können sich negativ auf Ihre LCP-Bewertung auswirken.

JavaScripts und CSS, die das Rendern von Seiten blockieren

Sowohl Skripte als auch Stylesheets sind Rendering-Blocker, die das FCP (First Contentful Paint) und damit auch das LCP verlangsamen können. Deaktivieren Sie unkritische Javascripts und CSS, um das Laden von wichtigen Inhalten zu beschleunigen. Im Folgenden finden Sie einige Tipps zur Reduzierung oder Verschiebung von Dateien.

• Verkleinern Sie CSS, minimieren Sie Ihre CSS-Dateien durch Komprimierung.
• Verschieben Sie unkritisches CSS, verschieben Sie das Laden von unwichtigem CSS.
• Inline kritisches CSS, optional das wichtigste CSS inline an den Anfang des Dokuments stellen.
• Minimieren und komprimieren Sie Javascript-Dateien.
• Verschieben Sie ungenutztes Javascript.

Elemente, die langsam laden

Große Bilder und Videos können sehr groß sein (in Kilobyte) und lange Ladezeiten verursachen. Bilder können oft verkleinert (in Pixeln) und komprimiert (z. B. verlustbehaftet) werden.

Darüber hinaus können Sie falsche Dateierweiterungen verwenden. Verwenden Sie besser die neuesten Formate. Bildformate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was schnellere Downloads und weniger Datenverbrauch bedeutet.

Zu langsame Server-Reaktionszeiten

Es ist enorm wichtig, dass die Website auf einem guten Webhosting/Server liegt, damit der Server die Anfragen schnell ausführen und bearbeiten kann.

• Optimieren Sie Ihren Server/Webhosting.
• Nutzen Sie ggf. ein CDN (bei vielen weltweiten Besuchern).
• Zwischenspeichern/Optimieren von Assets.
• Servieren Sie HTML-Seiten aus dem Cache.

Stellen Sie frühzeitig Verbindungen zu Dritten her

Wenn Ihre Website Anfragen (Requests) an externe Parteien stellt – was höchstwahrscheinlich der Fall ist – kann dies das LCP beeinträchtigen. Vor allem, wenn diese benötigt werden, um kritische Inhalte auf der Seite anzuzeigen. Verwenden Sie rel=”preconnect” oder rel=”dns-prefetch”, um dem Browser mitzuteilen, dass Ihre Seite so bald wie möglich eine Verbindung herstellen möchte.

Client-seitiges Rendering

Wenn Ihre Website clientseitige Javascript-Logiken verwendet, um Seiten im Browser darzustellen, sollten Sie die folgenden Optimierungen in Betracht ziehen.

• Minimieren und komprimieren Sie die verwendeten Javascript-Dateien.
• Verschieben Sie ungenutztes (unwichtiges) Javascript.

Wie kann ich das LCP auf meiner Seite finden?

Es gibt kein Standardelement, was das LCP auf einer Seite ist, zum Beispiel ist es nicht das erste Element, das geladen wird. Es kann erst ermittelt werden, nachdem die gesamte Seite geladen wurde.

Um dies herauszufinden, können Sie die Google Chrome Dev Tools verwenden, die ohnehin ein sehr nützliches Tool zur Analyse Ihrer Ladezeit sind. Führen Sie die folgenden Schritte aus, um kritische Probleme auf Ihrer Website zu entdecken.

1. Öffnen Sie Google Chrome und gehen Sie zu der Seite, die Sie analysieren möchten.
2. Drücken Sie dann F12 (für Mac-Benutzer CMD+SHIFT+C) und das Google Chrome Dev-Tool wird auf der Website geöffnet.
3. Klicken Sie nun auf die Registerkarte“Leistung”.
4. Setzen Sie neben“Screenshots” auch ein Häkchen bei“Web Vitals”.
5. Klicken Sie nun auf die Schaltfläche“Aufzeichnen” und aktualisieren Sie die Seite.
6. Beenden Sie die Aufzeichnung, und wenn alles gut geht, sehen Sie jetzt dasselbe wie auf dem Screenshot unten.
7. Wenn Sie nun mit der Maus über den schwarzen“LCP” -Block in der Zeitleiste fahren, leuchtet das Element (in diesem Fall der Text) blau auf und Sie wissen, welches Element das “Largest Contentful Paint” für Ihre Seite ist.

Screenshot des Google Chrome Dev-Tools und der Hervorhebung des LCP auf dieser Seite

Wie löse ich Probleme mit einem übergroßen LCP?

Je nachdem, was sich bei der Analyse herausgestellt hat, muss festgelegt werden, was zu tun ist. Im Folgenden finden Sie einige Tipps für das LCP-Element. In der Regel ist das Element ein Bild, ein Video oder ein Text.

Das LCP ist ein Bild

Wenn es sich bei dem LCP um ein Bild handelt, können Sie die folgenden Punkte beachten:

• Hat das Bild das richtige Dateiformat? Kann das Bild zum Beispiel durch ein modernes Dateiformat wie SVG, JPEG 2000, JPEG XR oder WebP ersetzt werden?
• Hat das Bild das richtige Format? Wird das Bild in der mobilen Version beispielsweise mit 1920 Pixeln geladen, prüfen Sie, ob Sie ein anderes Dateiformat mit dieser Auflösung laden oder das Bild sogar weglassen können.
• Vergewissern Sie sich, dass Sie die richtigen (HTML-)Attribute verwenden, d. h. Höhe und Breite sowie imagesrcset. Auf diese Weise weiß der Browser, welches Bildformat er auf der Grundlage des Ansichtsfensters laden muss.
• Ist das Bild komprimiert? Manchmal können Sie ein Bild um bis zu 70 % in KB verkleinern. Mit einem guten Tool können Sie das Laden desselben Bildes ohne Qualitätsverlust erheblich verbessern. Sie können zum Beispiel Tools wie TinyPNG oder Kraken.io verwenden.
• Kann das Bild verschoben werden? Kann das Bild zum Beispiel später auf der Seite angezeigt werden? Wenn Sie das Bild dann auch noch“Lazyload” laden, wird sich das überhaupt nicht auf die anfängliche Ladezeit auswirken!

Das LCP ist ein Video

In dem Moment, in dem das LCP ein Video ist, sollten Sie die folgenden Punkte beachten:

• Ist es notwendig, dass das Video sofort abgespielt wird, oder können Sie das Video z. B. zunächst durch ein Bild mit einem “Play”-Symbol ersetzen, so dass das Video erst geladen wird, wenn der Besucher es tatsächlich sehen möchte?
• Hat das Video das richtige Format? Es gibt einige Richtlinien, die Sie einhalten können, um das Video für die Verwendung im Internet zu optimieren. Nämlich ein MP4-Dateiformat, 1080 Pixel und eine Bildrate von 24 oder 25 fps. Verwenden Sie die richtige Komprimierung, indem Sie das Video zum Beispiel mit einem Tool wie Cloudconvert bearbeiten.
• Entscheiden Sie sich bewusst für die Position des Videos auf der Seite, z. B. können Sie es später auf der Seite laden? Dann macht es einen großen Unterschied, wenn es außerhalb des Viewports liegt. Wenn Sie dies dann noch mit einer Lazyload-Funktion kombinieren, wirkt sich das überhaupt nicht auf die anfängliche Ladezeit aus.

Das LCP ist ein Textblock

Sie können die Texte auch über ein Kompressionsverfahren optimieren, zum Beispiel mit GZIP oder Brotli. Sie können die Dateigröße von Texten, die zwischen Server und Browser übertragen werden müssen, erheblich reduzieren. Wenden Sie sich an Ihren Website-Ersteller oder Webhosting-Anbieter, um zu erfahren, ob dies eingerichtet ist (oder eingerichtet werden kann).

Wichtig ist auch, dass Sie die Schrift vorladen und das richtige Dateiformat (.woff2) verwenden.

2. Erste Eingabeverzögerung (FID)

Die erste Eingabeverzögerung misst die Zeit von der ersten Interaktion eines Besuchers mit einer Seite bis zu dem Zeitpunkt, an dem der Browser in der Lage ist, Ereignisse (z. B. Klicks) zu einer Antwort auf die Interaktion zu verarbeiten.

Dies ist sehr wichtig, weil es zur Benutzerfreundlichkeit einer Website beiträgt. Wir alle wissen, wie wichtig der erste Eindruck ist, der von der visuellen Anziehungskraft bis zum ersten Eindruck von der Geschwindigkeit und Reaktionsfähigkeit der Website reichen kann.

Visuelle Attraktivität ist schwer zu messen, Geschwindigkeit und Reaktionsfähigkeit hingegen nicht! Dies kann den Unterschied ausmachen zwischen einem frustrierten Nutzer, der die Website verlässt, und einem treuen Kunden, der regelmäßig einen (Folge-)Kauf in Ihrem Webshop tätigt.

FID-Score und wie er zustande kommt

Das Ziel einer guten Website ist es, eine anfängliche Eingabeverzögerung von 100 Millisekunden oder weniger zu haben. Eine Eingabeverzögerung (auch Eingabelatenz genannt) wird in der Regel dadurch verursacht, dass der Browser mit etwas anderem beschäftigt ist, so dass er nicht auf den Benutzer reagieren kann.

Eine häufige Ursache ist, dass der Browser mit dem Parsen und Ausführen einer (großen) Javascript-Datei beschäftigt ist. Solange der Browser dies tut, kann er keine anderen Aufgaben ausführen. Solange der Browser also diese Aufgabe nicht abgeschlossen hat, kann er noch keine neue Aufgabe übernehmen, weil die Anpassungen der ersten Aufgabe noch nicht (vollständig) umgesetzt wurden.

Zwischen dem First Contentful Paint (FCP) und der Time To Interactive (TTI) entsteht ein hoher FID, weil ein Teil der Seite zwar angezeigt wird, aber noch nicht interaktiv ist. Das folgende Diagramm zeigt, wie eine “Pass-Through”-Website vom Browser geladen wird und wo der FID liegt.

Wie kann ich meinen FID-Wert ermitteln?

Es gibt mehrere Tools im Internet, um einen Einblick in den FID-Wert zu erhalten, eines davon ist das Online-Tool von Dunplab.it.

Screenshot aus dem Tool von Dunplab, ein Beispielergebnis aus dem Tool, das eine gute Punktzahl ergibt

Wie kann ich meinen FID verbessern?

Wie oben angedeutet, ist die Ursache für eine (zu) hohe FID-Bewertung oft die Ausführung großer Javascripts. Eine Verbesserung, die sich besonders stark auf den TTI auswirken kann, besteht darin, unnötige Javascripts zu verschieben und/oder zu entfernen.

Um die FID für Ihre Website zu verbessern, können Sie das Lighthouse Performance Audit verwenden. Dieses befindet sich derzeit unter einer Registerkarte in den Google Chrome Dev Tools. Führen Sie diese Prüfung auf Ihrer Seite durch und achten Sie auf alle Bereiche, in denen die Prüfung Verbesserungen empfiehlt.

Ganz allgemein können Sie die FID verbessern, indem Sie sich speziell mit den folgenden Bereichen befassen:

1. Reduzieren Sie die Verwendung (und die Auswirkungen) von Drittanbieter-Code, denken Sie an JavaScripts von Google Analytics, HotJar, Facebook-Pixel und andere.
2. Reduzieren Sie die JavaScript-Ausführungszeit, berücksichtigen Sie dabei die Anzahl der Anfragen, die Größe und die Rechenleistung der Skripte, die Sie auf Ihrer Website einsetzen.
3. Minimieren Sie den “Haupt-Thread” der Website, lösen Sie JavaScripts nur bei Bedarf und nicht sofort beim Laden der Seite aus, um die Interaktion mit dem Besucher zu verzögern.
4. Halten Sie die Anzahl der Anfragen gering und die Größe der Dateien klein.

3. Die kumulative Layout-Verschiebung (CLS) hervorgehoben

Der CLS misst die Summe aller individuellen Layoutverschiebungswerte für jede unerwartete Layoutverschiebung, die während des Ladens einer Webseite auftritt. Eine Layoutverschiebung tritt auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.

Warum ist dies für die Benutzerfreundlichkeit nachteilig?

Haben Sie schon einmal erlebt, dass Sie einen Artikel auf einer Website lesen und auf eine Schaltfläche klicken wollten, aber plötzlich ändert sich etwas auf der Seite, so dass Sie auf eine andere Schaltfläche klicken müssen? Ohne Vorwarnung bewegt sich der Text, und ehe Sie sich versehen, klicken Sie auf etwas anderes.

Normalerweise sind solche Erlebnisse einfach nur ärgerlich, aber im schlimmsten Fall können sie auch erheblichen Schaden anrichten. Um ein gutes Nutzererlebnis zu bieten, sollte eine Webseite einen CLS-Wert von 0,1 oder weniger erreichen.

Wie wird es verursacht?

Unerwartete Layout-Verschiebungen treten in der Regel auf, weil Ressourcen asynchron geladen werden oder DOM-Elemente per Javascript über bestehende Inhalte auf die Seite gelegt werden.

Häufig handelt es sich dabei um Bilder oder Videos mit unbekannten Abmessungen, eine Schriftart, die größer oder kleiner als die Fallback-Schriftart angezeigt wird, oder eine Anzeige bzw. ein Widget eines Drittanbieters, die bzw. das sich dynamisch auf der Website platziert.

Visualisiert, wie eine kumulative Layout-Verschiebung aussieht

Berechnung des CLS-Wertes

Es gibt mehrere Tools zur Ermittlung des CLS-Scores. Das beliebteste (und einfachste) ist die Verwendung der Google Chrome Dev Tools. Dazu gehört eine Registerkarte namens “Lighthouse”, die einen Bericht mit Ihrer CLS-Bewertung erstellt.

Es gibt auch eine Reihe von Websites, auf denen Sie Ihre Website scannen lassen können, z. B. über: https://layoutstability.rocks/.

Screenshot des Berichts, der mit dem Lighthouse-Tool in Google Chrome Dev Tools erstellt werden kann

Auswirkungsanteil

Der Auswirkungsanteil misst, wie instabile Elemente das Ansichtsfenster zwischen zwei (Render-)Frames beeinflussen.

Abstandsanteil

Der Abstandsanteil misst die Layoutverschiebung, um die sich instabile Elemente relativ zum Ansichtsfenster verschoben haben.

Das Beispiel zeigt, dass die Schaltfläche “Click me!” am unteren Rand des grauen Kastens hinzugefügt wurde. Dadurch wird der grüne Kasten nach unten und sogar aus dem Ansichtsfenster herausgeschoben.

Visualisiert, wie eine kumulative Layout-Verschiebung aussieht

• Die graue Fläche wird also größer, aber die Ausgangsposition ändert sich nicht, sie ist also nicht instabil
• Die Schaltfläche “Click me!” befand sich nicht im DOM und ändert daher ihre Startposition nicht.
• Die Startposition der grünen Fläche ändert sich zwar, aber da sie teilweise aus dem Ansichtsfenster verschoben wurde, kann dieser Teil nicht für die CLS-Berechnung berücksichtigt werden.

Der Aufprallanteil wird anhand der Größe der Ebene berechnet, auf die der Aufprall erfolgte. In diesem Fall waren dies 50 % des Ansichtsfensters. Der Aufprallanteil beträgt also 0,5.

Der Abstandsanteil wird durch den lila Pfeil dargestellt. Der grüne Kasten hat sich um etwa 14 % des Ansichtsfensters nach unten bewegt. Der Abstandsanteil beträgt also 0,14.

Der Layout Shift Score (CLS) beträgt also 0,5 x 0,14 = 0,07.

Wie kann ich mein CLS verbessern?

Um Ihre CLS zu verbessern, gibt es keine Standardregel oder -lösung, die Sie einfach auf Ihre Seite anwenden können, um das Problem zu lösen. Es gibt jedoch einige Richtlinien, die Sie befolgen können, um die Wahrscheinlichkeit von Problemen zu minimieren.

1. Fügen Sie Ihren Bild- und Videoelementen immer Abmessungen hinzu.
   Auf diese Weise reservieren Sie sofort den erforderlichen Platz, den das Element auf einer Seite benötigt. So wird der andere Inhalt nicht verschoben, wenn das Medienelement geladen wird. Dazu können Sie das Element z. B. mit einem Rahmen im Seitenverhältnis 16:9 oder 4:3 umgeben.
2. Fügen Sie niemals Inhalte über vorhandene Inhalte hinzu, es sei denn, Sie reagieren auf eine Benutzerinteraktion.
   Dies führt nämlich zu unerwarteten Verschiebungen im Layout für den Benutzer.
3. Nutzen Sie die so genannten CSS-‘Transformationsanimationen’, um Ihrer Website animierte Übergänge hinzuzufügen.
   Auf diese Weise springen keine Elemente auf Ihrer Website, verwenden Sie also keine “Margins” und “Paddings” für solche Effekte.

Andere Web Vitals

Während die Core Web Vitals derzeit die entscheidenden Kennzahlen für das Verständnis und die Bereitstellung einer großartigen Benutzererfahrung sind, gibt es noch andere, sicherlich nicht unwichtige Web Vitals. Diese dienen oft als zusätzliche Statistiken zur Bestimmung der Core Web Vitals.

Diese sind wie folgt.

• Time To First Byte (TTFB), d. h. die Zeit, die der Browser benötigt, um dem Benutzer das erste Byte des Seiteninhalts zu übermitteln.
• First Contentful Paint (FCP): Dies ist die Zeit vom Beginn des Ladens der Seite bis zur Anzeige des Inhalts (Text, Bilder usw.) auf dem Bildschirm.
• Total Blocking Time (TBT), misst die Gesamtzeit zwischen der FCP und der TTI, in der der Hauptthread lange genug blockiert ist, um eine Interaktion/Antwort vom Server zu verhindern.
• Time to Interactive (TTI), misst die Zeit zwischen dem Beginn des Ladens der Seite und dem Zeitpunkt, an dem die wichtigsten (Unter-)Ressourcen geladen sind und schnell und zuverlässig auf Benutzereingaben reagieren.

Nutzen Sie nützliche Tools

Um alle Dateneinblicke und Tipps zu erhalten, empfehlen wir die folgenden Tools. Viele dieser Tools nutzen das Lighthouse-Auditing-Tool.

1. Google Chrome Dev-Tool: Dieses Tool befindet sich im Google Chrome-Browser.
2. Google Pagespeed Einblicke
3. Dunplab Web Vitals Tester
4. Der CLS-Prüfer von Layoutstabilty

Eine gute Website ist enorm wichtig, aber eine gute Website besteht nicht nur aus guten (Core) Web Vitals. Sie muss eine Mischung aus attraktivem Design, Benutzerfreundlichkeit, Konversionsorientierung und SEO/Suchmaschinenoptimierung sein.

Es ist auch keineswegs so, dass sich all diese Komponenten gegenseitig verstärken, ja, sie können sich sogar gegenseitig beißen. Deshalb ist es wichtig, sich bei der Erstellung einer neuen Website Gedanken über die Strategie und den Aufbau der Website zu machen, damit Sie in allen Bereichen das Beste aus Ihrer Website herausholen können und diese auch technisch machbar ist.

Haben Sie aufgrund meines Artikels noch Fragen oder sind Sie neugierig, was wir für Sie tun können? Zögern Sie nicht und kontaktieren Sie uns unverbindlich!