Website-Geschwindigkeit optimieren: Core Web Vitals verbessern

So beeindruckend Ihre Website aussieht – lädt sie langsam, schließen die meisten Besucher sie. Laut Google verlassen 53 % der Nutzer eine Seite, die länger als 3 Sekunden lädt. Zudem ist Geschwindigkeit ein direkter Rankingfaktor. In diesem Leitfaden erklären wir die Core Web Vitals verständlich und zeigen Techniken, die wirklich wirken.

Was sind die Core Web Vitals?

Die Core Web Vitals sind drei zentrale Nutzererfahrungs-Metriken, die Google 2020 vorstellte und seit 2021 ins Ranking einbezieht. Sie stammen aus echten Nutzerdaten – Messungen aus der realen Welt, keine Labortests.

1. LCP — Largest Contentful Paint

Misst, wann das größte sichtbare Element (meist ein Hero-Bild oder eine große Überschrift) erscheint.

• Gut: bis 2,5 Sekunden
• Verbesserungswürdig: 2,5–4 Sekunden
• Schlecht: über 4 Sekunden

Wichtigste Einflüsse: große Bilddateien, langsame Serverantwort und render-blockierendes JavaScript/CSS.

2. INP — Interaction to Next Paint

Misst, wie schnell die Seite auf Interaktionen (Klick, Tippen, Tastatur) reagiert. Ersetzte 2024 die alte Metrik FID.

• Gut: bis 200 ms
• Verbesserungswürdig: 200–500 ms
• Schlecht: über 500 ms

Lange JavaScript-Tasks, schwere Drittanbieter-Skripte und ineffiziente Event-Handler verschlechtern INP.

3. CLS — Cumulative Layout Shift

Misst, wie stark Elemente beim Laden „springen“. Verrutschender Text und Fehlklicks machen diese Metrik spürbar.

• Gut: bis 0,1
• Verbesserungswürdig: 0,1–0,25
• Schlecht: über 0,25

Bilder ohne Maße, dynamisch eingefügte Inhalte und spät ladende Anzeigen sind die Hauptursachen.

Wo Sie Performance messen

Ohne Messung keine Optimierung. Nützliche Tools:

Google PageSpeed Insights — zeigt Labordaten und echte Nutzerdaten (CrUX). Kostenlos und einfach.

Google Search Console → Bericht „Core Web Vitals“ — gruppiert die reale Nutzererfahrung nach URLs.

WebPageTest — für Fortgeschrittene: Wasserfalldiagramme, Videovergleiche, mehrstufige Tests.

Chrome DevTools → Lighthouse — ideal für schnelle Messungen in der lokalen Entwicklung.

LCP verbessern: konkrete Schritte

Moderne Bildformate

JPEG und PNG in WebP oder AVIF umzuwandeln, spart meist 30–50 % Dateigröße bei minimalem Qualitätsverlust.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

Mit Next.js erledigt die <Image>-Komponente das automatisch.

Hero-Bild vorladen

Der Browser lädt ein Bild erst, wenn er beim HTML-Parsen darauf stößt. Ein Hinweis vorab senkt die LCP:

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Serverantwortzeit verkürzen (TTFB)

LCP beginnt mit dem ersten Byte vom Server. Für eine bessere TTFB:

• Statische Generierung (SSG) oder ISR statt Rendering bei jeder Anfrage
• Ein CDN, damit Inhalte von einem nahen Server kommen
• Bei knappen Ressourcen auf VPS oder Cloud-Hosting wechseln

Kritisches CSS inline

Der Browser zeigt die Seite erst nach dem CSS. Styles für den sichtbaren Bereich direkt ins HTML einzubetten, verkürzt das Rendering. Tools wie Critical oder Critters automatisieren das.

INP verbessern: weniger JavaScript

Lange Tasks aufteilen

JavaScript-Tasks über 50 ms gelten als „lang“ und blockieren Interaktionen. Teilen Sie große Aufgaben mit setTimeout(..., 0) oder scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Alle 50 Elemente dem Main-Thread eine Pause gönnen if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Unnötige Drittanbieter-Skripte entfernen

Live-Chats, Werbenetzwerke, Analytics und Social-Buttons kosten INP. Fragen Sie bei jedem Skript: „Brauchen wir das auf dieser Seite wirklich?“ Prüfen Sie den Google Tag Manager regelmäßig.

Code-Splitting in React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Wird geladen…</div>, }); ``

Laden Sie schwere Komponenten mit dynamic() erst bei Bedarf.

CLS auf null bringen

Maße für alle Bilder

Kennt der Browser die Bildgröße vorab, reserviert er Platz:

``html <img src="product.jpg" alt="Produktbild" width="800" height="600" /> ``

Oder per CSS aspect-ratio:

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

FOUT/FOIT bei Schriften vermeiden

Springender Text beim Laden einer Schrift ist eine große CLS-Quelle. Nutzen Sie font-display: optional oder swap und laden Sie Schriften vor:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Platzhalter für dynamische Inhalte

Damit API-Daten das Layout nicht verschieben, nutzen Sie Skeletons mit fester Höhe:

``css .content-area { min-height: 120px; / reserviert Platz bis zum Laden / } ``

Automatische Optimierungen mit Next.js

Mit einer Next.js-Website funktionieren diese Funktionen ab Werk:

| Funktion | Nutzen | |---|---| | <Image>-Komponente | Automatisch WebP/AVIF, Lazy Loading, Maße | | <Script strategy="lazyOnload"> | Verzögert unkritische Skripte | | Statische Generierung (SSG) | Minimiert die TTFB | | Schriftoptimierung | Google Fonts selbst gehostet, Swap-Strategie | | Automatisches Code-Splitting | Jede Seite lädt nur nötiges JS |

Wie diese Funktionen Zeit sparen und direkt zu den Core Web Vitals beitragen, haben wir auch im Artikel zu den Kosten einer Unternehmenswebsite angesprochen.

Priorisierung: Wo anfangen?

Beginnen Sie mit maximaler Wirkung bei minimalem Aufwand:

1. Bildoptimierung — verbessert die LCP auf den meisten Websites allein um 30–40 %.

2. Ungenutztes JavaScript entfernen — das Coverage-Tool in den Chrome DevTools zeigt es.

3. Render-blockierende Ressourcen reduzieren — async/defer oder kritisches CSS inline.

4. Serverleistung prüfen — bei Shared Hosting und TTFB über 800 ms das Hosting überdenken.

5. Drittanbieter-Skripte prüfen — im Abschnitt „Code von Drittanbietern“ in PageSpeed Insights.

Fazit: Geschwindigkeit ist Pflicht, kein Luxus

Core-Web-Vitals-Optimierung ist keine optionale Kür mehr, sondern Grundlage für Rankings, Zufriedenheit und Conversions. Verstehen Sie sie als fortlaufenden Kreislauf aus Messen und Verbessern.

Möchten Sie den Core-Web-Vitals-Status Ihrer Website kennen oder eine professionelle Optimierung? Kontaktieren Sie uns – wir bieten eine kostenlose Voranalyse.