Was sind Core Web Vitals und wie kann man sie verbessern?

Was sind Core Web Vitals und wie kann man sie verbessern?

- • Google

Im vergangenen November kündigte Google an, dass das neue Algorithmus-Update für die Seitenerfahrung im Mai 2021 ausgerollt werden würde, was eine ganze Reihe neuer Erwartungen an die Website-Betreiber stellt.

Die Einführung soll nun aber erst Mitte Juni erfolgen, was uns allen mehr Zeit zur Vorbereitung gibt.

Ein großer Teil des Updates konzentriert sich auf drei neue Metriken, die so genannten Core Web Vitals, die Google verwenden wird, um festzustellen, ob Ihre Website ein gutes Nutzererlebnis bietet oder nicht.

Was sind Core Web Vitals?

Diese Metriken sind:

  • Kumulative Layout-Verschiebung (CLS)
  • Largest Contentful Paint (LCP)
  • Erste Eingangsverzögerung (FID)

Um Ihnen zu helfen, den Kerntest der Webvitalität zu bestehen, werden wir untersuchen, wie Sie Probleme auf Ihrer Website identifizieren und die Leistung Ihrer Website in einfachen Schritten optimieren können.

Core Web Vitals Checkliste: Überprüfen Ihrer Site Experience

Bevor Sie damit beginnen können, Ihre zentralen Webvitalien zu verbessern, müssen Sie wissen, wo Ihre Website zurückbleibt. Lassen Sie uns also eine einfache Checkliste durchgehen, die Sie befolgen können, um Optimierungsmöglichkeiten zu finden:

  1. Prüfen Sie den Google Core Web Vitals Bericht
  2. Potenzielle Probleme identifizieren
  3. Tiefer gehen mit PageSpeed Insights
  4. Verwenden Sie die Core Web Vitals-Erweiterung, um einzelne Seiten in Echtzeit zu überprüfen (optional)

1. Überprüfen Sie den Bericht über Ihre wichtigsten Webvitalitäten in der Google Search Console

Google hat einen neuen Satz von Berichten in der Search Console hinzugefügt. In diesem Artikel konzentrieren wir uns auf den Bericht "Core Web Vitals".

Beispiel eines Core Web Vitals-Berichts in der Google Search Console

Wenn Sie auf die Registerkarte klicken, sehen Sie zwei verschiedene Grafiken: eine für die mobile Darstellung Ihrer Website und eine andere für die Desktop-Darstellung Ihrer Website.

Wie Sie in der obigen Grafik sehen können, hat NexHealth 204 schlechte URLs auf dem Handy und 190 auf dem Desktop. Wir empfehlen, dass Sie sich zuerst Ihren mobilen Bericht ansehen, da Google (überwiegend) die mobile Version Ihrer Website für die Indexierung verwendet (hier finden Sie weitere Informationen über die mobile-first Indexierung von Google).

Screenshot des Google Search Console Mobile Reports

Nachdem Sie auf "Bericht öffnen" geklickt haben, zeigt die Google Search Console (GSC), wo Ihre Seiten fehlerhaft sind. In diesem Fall scheint es so zu sein, dass die größte inhaltsreiche Farbe (LCP) länger als 4 Sekunden ist - weit jenseits der optimalen Geschwindigkeit von 2,5 Sekunden.

Wenn Sie auf das Problem klicken, wird Ihnen eine Liste von URLs angezeigt, die das gleiche Problem aufweisen.

Screenshot der betroffenen URLs Bericht Suchkonsole

Um sich die restlichen URLs anzusehen, klicken Sie einfach auf die Beispielseite, und Sie können die restlichen Seiten sehen.

Screenshot der Google Search Console Pagespeed Insights

2. Mögliche Probleme identifizieren

Hier wird es interessant. Search Console zeigt uns 190 URLs mit LCP-Problemen. Allerdings sind die meisten dieser Seiten tatsächlich App-bezogene Seiten.

Natürlich ist eine großartige Benutzererfahrung auf Ihrer App genauso wichtig wie auf Ihrer Website, aber vielleicht nicht so entscheidend für SEO.

Zum Beispiel könnte es für Anmeldeseiten kritischer sein, die erste Eingabeverzögerung (FID) zu optimieren, weil das, was die Benutzer interessiert, die Möglichkeit ist, ihre Anmeldedaten hinzuzufügen und sich bei ihren Konten anzumelden.

In diesem speziellen Fall wäre die Zeit, die zum Laden eines Hintergrundbildes benötigt wird, keine so große Sache.

