Web Performance optimieren: Core Web Vitals in der Praxis

Warum Core Web Vitals wichtig sind

Google nutzt Core Web Vitals als Ranking-Faktor. Aber noch wichtiger: Sie messen, was Nutzer tatsächlich erleben. Eine schnelle Website konvertiert besser, hat niedrigere Bounce-Rates und höhere Zufriedenheit. Die drei Metriken LCP, INP und CLS bilden das Fundament.

LCP: Largest Contentful Paint

LCP misst, wann das größte sichtbare Element im Viewport fertig gerendert ist. Zielwert: unter 2,5 Sekunden. Typische Probleme sind große, nicht optimierte Bilder, render-blockierende Ressourcen und langsame Server-Response-Zeiten.

LCP optimieren:

• Bilder in modernen Formaten (WebP/AVIF) mit responsiven srcsets ausliefern
• Critical CSS inlinen, nicht-kritisches CSS lazy loaden
• fetchpriority="high" auf dem LCP-Element setzen
• Server-Response-Zeit mit Caching und CDN optimieren
• Font-Display: swap nutzen, um Text sofort anzuzeigen

INP: Interaction to Next Paint

INP misst die Responsiveness: Wie schnell reagiert die Seite auf User-Interaktionen? Zielwert: unter 200 Millisekunden. Langsame Event-Handler, Main-Thread-Blockaden und excessive Re-Renders sind typische Ursachen.

INP optimieren:

• Lange Tasks aufbrechen (yield to main thread mit scheduler.yield())
• Event-Handler entprellen (debounce/throttle)
• Schwere Berechnungen in Web Worker auslagern
• Virtualisierung für lange Listen (vue-virtual-scroller)

CLS: Cumulative Layout Shift

CLS misst visuelle Stabilität: Wie stark verschieben sich Elemente beim Laden? Zielwert: unter 0,1. Layout Shifts entstehen durch nachgeladene Bilder ohne Dimensionen, dynamisch eingefügte Inhalte und Web Fonts, die das Layout verändern.

CLS optimieren:

• width und height (oder aspect-ratio) auf alle Bilder und Videos setzen
• Platzhalter für dynamische Inhalte reservieren
• font-display: optional für nicht-kritische Fonts
• Keine Inhalte oberhalb des Folds nachträglich einfügen

Messen und Monitoren

Nutze Lighthouse, PageSpeed Insights und das Chrome User Experience Report (CrUX) für Field Data. Lab-Daten allein reichen nicht – reale Nutzerdaten (RUM) zeigen, wie deine Website bei verschiedenen Geräten und Netzwerken performt.