Core Web Vitals optimieren: Was eine Website wirklich schnell macht

Eine Website ist nicht automatisch schnell, nur weil der Build klein ist. Entscheidend ist, wie schnell der wichtigste Inhalt sichtbar wird, wie direkt die Oberfläche auf Eingaben reagiert und ob sich Elemente während des Ladens verschieben. Dafür wurden die Core Web Vitals entwickelt.

1. Erst messen, dann optimieren

Starte mit einem mobilen Bericht in PageSpeed Insights. Prüfe Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Wiederhole den Test unter vergleichbaren Bedingungen. Ein einzelner Messwert ist ein Hinweis, aber noch kein Beweis für die Ursache.

Labordaten helfen, Probleme zu reproduzieren. Felddaten zeigen, wie Besucher die Website tatsächlich erleben. Beide Perspektiven ergänzen sich.

2. Das LCP-Element priorisieren

Der LCP ist häufig ein Hero-Bild, ein großes Vorschaubild oder eine Überschrift, die spät gerendert wird. Prüfe das konkrete Element und die Zeitanteile für Serverantwort, Ressourcen-Ladezeit und Rendering.

• Liefere Bilder in passenden Abmessungen und modernen Formaten wie WebP oder AVIF aus.
• Nutze `srcset` und `sizes`, damit Smartphones keine unnötig großen Desktop-Dateien laden.
• Setze `fetchpriority="high"` nur für das tatsächlich wichtigste Bild ein.
• Vermeide Lazy Loading beim Bild, das den ersten sichtbaren Bereich dominiert.
• Verwende Preloads nur, wenn sie dieselbe Ressource laden, die später im HTML verwendet wird.

3. JavaScript gezielt reduzieren

Prüfe, ob große Bibliotheken auf der Startseite geladen werden, obwohl sie nur in Diagrammen, Admin-Werkzeugen oder selten geöffneten Dialogen gebraucht werden. Dynamische Imports und verzögert geladene Abschnitte können den ersten Ladepfad verkürzen. Behalte stabile Platzhalter bei, damit neue Inhalte das Layout nicht springen lassen.

4. INP und CLS nicht vergessen

Lange Aufgaben im Hauptthread können Eingaben verzögern. Teile teure Arbeit in kleinere Schritte, vermeide unnötige Renderings und halte Event-Handler schlank. Für CLS reservierst du bei Bildern, Videos und dynamischen Elementen vorab Platz und definierst passende Seitenverhältnisse.

Eine sinnvolle Reihenfolge

1. LCP-Element und dessen Ladepfad identifizieren.
2. Bildgröße, Priorität und Format korrigieren.
3. Render-blockierende Ressourcen und unnötiges JavaScript angehen.
4. Layout-Stabilität und Eingabeverhalten prüfen.
5. Unter denselben Bedingungen erneut messen.

Performance entsteht durch mehrere überprüfbare Verbesserungen. Ziel ist nicht nur ein hoher Lighthouse-Score, sondern eine Oberfläche, die auf echten Geräten schneller sichtbar wird und zuverlässig reagiert.

**Über den Autor:** Casian Blanaru entwickelt mit PixelCoda performante Webanwendungen und barrierearme Frontends.