Hinweis: John Muller bestätigt, dass Relevanz immer noch ein entscheidender Ranking-Faktor in Googles SEO-Bürozeiten ist. Passen Sie also Ihre Optimierungsstrategie entsprechend der Intention Ihrer Nutzer an.

3. Gehen Sie dem Problem mit PageSpeed Insights auf den Grund

Wenn Sie sich die kumulative Layoutverschiebung (CLS) von Rooftop Designs ansehen, sehen Sie, dass sie über 0,25 Sekunden liegt; 0,1 Sekunden ist die optimale CLS-Zeit, um das "gute" Ergebnis zu erreichen.

Beispiel für URLs, die vom Cumulative Layout Shift betroffen sind

Dies sind definitiv Seiten, die Sie bei Google ranken wollen. Lassen Sie uns also einen Blick auf Ihre Hauptseiten innerhalb von PageSpeed Insights werfen, indem Sie auf den Shortcut rechts klicken.

Beispiel eines Pagespeed Insights-Berichts

Deshalb ist es wichtig, sich nicht nur auf ein Tool zu verlassen. Sie wollen sicherstellen, dass Sie das Gesamtbild sehen.

Das Page Speed Tool registriert kein CLS-Problem, aber es identifiziert LCP-Probleme auf der Seite "Über uns".

Dieses Tool liefert auch einen detaillierteren Bericht über diese Probleme und mögliche Anleitungen zu deren Lösung.

Beispiel eines Diagnoseberichts für LCP-Probleme

Tipp: Sie könnten auch einen Test mit GTmetrix durchführen, um mehr Daten zum Vergleich zu sammeln.

4. Überprüfen Sie die Hauptseiten auf Ihrer Website mit der Core Web Vitals-Erweiterung (Optional)

Wenn Sie noch einen Schritt weiter gehen wollen, können Sie auch einzelne Seiten mit der Core Web Vitals-Erweiterung überprüfen, um Probleme in Echtzeit zu erkennen.

Sobald Sie sie in Ihrem Browser installiert haben, misst die Erweiterung die drei Metriken, während die Seite geladen wird.

Tipp: Nutzen Sie diese Zeit, um die Gesamtleistung Ihrer Seite zu überprüfen. Klicken Sie auf verschiedene Links, schauen Sie sich die Dateigröße und das Format Ihrer Bilder an, navigieren Sie auf Ihrer Seite und notieren Sie alle Probleme, die auftauchen.

Während Sie diese Checkliste abarbeiten, machen Sie sich Notizen in einem Dokument oder einer Tabelle und setzen sich entsprechende Ziele.

Nun, da Sie eine Liste von URLs und Problemen haben, um die Sie sich kümmern müssen, ist es an der Zeit, zur eigentlichen Optimierung überzugehen.

So verbessern Sie Ihren Core Web Vitals Score

Checkliste für die Verbesserung des Core Web Vitals Scores

Obwohl wir über jedes Web-Vital einzeln sprechen werden, ist es wichtig, die Geschwindigkeit Ihrer Website als eine Kombination aus verschiedenen Elementen und Interaktionen zu verstehen.

Dinge, die Ihr CLS verbessern können, können Ihnen auch bei Ihrer FID helfen, und manchmal können sogar "nicht verwandte" Optimierungen Ihre Kern-Webvitalien beeinflussen, ohne dass es Ihre Absicht ist.

Letztendlich geht es Google um ein besseres Nutzererlebnis für die Anwender, nicht nur darum, dass Sie bestimmte Zahlen erreichen.

Beginnen wir also mit der Verbesserung Ihrer kumulativen Layout-Verschiebung.

So verbessern Sie das CLS Ihrer Website

Ein stabiles Layout ist für die Benutzer wichtig, denn wenn sich die Dinge abrupt bewegen, kann dies zu sehr unangenehmen Situationen führen.

Ein einfaches Beispiel ist ein Fehlklick:

  • In manchen Fällen kann es lästig sein, z. B. wenn sich Dinge bewegen, während Sie in einem Menü navigieren und Sie auf eine andere Seite klicken müssen.
  • In einem eCommerce-Szenario könnte dies auch zu einer Quelle von Stress und Angst werden (z. B. wenn Sie Ihre Bestellung stornieren möchten, aber stattdessen auf "Bestätigen" klicken).

Sie wollen es für die Benutzer konsistent halten, damit sie die bestmögliche Interaktion haben. 

Und wie macht man das?

1. Fügen Sie ein Attribut für Breite und Höhe für alle Ihre Bilder hinzu

Dadurch wird dem Browser mitgeteilt, wie viel Platz er in seinem Layout für das Bild reservieren muss.

 Zum Beispiel:

<! — set a 640:360 i.e a 16:9 — aspect ratio →
<img src=”laptop.jpg” width=”640" height=”360" alt=”Macbook Air M1 2021” />

Wenn Sie Ihren Browser verlangsamen und Ihre Seite laden, nachdem Sie diese Attribute hinzugefügt haben, werden Sie feststellen, dass er jetzt den Platz auf dem Artikel beibehält, während die Bilder geladen werden, und so verhindert, dass sich das Layout verschiebt.Bei der Optimierung von responsiven Bildern könnten Sie srcset verwenden, um dem Browser mitzuteilen, welche Bilder er auswählen soll und welche Abmessungen sie haben:

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Beispiel aus web.dev

2. Platz für den Anzeigenplatz statisch reservieren

Auf diese Weise stylen Sie das Element, bevor die Anzeigen-Tag-Bibliothek geladen wird.

Da Werbenetzwerke unterschiedliche Größen von Anzeigen ausliefern, müssen Sie sich Ihre Seiten bei verschiedenen Gelegenheiten, in verschiedenen Browsern und - wenn möglich - in verschiedenen Konten ansehen, um die optimale Dimension für das Element herauszufinden.

Versuchen Sie auch, Ihre Anzeigen nicht am oberen Rand der Seite oder im Heldenbereich einzufügen. Es ist besser, wenn sie im Inhaltsfluss geladen werden und, noch besser, außerhalb des Bildschirms.

3. Optimieren Sie die Schriftdarstellung mit link rel=vorladen und font-display: optional

Die Verwendung von rel=preload bewirkt, dass der Browser eine Fallback-Schriftart anzeigt, wenn Ihre benutzerdefinierte Schriftart nicht vor 100 ms geladen wird, und verhindert so ein Aufblitzen von unsichtbarem Text.

Wenn Ihre benutzerdefinierte Schriftart hingegen vor dem 100ms-Zeitraum heruntergeladen wird, zeigt der Browser sie an, ohne die Schriftart zu wechseln. Dadurch wird verhindert, dass sich das Layout verschiebt, um die neue Schriftart unterzubringen.

So verbessern Sie das LCP Ihrer Website

Angenommen, Sie klicken auf einen Link, und auf der Zielseite sehen Sie für etwa 3 Sekunden einen Textblock und viel Weiß im Hintergrund.

Was ist Ihr erster Gedanke? Als es uns passiert ist, war das erste, was uns in den Sinn kam, "diese Seite ist kaputt".

LCP ist ein Signal für Benutzer, dass die Website, auf der sie angekommen sind, funktional ist und den gesuchten Inhalt hat.

Sie möchten, dass Ihr "above-the-fold"-Inhalt so schnell wie möglich sichtbar ist, einschließlich aller Videos oder Bilder, die Sie dem Benutzer präsentieren möchten.

Wenn Sie Ihr LCP optimieren, wollen Sie sich auf ein Wort konzentrieren: Geschwindigkeit!

1. Optimieren Sie Ihre Bilder

Die Größe Ihrer Bilddatei ist ein wesentlicher Faktor für LCP. Größere Dateigröße = langsamere Ladezeiten.

Um sie zu verkleinern, gibt es drei Dinge, die Sie tun können:

  • Stellen Sie die richtige Dimension ein: 4000 mal 4000 Bilder sind nicht sinnvoll. Überlegen Sie, wie Sie Ihr Bild verwenden werden und was die besten Abmessungen dafür sind. In den meisten Fällen ist 1200 x 1200 mehr als genug.
  • Verwenden Sie JPGs anstelle von PNGs: Allein durch die Änderung des Formats können Sie die Größe Ihrer Bilddateien drastisch reduzieren.
  • Komprimieren Sie Ihre Bilder mit TinyJPG.

2. Aktualisieren Sie Ihren Hosting-Plan.

Eine schnellere Serverantwort verbessert die Ladegeschwindigkeit Ihrer Seite.

Eine einfache Möglichkeit, die Leistung Ihres Servers zu sehen, ist die Messung der Time to First Byte (TTFB) der Seite mit einem Tool wie KeyCDN.

Alles, was Sie tun müssen, ist die Seite in die Leiste einzugeben und die Analyse zu starten:

Leistungstest

Nach der Analyse liefert Ihnen das Tool die Zeiten in Abhängigkeit vom Ort der Anfrage.

Screenshot des Leistungstests der Seitenladegeschwindigkeit

