Web-Performance-Optimierung: Core Web Vitals und Geschwindigkeitsverbesserung

Was sind Core Web Vitals?

Core Web Vitals sind drei Schlüsselmetriken von Google zur Messung der Benutzererfahrung: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) und INP (Interaction to Next Paint).

LCP misst die Ladezeit des größten Inhaltselements auf der Seite (meist Hero-Bild oder Überschrift). Sollte unter 2,5 Sekunden liegen. Langsames LCP führt zum Verlassen der Seite.

CLS misst unerwartete Layout-Verschiebungen beim Laden. Verschiebungen durch spät ladende Bilder oder Werbung frustrieren Nutzer. Sollte unter 0,1 liegen.

INP misst die Antwortzeit auf Benutzerinteraktionen (Klicks, Tastendruck). Sollte unter 200 Millisekunden liegen. Langsames INP macht die Seite unbenutzbar.

Gute Core Web Vitals sind hilfreich, garantieren aber keine hohen Suchplatzierungen.

LCP-Optimierung

Laden Sie das größte Inhaltselement schnell. Hero-Bild oder Hauptüberschrift ist meist das LCP-Element. Priorisieren Sie dessen Laden.

Das LCP-Bild nicht verzögert laden. Lazy Loading eignet sich für Bilder außerhalb des ersten sichtbaren Bereichs.

Server-Antwortzeit (TTFB) reduzieren. CDN nutzen, Datenbankabfragen optimieren, Seitencaching implementieren.

async und defer gelten für JavaScript; unkritisches CSS benötigt eine eigene Ladestrategie.

Kritische Ressourcen mit Preload-Direktive vorladen: <link rel="preload" as="image" href="hero.webp">. Hilft dem Browser, Ressourcen früher zu entdecken.

CLS-Optimierung

Width- und Height-Attribute zu Bild- und Video-Elementen hinzufügen. Ermöglicht dem Browser, Platz zu reservieren und Layout-Verschiebung zu verhindern.

Feste Größen für Werbe- und Embed-Bereiche reservieren. Spät ladende Werbung verschiebt das Seitenlayout und erhöht CLS.

Web-Fonts optimieren: font-display: swap nutzen, kritische Fonts vorladen. FOUT- und FOIT-Probleme minimieren.

Nicht reservierte Elemente oberhalb bestehender Inhalte können Layoutverschiebungen verursachen.

CSS-Animationen mit transform und opacity nutzen. Diese Eigenschaften lösen kein Layout aus und tragen nicht zu CLS bei.

INP-Optimierung

JavaScript-Ausführungszeit reduzieren. Lange Tasks in kleinere Stücke aufteilen. Tasks über 50ms beeinflussen INP negativ.

Event-Handler optimieren. Handler schreiben, die schnell auf Klicks und Tastendruck reagieren. Schwere Berechnungen in Web Worker auslagern.

Aufwendige Drittanbieterskripte können INP erhöhen. Unnötige Skripte entfernen und erneut messen.

Schwere Operationen mit requestIdleCallback und setTimeout verschieben. Nicht-kritische Arbeit während Benutzerinteraktionen in den Hintergrund verlagern.

In Frameworks wie React/Vue unnötige Re-Render verhindern. Unnötige Berechnungen mit useMemo, useCallback und memo überspringen.

Allgemeine Geschwindigkeitsoptimierung

HTTP/2 oder HTTP/3 nutzen. Ermöglicht parallele Verarbeitung mehrerer Anfragen und Header-Komprimierung. Moderne Hosting-Anbieter unterstützen dies standardmäßig.

Gzip- oder Brotli-Komprimierung aktivieren. Textbasierte Ressourcen (HTML, CSS, JS) schrumpfen um 60-80%. In der Serverkonfiguration aktivieren.

Statische Assets cachen. Browser- und CDN-Caching-Dauern mit Cache-Control-Headern festlegen. Lange TTL für unveränderliche Assets nutzen.

Kritisches CSS inline einbinden, Rest async laden. CSS für above-the-fold Inhalt oben auf der Seite einbetten.

JavaScript mit Code Splitting aufteilen. Nur den Code laden, der für jede Seite benötigt wird. Lazy Loading mit dynamic import() anwenden.

Bilder lazy laden. Bilder unterhalb des Folds nur laden, wenn sie sichtbar werden. Das loading="lazy" Attribut reicht aus.

Ressourcen mit Prefetch und Preconnect vorladen. DNS- und TCP-Verbindung vorab mit <link rel="preconnect" href="https://fonts.googleapis.com"> aufbauen.

Messwerkzeuge

Google PageSpeed Insights: Lighthouse-basierter Performance-Bericht. Separate Scores für Mobil und Desktop. Verbesserungsvorschläge.

Chrome DevTools Performance-Tab: Analysiert den Ladevorgang Schritt für Schritt. Zeigt Long Tasks, Layout Shifts und Paint Timing.

Die Web-Vitals-Erweiterung wird nicht mehr unterstützt. Nutzen Sie Chrome DevTools Performance.

CrUX (Chrome User Experience Report): Sammelt echte Nutzerdaten. Erscheint als Core Web Vitals Bericht in der Search Console.

Search Console Core Web Vitals Bericht: Klassifiziert URLs als 'Gut', 'Verbesserung nötig' und 'Schlecht'. Zeigt, welche Seiten Optimierung benötigen.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience