Ein praktischer Leitfaden zu Core Web Vitals erklärt

Dieser Leitfaden erklärt Core Web Vitals erklärt praxisnah und mit Fokus auf datenschutzfreundliche Analytics-Entscheidungen.

Core Web Vitals sind die kleinen nutzerzentrierten Leistungsmetriken von Google: Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift. Sie sind wichtig, weil sie beschreiben, was Besucher fühlen: ob die Seite schnell lädt, auf Berührungen oder Klicks reagiert und ein Herumspringen vermeidet.

Die aktuelle Web Vitals-Dokumentation von Google identifiziert LCP, INP und CLS als die stabilen Core Web Vitals und erläutert den metrischen Lebenszyklus (web.dev Web Vitals). INP hat First Input Delay am 12. März 2024 offiziell als Core Web Vital ersetzt, wie Google in seinem Search Central-Update angekündigt hat.

Behandeln Sie Core Web Vitals als Diagnose- und One-Page-Experience-Signal, nicht als magischen SEO-Schalter. Bessere Vitalwerte können Benutzern helfen und einen Ranking-Nachteil beseitigen, sie ersetzen jedoch nicht Relevanz, Inhaltsqualität, Autorität oder Produkteignung.

Die drei Core Web Vitals

Largest Contentful Paint (LCP)

LCP misst, wann das größte sichtbare Inhaltselement mit dem Rendern fertig ist. Dabei handelt es sich in der Regel um ein Heldenbild, eine große Überschrift, ein Produktbild oder einen Hauptinhaltsblock.

Ziel: gut LCP ist für die meisten Seitenladevorgänge 2,5 Sekunden oder schneller.

Häufige LCP-Probleme:

• Langsame Serverantwort
• Große, nicht optimierte Heldenbilder
• Renderblockierendes CSS
• Clientseitige Rendering-Verzögerungen
• Web-Schriftarten blockieren Text
• Versehentliches verzögertes Laden des Hauptbildes

So verbessern Sie es:

• Stellen Sie HTML schnell vom Rand oder einem schnellen Ursprung aus bereit.
• Komprimieren Sie Heldenbilder und ändern Sie ihre Größe.
• Verwenden Sie gegebenenfalls moderne Formate wie AVIF oder WebP.
• Laden Sie das echte LCP-Image vor.
• Kritisches CSS integrieren oder priorisieren.
• Vermeiden Sie es, den Hauptinhalt auf Analysen, Einwilligungstools oder Tag-Manager warten zu lassen.

Interaction to Next Paint (INP)

INP misst die Reaktionsfähigkeit über Interaktionen hinweg, nicht nur die erste Eingabe. Es erfasst, wie lange es dauert, bis die Seite nach Klicks, Tippen und Tastaturinteraktionen sichtbar reagiert.

Ziel: gut INP liegt unter 200 Millisekunden.

INP wird oft durch JavaScript beschädigt. Lange Aufgaben, Hydratation, Analyseskripte, Chat-Widgets, Personalisierungstools und umfangreiche Tags von Drittanbietern können alle um den Hauptthread konkurrieren.

So verbessern Sie es:

• Reduzieren Sie den auf die Seite gesendeten JavaScript-Code.
• Große Bündel aufteilen.
• Verzögern Sie unkritische Skripte von Drittanbietern.
• Vermeiden Sie teure Arbeiten an Click-Handlern.
• Verwenden Sie Web-Worker für umfangreiche Berechnungen.
• Teilen Sie lange Aufgaben in kleinere Teile auf.
• Testen Sie mobile Geräte der unteren Preisklasse, nicht nur Entwickler-Laptops.

Analysen können sich auf INP auswirken, wenn übermäßig viele Ereignis-Listener angehängt werden, synchrone Arbeit ausgeführt wird oder über einen umfangreichen Tag-Manager geladen wird. Ein kleines Skript, bei dem der Datenschutz an erster Stelle steht, ist nicht nur besser für das Vertrauen; es ist oft besser für die Reaktionsfähigkeit.

Cumulative Layout Shift (CLS)

CLS misst unerwartete visuelle Bewegungen. Eine Seite fühlt sich kaputt an, wenn sich Text, Schaltflächen oder Bilder verschieben, nachdem der Benutzer mit dem Lesen oder Tippen begonnen hat.

Ziel: gut CLS ist 0,1 oder niedriger.

Häufige CLS-Probleme:

• Bilder ohne Maße
• Anzeigen oder Einbettungen, die ohne reservierten Platz eingefügt werden
• Cookie-Banner, die Inhalte nach dem Laden weiterleiten
• Verspäteter Austausch von Web-Schriftarten
• Dynamischer Inhalt, der über dem vorhandenen Inhalt eingefügt wird

So verbessern Sie es:

• Legen Sie Breite und Höhe oder Seitenverhältnis für Medien fest.
• Reservieren Sie Platz für Banner, Einbettungen und Anzeigen.
• Vermeiden Sie es, Inhalte nach dem Laden oberhalb des Falzes einzufügen.
• Verwenden Sie Strategien zum Laden von Schriftarten, die Verschiebungen minimieren.
• Testen Sie mit echten Einwilligungsbannern und aktivierten echten Marketing-Tags.

