Core Web Vitals: Messen und verbessern für bessere Web-Performance

Warum Core Web Vitals wichtig sind

Sie haben eine schöne Website erstellt, aber die Nutzer springen ab, weil sie sich langsam anfühlt. Core Web Vitals sind Googles Metriken für die reale Nutzererfahrung: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Sie beeinflussen die Suchrankings und – noch wichtiger – ob Besucher bleiben. Dieser Leitfaden zeigt Ihnen, wie Sie sie messen und verbessern können.

Die drei Metriken verstehen

Jede Metrik erfasst einen anderen Aspekt von Ladeverhalten, Interaktivität und visueller Stabilität.

Hinweis: FID wird 2024 durch Interaction to Next Paint (INP) ersetzt, aber die Optimierungsprinzipien bleiben ähnlich.

Wie man Core Web Vitals misst

Sie benötigen sowohl Labordaten als auch Felddaten. Labortools simulieren Bedingungen; Felddaten spiegeln echte Nutzer wider.

1. Chrome DevTools Lighthouse: Führen Sie ein Audit im Lighthouse-Tab durch. Es liefert Laborwerte und Verbesserungsvorschläge.
2. PageSpeed Insights: Geben Sie Ihre URL ein, um Felddaten aus dem Chrome User Experience Report (CrUX) und Laborvorschläge zu sehen.
3. Search Console: Prüfen Sie den Core Web Vitals-Bericht für Felddaten auf Gruppenebene.
4. Web Vitals JavaScript-Bibliothek: Fügen Sie web-vitals zu Ihrer Website hinzu, um echte Nutzermetriken zu sammeln.

import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

Nutzen Sie diese Daten, um Muster zu erkennen und Korrekturen zu priorisieren.

Verbesserung des Largest Contentful Paint (LCP)

LCP ist oft die wirkungsvollste Metrik. Optimieren Sie diese Bereiche:

• Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie WebP oder AVIF und liefern Sie responsive Größen. Tools wie Image Compressor können helfen, die Dateigröße ohne sichtbaren Qualitätsverlust zu reduzieren.
• Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für Hero-Bilder und Schriftarten.
• Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verschieben Sie nicht-kritisches JavaScript.
• Ein CDN verwenden: Liefern Sie Assets von Standorten näher an den Nutzern aus.
• Assets cachen: Setzen Sie lange Cache-Lebensdauern für statische Dateien.

Beispiel: Laden Sie Ihr LCP-Bild vor:

<link rel="preload" as="image" href="#">

Verbesserung des First Input Delay (FID)

FID misst die Reaktionsfähigkeit. Lange JavaScript-Aufgaben blockieren den Hauptthread.

• Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder requestIdleCallback, um den Hauptthread freizugeben.
• Arbeit im Hauptthread minimieren: Entfernen Sie ungenutztes JavaScript, teilen Sie Code auf und verschieben Sie nicht-kritische Skripte.
• Web Worker verwenden für schwere Berechnungen.
• Große synchrone Skripte vermeiden: Laden Sie Drittanbieter-Skripte asynchron.

Prüfen Sie mit Lighthouse die Möglichkeiten "Minimize main-thread work" und "Reduce JavaScript execution time".

Verbesserung des Cumulative Layout Shift (CLS)

CLS tritt auf, wenn Elemente sich unerwartet bewegen. Häufige Ursachen und Lösungen:

• Bilder ohne Abmessungen: Setzen Sie immer width- und height-Attribute oder verwenden Sie CSS aspect-ratio.
• Anzeigen, Einbettungen, Iframes: Reservieren Sie Platz mit einem Platzhalter oder einem Container fester Größe.
• Dynamische Inhaltseinfügung: Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn, es wird durch eine Nutzerinteraktion ausgelöst.
• Webfonts: Verwenden Sie font-display: swap und laden Sie Schriftarten vor, um unsichtbaren Text oder Layoutverschiebungen zu vermeiden.

Beispiel: Reservieren Sie Platz für ein Bild:

<img src="#" width="800" height="600" alt="...">

Tools und Workflow für kontinuierliche Überwachung

Performance ist keine einmalige Korrektur. Integrieren Sie die Überwachung in Ihren Entwicklungsprozess:

• Lighthouse CI: Führen Sie Audits bei jedem Pull Request durch, um Regressionen zu erkennen.
• Real User Monitoring (RUM): Verwenden Sie die web-vitals-Bibliothek und senden Sie Daten an Ihre Analyseplattform.
• Performance-Budgets: Legen Sie Schwellenwerte für Metriken fest und lassen Sie Builds fehlschlagen, wenn sie überschritten werden.

Überprüfen Sie regelmäßig PageSpeed Insights und Search Console, um den Fortschritt zu verfolgen.

FAQ

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von Metriken, die von Google definiert wurden und die reale Nutzererfahrung messen: Largest Contentful Paint (Laden), First Input Delay (Interaktivität) und Cumulative Layout Shift (visuelle Stabilität).

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie kontinuierlich mit RUM und führen Sie Laboraudits bei jeder signifikanten Codeänderung durch. Prüfen Sie Felddaten monatlich über Search Console oder PageSpeed Insights.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie Bildkomprimierung und die Verwendung eines CDN können mit Plugins oder Tools durchgeführt werden, aber tiefere Optimierungen erfordern oft Codeänderungen. Beginnen Sie mit Bildern und Caching.

Bereit, Ihre Bilder für ein besseres LCP zu optimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.