Wichtige Fakten - Web Vitals messen

Bevor Sie irgendetwas optimieren, sollten Sie Core Web Vitals messen: LCP, INP und CLS beschreiben, was Besucher beim Laden, beim Reagieren und beim Springen des Layouts tatsächlich erleben.

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. Dieses Element ist auf den meisten Seiten das Heldenbild, eine große Überschrift, ein Produktbild oder der 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 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 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.

Häufig gestellte Fragen

Was sind die drei Core Web Vitals?

Core Web Vitals sind Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift. Googles Web-Vitals-Dokumentation nennt diese drei als die stabilen Core Web Vitals. Zusammen decken sie Ladezeit, Reaktionsfähigkeit und visuelle Stabilität ab, also genau das, was die meisten Besucher an der Seitengeschwindigkeit bemerken.

Was gilt als guter LCP-Wert?

Ein guter LCP liegt bei 2,5 Sekunden oder schneller für die meisten Seitenaufrufe. LCP misst, wann das größte sichtbare Inhaltselement fertig gerendert ist, oft ein Hero-Bild oder eine große Überschrift. Langsame Serverantworten, unoptimierte Hero-Bilder und renderblockierendes CSS sind die üblichen Ursachen für einen schlechten Wert.

Was gilt als guter INP-Wert?

Ein guter INP liegt unter 200 Millisekunden. INP misst, wie lange eine Seite braucht, um sichtbar auf Klicks, Taps und Tastatureingaben zu reagieren, nicht nur auf die erste Interaktion. Lange JavaScript-Aufgaben, Hydration und schwere Drittanbieter-Tags sind die häufigsten Ursachen für einen schlechten Wert.

Was gilt als guter CLS-Wert?

Ein guter CLS liegt bei 0,1 oder niedriger. CLS misst unerwartete visuelle Bewegung, also den Effekt, wenn Text oder Buttons verrutschen, während jemand liest oder tippt. Bilder ohne festgelegte Abmessungen und spät ladende Web-Fonts sind häufige Ursachen.

Wann hat INP First Input Delay als Core Web Vital ersetzt?

INP hat First Input Delay am 12. März 2024 offiziell als Core Web Vital ersetzt. Google kündigte die Änderung in seinem Search-Central-Update an. Der Wechsel verlagerte die Messung der Reaktionsfähigkeit von einer einzelnen ersten Interaktion auf die gesamte Bandbreite an Klicks, Taps und Tastatureingaben auf einer Seite.

Beeinflussen Core Web Vitals das Google-Ranking direkt?

Bessere Core Web Vitals können einen Rankingnachteil beseitigen und die Erfahrung für Besucher verbessern, funktionieren aber nicht als eigenständiger Rankinghebel. Sie sind ein Diagnosewerkzeug und ein Page-Experience-Signal unter vielen. Relevanz, Inhaltsqualität, Autorität und Produkteignung bestimmen weiterhin das Ergebnis.

Was unterscheidet Felddaten von Labordaten?

Labordaten stammen aus kontrollierten Tools wie Lighthouse und eignen sich, um konkrete Probleme nachzuvollziehen und zu beheben. Felddaten spiegeln wider, was echte Nutzer tatsächlich auf ihren eigenen Geräten und Netzwerken erlebt haben, und sie sollten die Priorisierung leiten. Eine Seite kann im Labor gut abschneiden und für echte Besucher auf langsamen Geräten oder überlasteten Netzwerken trotzdem schlecht funktionieren.

Warum können Analytics-Skripte den INP verschlechtern?

Analytics-Skripte können den INP verschlechtern, wenn sie zu viele Event-Listener anhängen, synchrone Arbeit ausführen oder über einen schweren Tag-Manager geladen werden, was alles den Hauptthread belastet. Tag-Manager laden oft mehrere Anbieter gleichzeitig, jeder mit eigenen Netzwerkanfragen und eigener JavaScript-Ausführung. Ein kleineres, datenschutzfreundliches Skript ist leichter für den Hauptthread und schafft zugleich mehr Vertrauen.

Warum werden Core Web Vitals am 75. Perzentil gemessen?

Die Schwellenwerte für Core Web Vitals werden über alle Seitenaufrufe hinweg bewertet, nicht anhand eines einzelnen besten Durchlaufs auf einem Entwickler-Laptop. Das 75. Perzentil zeigt ein realistisches Bild dessen, was die meisten Besucher erleben, einschließlich der langsameren Geräte und Verbindungen im Mix. Der Vergleich derselben Templates, Geräteklassen, Länder und Release-Fenster bei diesem Perzentil hält die Messung über die Zeit konsistent.

Was verursacht häufig Cumulative Layout Shift?

Häufige Ursachen sind Bilder oder Embeds ohne reservierten Platz, Anzeigen ohne feste Größe, Cookie-Banner, die Inhalte nach dem Laden nach unten schieben, und Web-Fonts, die spät wechseln. Dynamisch eingefügter Inhalt oberhalb von bereits vorhandenem Inhalt ist ein weiterer häufiger Auslöser. Platz für Medien und Banner im Voraus zu reservieren und mit echten Consent-Tools zu testen, behebt die meisten dieser Fälle.