Felddaten vs. Labordaten

Labortools wie Lighthouse sind für das Debuggen nützlich, da sie kontrollierte Tests ausführen. Felddaten sind das, was echte Benutzer erlebt haben. Sie brauchen beides.

Nutzen Sie Labordaten, um Probleme zu reproduzieren und zu beheben. Nutzen Sie Felddaten zur Priorisierung. Eine Seite, die im Labor gut abschneidet, kann für echte Besucher auf langsamen Geräten, überlasteten Mobilfunknetzen oder Browsern, die von Skripten Dritter betroffen sind, dennoch eine schlechte Leistung erbringen.

Googles Chrome User Experience Report (CrUX) ist eine Quelle öffentlicher Felddaten für geeignete Ursprünge. Ihre eigene Überwachung realer Benutzer kann spezifischer sein, da sie nach Vorlage, Gerät, Kampagne, Anmeldestatus und Release-Version segmentiert werden kann.

Halten Sie bei der Messung von Verbesserungen die Methode konsistent. Vergleichen Sie dieselben Vorlagen, Geräteklassen, Länder und Veröffentlichungsfenster. Verwenden Sie das 75. Perzentil, da die Core Web Vitals-Schwellenwerte über Seitenladevorgänge hinweg ausgewertet werden und nicht über eine einzelne Ausführung auf einem Entwickler-Laptop.

Warum Analytics-Entscheidungen wichtig sind

Leistungsbudgets konzentrieren sich häufig auf Bilder und Anwendungspakete und ignorieren Messskripte. Das ist ein Fehler.

Tag-Manager können mehrere Anbieter laden, jeweils mit Netzwerkanfragen, JavaScript-Ausführung, Cookies und Ereignis-Listenern. Consent-Management-Plattformen können sich auch auf die Leistung auswirken, wenn sie das Rendern blockieren, eine späte Benutzeroberfläche einfügen oder eine Neubewertung von Tags nach der Benutzerauswahl auslösen.

Prüfung:

• Gesamtgewicht der Skripte von Drittanbietern
• Anzahl der Netzwerkanfragen vor LCP
• Blockierungszeit des Haupt-Threads durch Analysen und Anzeigen-Tags
• Ob Analysen vor kritischen Inhalten geladen werden
• Ob die Einwilligungs-Benutzeroberfläche eine Layoutverschiebung verursacht
• Ob ungenutzte Tags noch ausgelöst werden

Entfernen Sie Tags, die eine aktuelle Entscheidung nicht unterstützen. Ersetzen Sie umfangreiche Analysen nach Möglichkeit durch schlankere Gesamtmessungen.

Eine praktische Optimierungsreihenfolge

1. Messen Sie LCP, INP und CLS echter Benutzer anhand wichtiger Vorlagen.
2. Identifizieren Sie die schlechteste Vorlage, nicht die schlechteste Einzelperson URL.
3. Korrigieren Sie zuerst die Serverantwort und die LCP-Bildbereitstellung.
4. Entfernen oder verschieben Sie nicht kritisches JavaScript.
5. Reservieren Sie Platz im Layout für Medien, Einbettungen, Anzeigen und Banner.
6. Wiederholen Sie den Test auf dem Mobilgerät.
7. Beobachten Sie die Felddaten mindestens einen vollständigen Verkehrszyklus lang.

Streben Sie nicht nach einem perfekten Lighthouse-Score auf Kosten echter Benutzer. Eine Checkout-Seite mit etwas schwererem JavaScript kann akzeptabel sein, wenn sie reaktionsfähig und stabil ist. Eine Marketingseite ohne App-Logik sollte extrem schlank sein.

Core Web Vitals QA

Bevor Sie den Sieg verkünden, überprüfen Sie Folgendes:

• Sowohl die Labor- als auch die Felddaten entwickelten sich in die erwartete Richtung.
• Die schlechtesten mobilen Vorlagen wurden verbessert, nicht nur die Homepage.
• Einwilligungsbanner, GTM, Anzeigen, Chat und Analysen wurden während realistischer Tests aktiviert.
• LCP-, INP- und CLS-Änderungen stehen im Zusammenhang mit Konvertierung, Anmeldung, Content-Engagement, Support-Ablenkung oder Umsatzqualität.
• Backend-Ergebnisse werden bei der Messung der Geschäftsauswirkungen mit der Browseranalyse abgeglichen.

Halten Sie Diagnosemetriken von Entscheidungsmetriken getrennt. Ein besserer INP-Score erklärt, warum sich ein Formular schneller anfühlt; Die Geschäftsmetrik ist, ob mehr Leute es beenden.

Das Fazit

Core Web Vitals belohnen das gleiche Verhalten, das Besucher bereits belohnen: schnelle Inhalte, reaktionsschnelle Steuerung und stabile Layouts. Der schnellste Weg ist meist kein Exot. Versenden Sie weniger JavaScript, priorisieren Sie den Hauptinhalt, reservieren Sie Platz und hören Sie auf, Tags zu laden, die ihren Unterhalt nicht verdienen.