SEO 14. Januar 2025 • 6–8 Min. Lesezeit

Core Web Vitals 2024: Google's neue Ranking-Faktoren meistern

Von LCP über INP bis CLS: So erreichen Sie grüne Scores und verbessern nachhaltig Ihre Sichtbarkeit.

Die Metriken 2024

  • LCP (Largest Contentful Paint): Wahrgenommene Ladezeit des größten sichtbaren Elements. Ziel: ≤ 2,5 s.
  • INP (Interaction to Next Paint): Antwortzeit auf Nutzerinteraktionen (Klick, Tap, Tastatur). Ziel: ≤ 200 ms.
  • CLS (Cumulative Layout Shift): Layout-Stabilität bei dynamischen Inhalten. Ziel: ≤ 0,1.

Schnelle Wins

  1. Bilder als AVIF/WebP mit festen width/height oder aspect-ratio ausliefern
  2. Kritisches CSS inline; Fonts mit font-display: swap + Preload
  3. Render-blocking JS/CSS minimieren, Code-Splitting & Defer
  4. Lange Tasks > 50 ms aufteilen (Scheduler/Idle Work), Event-Listener passiv
  5. Stabile Platzhalter für Media/Ads/Embeds (keine nachträglichen Shifts)

Ursachen & Fixes pro Metrik

LCP

  • Hero-Bild nicht optimiert → AVIF/WebP, sizes/srcset
  • TTFB hoch → CDN, Server-Caching, SSR
  • Blockierendes CSS/JS → Critical CSS, Defer, Preload

INP

  • Main-Thread busy → Tasks splitten, Web Worker
  • Hydration-Spitzen → Lazy-Hydration, Islands
  • Schwere 3rd-Party → Audit, async/defer, Consent-Gate

CLS

  • Fehlende Größen → width/height, aspect-ratio
  • FOIT/FOUT → swap, Preload, Font-Subset
  • Späte Inserts → Platzhalter, Reservierungen

Messen & Monitoring

  • Lab-Tools: Lighthouse & PageSpeed Insights für reproduzierbare Tests
  • RUM: web-vitals im echten Traffic; segmentieren nach Gerät, Verbindung, Pfad
  • Server/CDN-Timings: TTFB & Caching-Treffer sichtbar machen
<!-- Minimal: RUM mit web-vitals -->
                            <script defer src="/js/web-vitals.umd.js"></script>
                            <script>
                            window.addEventListener('load', () => {
                                if (!window.webVitals) return;
                                const send = (metric) => {
                                // Beispiel: an eigenes Backend oder Analytics senden
                                navigator.sendBeacon('/rum', JSON.stringify({
                                    name: metric.name, value: metric.value, id: metric.id,
                                    path: location.pathname, conn: (navigator.connection||{}).effectiveType
                                }));
                                };
                                webVitals.onLCP(send); webVitals.onINP(send); webVitals.onCLS(send);
                            });
                            </script>

Praxis: INP & lange Tasks entschärfen

// Lange Berechnung stückeln (vereinfachtes Beispiel)
                            function chunkedWork(items) {
                            const BATCH = 50;
                            let i = 0;
                            function run() {
                                const start = performance.now();
                                while (i < items.length && (performance.now() - start) < 40) {
                                // ... teure Operation ...
                                i++;
                                }
                                if (i < items.length) requestIdleCallback(run, { timeout: 100 });
                            }
                            requestIdleCallback(run, { timeout: 100 });
                            }

Häufige Fehler vermeiden

  • NPS statt Vitals optimieren: Subjektiv ≠ objektiv; stets LCP/INP/CLS messen.
  • Nur Lab-Daten beachten: RUM ist entscheidend für Ranking & echte Nutzer.
  • Ungeplante 3rd-Party-Einbindung: Tag-Manager ohne Budget killt Vitals.

Schnellstart-Checkliste

  • Hero-Medien optimieren (AVIF/WebP, sizes/srcset, Preload)
  • Kritisches CSS inline; nicht-kritisch async/defer nachladen
  • Fonts: Preload + font-display: swap + Subset
  • Event-Listener passiv; Hydration/Rendering staffeln
  • Platzhalter/Aspect-Ratio für Bilder, Ads, Embeds
  • web-vitals RUM integrieren und dauerhaft monitoren

Sie wollen grüne Vitals innerhalb weniger Sprints erreichen? → Kostenlose Erstberatung anfragen.

Performance-Review gefällig?

Wir identifizieren Bottlenecks, setzen Budgets und liefern konkrete Optimierungen – messbar und nachhaltig.

Beratung anfragen Weitere Artikel

Häufige Fragen (FAQ)

Was sind gute Schwellenwerte für LCP, INP und CLS? ▾
LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Planen Sie Budgets pro Seite/Template.
Wie messe ich Web Vitals mit echten Nutzern (RUM)? ▾
Kleine web-vitals Integration nutzen, an Backend/Analytics senden, nach Gerät/Netz/URL segmentieren.
Was verbessert INP am stärksten? ▾
Lange Tasks splitten, Third-Party reduzieren, Hydration verzögern, Worker/Scheduler verwenden.
Wie verhindere ich CLS-Spikes? ▾
Größen reservieren, Fonts korrekt laden, Platzhalter für Ads/Embeds, keine späten DOM-Inserts ohne Reserve.

Verwandte Artikel