Core Web Vitals optimieren: Der komplette Guide für 2025

Seit Juni 2021 sind die Core Web Vitals offizieller Google-Rankingfaktor. Websites mit schlechten Werten können in den Rankings abrutschen – selbst wenn der Content gut ist. Dieser Guide zeigt Ihnen, wie Sie alle drei Metriken optimieren. ## Was sind Core Web Vitals? Core Web Vitals messen die User Experience anhand von drei Metriken: ### 1. LCP – Largest Contentful Paint **Was es misst:** Wie schnell der größte sichtbare Inhalt lädt **Ziel:** < 2,5 Sekunden **Wichtig für:** Wahrgenommene Ladegeschwindigkeit ### 2. FID – First Input Delay **Was es misst:** Zeit bis zur ersten Interaktionsmöglichkeit **Ziel:** < 100 Millisekunden **Wichtig für:** Interaktivität ### 3. CLS – Cumulative Layout Shift **Was es misst:** Visuelle Stabilität (unerwartet springende Elemente) **Ziel:** < 0,1 **Wichtig für:** Nutzererlebnis, keine versehentlichen Klicks ## LCP optimieren (Largest Contentful Paint) ### Optimierungsmaßnahmen: **Server-Response-Time verbessern:** - Upgrade auf schnelleres Hosting - CDN nutzen (Cloudflare, Fastly) - Server-Caching aktivieren - Datenbank-Queries optimieren **Bilder optimieren:** - Moderne Formate (WebP, AVIF) - Responsive Images (srcset) - Lazy Loading (außer Above-the-Fold) - Bildgrößen vor Upload optimieren - CDN für Bilder nutzen **Critical CSS inline einbinden:** Laden Sie kritisches CSS direkt im HTML für schnelleren First Paint. **JavaScript optimieren:** - Async/Defer für nicht-kritisches JS - Code-Splitting - Unused JavaScript entfernen - Tree-Shaking nutzen ## FID/INP optimieren (First Input Delay) **JavaScript-Bundles verkleinern:** - Code-Splitting (nur laden, was gebraucht wird) - Dynamic Imports - Tree-Shaking - Unused Code entfernen **Third-Party Scripts minimieren:** - Google Tag Manager, Analytics etc. Async laden - Nur wirklich benötigte Scripts einbinden ## CLS optimieren (Cumulative Layout Shift) **Immer width/height für Bilder angeben:** Das verhindert Layout-Shifts beim Laden. **Platz für Ads/Embeds reservieren:** Nutzen Sie min-height, um Platz für dynamische Elemente zu reservieren. **Font-Display optimieren:** Verwenden Sie font-display: swap, um FOIT/FOUT zu vermeiden.