Core Web Vitals sind drei Messwerte, die beschreiben, wie sich eine Seite für eine reale Person auf einem realen Gerät anfühlt. Google nutzt sie als Ranking-Signal, das stärkere Argument ist jedoch wirtschaftlich: Seiten, die alle drei bestehen, konvertieren spürbar besser, weil Menschen nicht auf träge Oberflächen warten.
Die drei Messwerte in einfachen Worten
- LCP, Largest Contentful Paint: wie lange es dauert, bis das größte sichtbare Element erscheint. Zielwert unter 2,5 Sekunden.
- INP, Interaction to Next Paint: wie schnell die Seite nach einer Berührung oder einem Klick reagiert. Zielwert unter 200 Millisekunden.
- CLS, Cumulative Layout Shift: wie stark das Layout während des Ladens springt. Zielwert unter 0,1.
Messen Sie im Feld, nicht im Labor. Lighthouse liefert einen simulierten Wert auf einem simulierten Gerät. Der Chrome User Experience Report und der Bericht in der Search Console zeigen, was Ihre tatsächlichen Besucherinnen und Besucher in den vergangenen 28 Tagen erlebt haben. Widersprechen sich beide, haben die Felddaten recht.
LCP verbessern
In neun von zehn Fällen ist das größte Element das Hero-Bild oder die Überschrift darüber, und die Verzögerung stammt aus drei Quellen: einer langsamen Serverantwort, blockierenden Ressourcen und einem Bild, dessen Download zu spät beginnt.
- Zwischengespeichertes HTML aus einem Edge-Standort ausliefern, sodass der Server in unter 200 Millisekunden antwortet.
- Das Hero-Bild vorladen und mit fetchpriority high auszeichnen; im sichtbaren Bereich kein Lazy Loading verwenden.
- Bilder als AVIF oder WebP mit expliziter Breite und Höhe ausliefern, passend zum tatsächlich genutzten Breakpoint.
- Schriften selbst hosten, auf die benötigten Zeichen reduzieren und font-display swap mit einer metrisch angepassten Ersatzschrift einsetzen.
- Skripte von Dritten wie Chat-Widgets und Tag-Manager unter den sichtbaren Bereich verlagern oder vollständig verzögern.
INP verbessern
INP hat im März 2024 den First Input Delay abgelöst und lässt sich deutlich schlechter beschönigen. Gemessen wird der gesamte Weg von der Interaktion bis zum nächsten gezeichneten Bild, wodurch lange JavaScript-Aufgaben unmittelbar bestraft werden. Übliche Ursachen sind die Hydration großer Komponentenbäume, überflüssige Zustandsaktualisierungen und Analytics-Listener, die bei jedem Scrollvorgang laufen.
Zerlegen Sie Aufgaben über 50 Millisekunden in kleinere Abschnitte, verschieben Sie unkritische Arbeit über gezieltes Abgeben der Kontrolle an den Browser und reduzieren Sie vor allem die ausgelieferte JavaScript-Menge. In einer React-Anwendung ist die Verlagerung statischer Bereiche in Server Components meist die wirksamste einzelne Änderung: weniger Code zum Auswerten, weniger Hydration, weniger Blockade des Hauptthreads.
Jedes Kilobyte JavaScript, das Sie nicht ausliefern, muss auf einem fünf Jahre alten Smartphone auch nicht verarbeitet werden.
CLS verbessern
- Bei Bildern, Videos und iframes stets Breite und Höhe oder ein Seitenverhältnis angeben.
- Platz für Einwilligungsbanner, Cookie-Leisten und Werbeflächen reservieren, bevor diese geladen werden.
- Keine Inhalte oberhalb bereits gerenderter Inhalte nachträglich einfügen.
- Webfonts vorladen und die Ersatzschrift metrisch angleichen, damit der Text beim Schriftwechsel nicht umbricht.
- Animationen über transform und opacity statt über Höhe, Breite oder Abstände umsetzen, da nur diese beiden Eigenschaften kein neues Layout auslösen.
Ein realistischer Verbesserungsplan
Beginnen Sie mit einer Ausgangsmessung aus den Felddaten der Search Console für die drei wichtigsten Seitenvorlagen. Beheben Sie zuerst Serverantwort und Hero-Bild, denn sie machen meist mehr als die Hälfte des LCP-Problems aus. Entfernen oder verzögern Sie danach Skripte von Dritten und arbeiten Sie anschließend an der JavaScript-Menge. Messen Sie nach 28 Tagen erneut, da Felddaten ein gleitendes Zeitfenster abbilden und sich nicht über Nacht aktualisieren.
Für eine typische Unternehmenswebsite sind das zwei bis fünf Arbeitstage oder 1.800 bis 4.500 €. In unseren Projekten senkt dieser Aufwand den mobilen LCP von rund 4 Sekunden auf unter 2 Sekunden und hebt den Anteil bestandener Seitenaufrufe über alle drei Messwerte von etwa 30 Prozent auf über 90 Prozent. Sichern Sie das Ergebnis mit einem Performance-Budget in der Build-Kette ab, damit das nächste Marketing-Tag nicht unbemerkt sechs Monate Arbeit zunichtemacht. Eine automatische Prüfung bei jeder Veröffentlichung kostet einen halben Tag Einrichtung und verhindert die meisten Rückschritte.