Eine weitere Möglichkeit, Ihren TTFB zu verbessern, besteht darin, ein Content Delivery Network (CDN) wie Cloudflare zu verwenden, um die Assets Ihrer Seite vom nächstgelegenen Server zu hosten und zu verteilen.

Tipp: Verwenden Sie link rel="preload", um den Browser zu veranlassen, wichtige Assets zu priorisieren und diese zuerst zu laden. Hier ist ein kurzes Beispiel für die Verwendung von link re="preload".

3. Verwenden Sie träges Laden

Bei LCP geht es darum, wie lange es dauert, bis der Browser das lädt, was der Benutzer auf seinem Bildschirm sehen kann. Das bedeutet, dass alles, was unter dem Falz ist, warten kann.

Indem Sie Lazy Loading aktivieren, überlassen Sie dem Browser die im Viewport sichtbaren Elemente, wodurch die LCP-Zeit Ihrer Seite beschleunigt wird.

Obwohl Sie dies mit JavaScript tun können, würde dies auch dazu führen, dass der Browser Zeit beim Parsen des Skripts verschwendet. Verwenden Sie stattdessen das native lazy-Attribut innerhalb des Bild-Tags wie folgt:

<img src=”happy-cat.jpg” loading=”lazy” alt=”kitty playing with balloons” />

Hinweis: Hier ist ein Artikel von unserem CTO, Zoltan Bettenbuk, darüber, wie man die Ladegeschwindigkeit einer Website verbessern kann. Sie finden einige Beispielcodes, die Sie sofort implementieren können.

Wie Sie die FID-Zeit Ihrer Website senken können

In Bezug auf die erste Eingabeverzögerung (FID) müssen Sie sich in die Lage Ihrer Benutzer versetzen. Wenn Ihre Seite geladen wird, was wollen sie dann tun? Wenn Sie auf unsere Homepage gehen, werden Sie sehen, dass wir ein Formular direkt im Heldenbereich und zwei Schaltflächen in der rechten Ecke haben.

Unsere FID ist die Zeit, die der Benutzer benötigt, um mit unserem Formular oder der Anmeldeschaltfläche zu interagieren.

Wie Sie sich vorstellen können, werden Optimierungen, die für LCP funktionieren, auch dazu beitragen, dass Ihre interaktiven Elemente schneller geladen werden. Es gibt jedoch noch ein paar andere Dinge, die Sie tun können, um die FID-Zeit zu verringern:

1. Javascript verschieben

Wenn Sie Ihr JavaScript verschieben, weisen Sie den Browser an, Ihre JS-Datei zu laden, nachdem andere Elemente geladen wurden (z. B. HTML und CSS), wodurch der Hauptinhalt Ihrer Seiten schneller geladen wird.

Hier finden Sie eine ausführliche Anleitung zur effizienten Verwendung des Attributs "defer".

2. Web-Worker verwenden

Ein Web-Worker trennt Nicht-Benutzeroberflächen-Operationen von einem separaten Worker-Thread, wodurch es möglich ist, JS auf einem Hintergrund-Thread auszuführen. Dies hilft der Website, FID schneller zu erreichen.

Hier sind die empfohlenen Bibliotheken von web.dev:

3. Prerender® installieren

Wie bereits erwähnt, tragen Hunderte von verschiedenen Elementen zur Gesamtgeschwindigkeit der Seite bei, was es schwieriger macht - besonders wenn Ihre Seite sehr JavaScript-lastig ist - eine gute Balance zwischen Funktionalität und Geschwindigkeit zu finden.

Genau hier setzt Prerender® an. Unsere Lösung rendert Ihre Seiten vorab auf einem schnellen Server (unter 500ms Antwortzeit) und optimiert sie für den User Agent.

Wenn der User-Agent ein Crawler wie Google ist, stellt Prerender® diesem eine statische HTML-Version zum Crawlen und Indizieren zur Verfügung.

Im Gegenteil, wenn die Middleware den User-Agent als Mensch identifiziert, leitet Prerender® ihn über Ihre normalen Serverrouten um.

Einpacken

Das beste Benutzererlebnis für Ihr Publikum zu bieten, ist entscheidend für den langfristigen Erfolg.

Neben dem Ranking haben Seiten mit exzellenter Benutzererfahrung bessere Konversionsraten und mehr wiederkehrende Benutzer und werden eher geteilt. Letzteres kann mehr organische Links bedeuten, was Ihre Rankings noch weiter steigern kann. Haben Sie Zweifel, wie Sie Ihre Seitengeschwindigkeit verbessern können? Lassen Sie es uns auf Twitter wissen, und wir werden dafür sorgen, dass Ihre Seite schneller gerendert wird.