Leitfäden

Core Web Vitals sind eine Reihe von Metriken, definiert von Google, um zu erfassen, wie sich eine Seite tatsächlich anfühlt, im Gegensatz dazu, wie schnell sie im Abstrakten ist. Sie konzentrieren sich auf drei reale Erfahrungen: wie schnell der Hauptinhalt erscheint, wie stabil das Layout beim Laden ist und wie zügig die Seite auf deine Eingabe reagiert. Weil sie bei echten Besuchen gemessen werden, belohnen sie Seiten, die sich gut anfühlen, statt Seiten, die bloß im Labor gut abschneiden.

LCP, CLS und INP erklärt

Die erste Metrik, Largest Contentful Paint, misst, wie lange es dauert, bis das größte sichtbare Element – meist ein Hero-Bild, eine Überschrift oder ein Textblock – gerendert ist. Sie ist ein Stellvertreter für „wann sieht die Seite geladen aus?“ Ein langsames LCP bedeutet, dass Besucher auf einen leeren oder halbfertigen Bildschirm starren, und es ist einer der häufigsten Gründe, warum sich eine Seite träge anfühlt, selbst wenn sie technisch funktioniert.

Die zweite, Cumulative Layout Shift, misst unerwartete Bewegung von Inhalt beim Laden der Seite. Du hast einen schlechten CLS-Wert gespürt, wann immer eine Schaltfläche springt, gerade als du sie antippen willst, weil ein Bild oder eine Werbung darüber geladen hat und alles nach unten geschoben hat. Er quantifiziert diese erschütternde Instabilität, und ihn zu verbessern bedeutet weitgehend, Platz für Inhalt zu reservieren, bevor er eintrifft.

Die dritte, Interaction to Next Paint, misst Reaktionsfreudigkeit – wie schnell die Seite sichtbar reagiert, nachdem du klickst, tippst oder schreibst. Ein schlechtes INP bedeutet, dass sich die Oberfläche träge und unreaktiv anfühlt, oft weil der Haupt-Thread des Browsers gerade JavaScript ausführt, wenn du zu interagieren versuchst. Für skriptlastige Apps ist dies häufig das schwierigste der drei, richtig hinzubekommen.

Jede Metrik beheben

LCP zu verbessern läuft meist darauf hinaus, den wichtigen Inhalt früher auszuliefern. Optimiere und dimensioniere Bilder richtig, liefere sie in modernen Formaten aus und nutze die Lade- und Prioritätshinweise, die die Plattform bietet; stelle sicher, dass dein Server oder CDN schnell antwortet; und vermeide es, das anfängliche Rendern mit unnötigen Skripten und Stylesheets zu blockieren. Das Ziel ist, dass die wichtigsten Pixel so früh wie möglich eintreffen.

• LCP – wie schnell der Hauptinhalt erscheint; optimiere Bilder und Serverantwort
• CLS – Layout-Stabilität; reserviere Platz für Bilder, Einbettungen und Schriften
• INP – Reaktionsfreudigkeit; reduziere und zerlege JavaScript auf dem Haupt-Thread
• SPAs: Code-Splitting, Lazy-Loading, Bundles trimmen; SSR für ein schnelles erstes Zeichnen
• Miss mit echten Felddaten (CrUX), nicht nur einem einzigen Labordurchlauf

CLS zu beheben dreht sich meist darum, Platz im Voraus zu reservieren. Setze immer explizite Breite und Höhe (oder ein Seitenverhältnis) auf Bilder und Einbettungen, sodass der Browser ihnen vor dem Laden Raum lässt, vermeide das Einfügen von Inhalt über dem, was der Nutzer gerade liest, und sei vorsichtig mit Webfonts, damit Text nicht umfließt, wenn die eigene Schrift eingewechselt wird. Das sind kleine, mechanische Änderungen mit übergroßer Wirkung darauf, wie stabil sich eine Seite anfühlt.

INP zu verbessern bedeutet, im Moment der Interaktion weniger Arbeit auf dem Haupt-Thread zu leisten. Zerlege langlaufende JavaScript-Aufgaben, verschiebe oder entferne Skripte, die nicht sofort gebraucht werden, und sei diszipliniert bei Drittanbieter-Code, der eine häufige und unsichtbare Ursache von Unreaktivität ist. Je weniger der Browser tun muss, wenn ein Nutzer klickt, desto schneller kann er das Ergebnis zeichnen.

Besondere Sorgfalt für Single-Page-Apps

Single-Page-Applications brauchen hier besondere Aufmerksamkeit, weil ihre Stärken und ihre Core-Web-Vitals-Risiken aus derselben Quelle kommen. Das JavaScript-Bundle, das die Navigation sofort anfühlen lässt, kann auch das erste Zeichnen verzögern und Interaktionen blockieren, wenn es zu groß wird. Code-Splitting, sodass jede Route nur lädt, was sie braucht, Lazy-Loading schwerer Komponenten und das Trimmen von Abhängigkeiten sind die Hebel, die eine SPA sowohl flüssig als auch schnell ladbar halten.

Serverseitiges Rendering und statische Generierung helfen SPAs genau bei diesen Metriken. Indem du echten, gerenderten Inhalt in der ersten Antwort schickst – über Nuxt, Next.js oder einen statischen Build –, gibst du dem Nutzer ein schnelles LCP statt eines leeren Bildschirms, der auf Skripte wartet. Die App hydratisiert dann zu ihrer interaktiven Form, sodass du die geschmeidige Navigation behältst und zugleich das Problem des schweren ersten Ladens behebst, das die Vitals beeinträchtigt.

Mit echten Felddaten messen

Schließlich miss mit echten Daten, nicht nur einem einmaligen Labortest. Werkzeuge wie PageSpeed Insights und Lighthouse sind nützlich zur Diagnose, aber Felddaten von echten Nutzern – über den Chrome User Experience Report oder dein eigenes Monitoring – sagen dir, was Besucher tatsächlich über Geräte und Netzwerke hinweg erleben. Core Web Vitals zu verbessern ist eine fortlaufende Gewohnheit des Messens, des Behebens des schlimmsten Übeltäters und erneuten Messens, kein Kästchen, das man einmal abhakt.