Wie Sie die Core Web Vitals-Bewertung verbessern

Was sind Core Web Vitals

Core Web Vitals sind eine Reihe von Metriken, die Google zur Messung der Benutzererfahrung auf Webseiten verwendet. Seit 2021 sind diese Metriken ein Rankingfaktor in der Google-Suche, was bedeutet, dass eine Website mit besseren Core Web Vitals einen Vorteil in den Suchergebnissen gegenüber einer Website mit schlechteren Werten hat. Google hat damit klar zum Ausdruck gebracht, dass Benutzererfahrung nicht nur eine Designfrage ist, sondern ein messbarer technischer Parameter, der die Sichtbarkeit in der Suche beeinflusst.

Die drei Hauptmetriken sind Largest Contentful Paint, der die Ladegeschwindigkeit misst, Interaction to Next Paint, der die Reaktionsfähigkeit auf Benutzeraktionen misst, und Cumulative Layout Shift, der die visuelle Stabilität der Seite misst. Jede Metrik hat definierte Schwellenwerte für gute, verbesserungsbedürftige und schlechte Bewertung. Das Ziel ist, dass 75 Prozent der Seitenbesuche gute Bewertungen für alle drei Metriken haben. Das Verständnis jeder Metrik und der Optimierungstechniken ist der Schlüssel zum Erreichen hoher Bewertungen.

Largest Contentful Paint (LCP)

Was LCP misst

LCP misst die Zeit, die benötigt wird, damit das größte sichtbare Element auf der Seite im Viewport geladen wird. Dieses Element ist normalerweise ein Hero-Bild, eine große Überschrift oder ein Video-Poster. Eine gute Bewertung ist LCP unter 2,5 Sekunden, zwischen 2,5 und 4 Sekunden erfordert eine Verbesserung und über 4 Sekunden ist eine schlechte Bewertung. LCP ist die wichtigste Metrik für die Geschwindigkeitswahrnehmung, da Nutzer eine Seite als geladen betrachten, sobald sie den Hauptinhalt sehen, unabhängig davon, ob alle Elemente fertig geladen sind.

Bildoptimierung

Bilder sind die häufigste Ursache für schlechtes LCP, da sie normalerweise das größte Element auf der Seite sind. Verwenden Sie moderne Formate wie WebP oder AVIF, die bei gleicher Bildqualität eine 25 bis 50 Prozent kleinere Dateigröße im Vergleich zu JPEG bieten. Stellen Sie die Bilddimensionen auf die genaue angezeigte Größe ein, anstatt ein 4000-Pixel-Bild für die Anzeige in 800 Pixeln zu senden. Responsive Images mit dem srcset-Attribut ermöglichen es dem Browser, die optimale Größe für jedes Gerät auszuwählen.

Ein Preload-Hint für das LCP-Bild teilt dem Browser mit, dass er so früh wie möglich mit dem Herunterladen des Bildes beginnen soll, ohne darauf zu warten, dass der Parser zum img-Tag gelangt. Fügen Sie link rel preload as image href Pfad-zum-Bild im Head-Bereich der Seite hinzu. Für Hero-Bilder über dem Fold verwenden Sie das Attribut fetchpriority high, das dem Download Priorität gegenüber anderen Ressourcen gibt. Vermeiden Sie Lazy Loading für das LCP-Bild, da dies das Laden verzögert.

Server-Antwortzeit

Time to First Byte wirkt sich direkt auf LCP aus, da der Inhalt nicht geladen werden kann, bevor der Server antwortet. TTFB unter 200 Millisekunden ist das Ziel für optimale Leistung. Verwenden Sie ein CDN zur Verteilung der Inhalte vom geografisch nächstgelegenen Server des Besuchers. Server-seitiges Caching mit Redis oder Memcached eliminiert die Notwendigkeit, die Seite für jede Anfrage neu zu generieren. Bei BeoHosting bieten unsere Server mit SSD-Festplatten und optimierter Konfiguration ein niedriges TTFB aus ganz Serbien.

Interaction to Next Paint (INP)

Was INP misst

INP ersetzte im März 2024 First Input Delay als Metrik für Reaktionsfähigkeit. Während FID nur die Verzögerung des ersten Klicks maß, misst INP die Reaktionsfähigkeit aller Interaktionen während des gesamten Seitenbesuchs und berücksichtigt die schlechteste Interaktion. Eine gute Bewertung ist INP unter 200 Millisekunden. INP misst die Zeit von einer Benutzeraktion wie Klick, Tap oder Tastendruck bis zur nächsten visuellen Aktualisierung des Bildschirms, einschließlich Event-Handler-Verarbeitung, Layout-Berechnung und Rendering.

JavaScript-Optimierung

Lange JavaScript-Tasks blockieren den Main Thread und verhindern, dass der Browser auf Benutzerinteraktionen reagiert. Teilen Sie lange Tasks in kleinere Teile auf, indem Sie Techniken wie Yielding mit scheduler.yield oder setTimeout verwenden. Code-Splitting mit dynamischem Import lädt nur JavaScript, das für die aktuelle Seite benötigt wird, anstelle des gesamten Bundles. Tree Shaking eliminiert ungenutzten Code aus dem finalen Bundle und reduziert die Größe und Parsing-Zeit.

Drittanbieter-Skripte wie Analytics, Chat-Widgets und Werbecode sind eine häufige Ursache für schlechtes INP, da sie auf dem Main Thread ausgeführt werden und Benutzerinteraktionen blockieren. Laden Sie sie asynchron mit den Attributen async oder defer und verzögern Sie ihre Initialisierung, bis der Benutzer mit der Seite interagiert. Web Workers ermöglichen die Ausführung rechenintensiver Operationen außerhalb des Main Threads und befreien ihn für Benutzerinteraktionen.

Debouncing und Throttling

Event-Handler, die bei jedem Tastendruck, jeder Mausbewegung oder jedem Scroll-Ereignis ausgeführt werden, können INP erheblich beeinträchtigen. Debouncing verzögert die Ausführung der Funktion, bis der Benutzer mit der Aktion aufhört, z. B. 300 Millisekunden nach dem letzten Zeichen im Suchfeld. Throttling begrenzt die Häufigkeit der Ausführung, z. B. einmal in 100 Millisekunden für einen Scroll-Handler. Beide Techniken reduzieren die Anzahl der Event-Handler-Ausführungen und befreien den Main Thread für die Verarbeitung von Benutzerinteraktionen.

Cumulative Layout Shift (CLS)

Was CLS misst

CLS misst die visuelle Stabilität der Seite, indem es quantifiziert, wie sehr sich Elemente während des Ladens unerwartet bewegen. Eine gute Bewertung ist CLS unter 0,1. Layout Shift tritt auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum anderen ohne Benutzeraktion ändert. Typische Ursachen sind Bilder ohne definierte Dimensionen, Schriftarten, die spät geladen werden, dynamisch eingefügter Inhalt oberhalb des sichtbaren Bereichs und Anzeigen, die mit Verzögerung geladen werden.

Dimensionen für Bilder und Videos

Definieren Sie immer die Width- und Height-Attribute auf img- und video-Elementen. Dies ermöglicht es dem Browser, Platz zu reservieren, bevor die Ressource geladen wird, und verhindert das Verschieben des Inhalts darunter. Die CSS-Eigenschaft aspect-ratio ist eine moderne Alternative, die Dimensionen automatisch basierend auf dem definierten Verhältnis berechnet. Für responsive Bilder verwenden Sie CSS max-width 100 Prozent und height auto zusammen mit definierten HTML-Attributen für Width und Height, die das genaue Seitenverhältnis gewährleisten.

Font-Loading-Strategie

Webfonts, die spät geladen werden, können FOIT- oder FOUT-Effekte verursachen, die den Inhalt verschieben. Font-display swap zeigt sofort die Fallback-Schriftart an und ersetzt sie durch den Webfont, sobald dieser geladen ist, aber dieser Austausch kann zu Layout Shift führen, wenn sich die Schriftarten in den Dimensionen erheblich unterscheiden. Ein Preload-Hint für kritische Schriftarten beschleunigt deren Laden. Der size-adjust-Deskriptor in der font-face-Deklaration gleicht die Dimensionen der Fallback-Schriftart mit dem Webfont ab und minimiert den Shift beim Austausch.

Dynamischer Inhalt

Anzeigen, Cookie-Banner, Benachrichtigungen und dynamisch eingefügter Inhalt sind häufige Ursachen für CLS, da sie Platz einnehmen, der den Rest der Seite verschiebt. Reservieren Sie Platz für Anzeigen mit der CSS-Eigenschaft min-height, noch bevor der Anzeigencode geladen wird. Platzieren Sie das Cookie-Banner am oberen oder unteren Bildschirmrand mit fixer Position, damit es den Inhalt darunter nicht verschiebt. Für asynchron geladenen Inhalt wie Slider oder Infinite Scroll verwenden Sie Skeleton-Platzhalter, die den gleichen Platz einnehmen wie der endgültige Inhalt.

Messwerkzeuge

Labordaten

Google Lighthouse in Chrome DevTools bietet Labormessungen der Core Web Vitals auf Ihrem Computer. PageSpeed Insights kombiniert Labor- und Felddaten und gibt konkrete Optimierungsempfehlungen. WebPageTest bietet detailliertere Einblicke mit Waterfall-Diagrammen, Filmstrip-Darstellung des Ladens und der Möglichkeit, von verschiedenen Standorten und Geräten zu testen. Lighthouse CI ermöglicht die automatische Leistungsmessung bei jedem Deployment als Teil der CI/CD-Pipeline.

Felddaten

Der Chrome User Experience Report liefert reale Daten zu Core Web Vitals von echten Chrome-Browser-Nutzern. Google Search Console zeigt einen Core Web Vitals-Bericht für Ihre Website mit Identifikation von URLs, die Verbesserung benötigen. Die Web Vitals JavaScript-Bibliothek von Google ermöglicht das Sammeln von Metriken von Ihren Besuchern und das Senden an ein Analytics-System. Felddaten sind wichtiger als Labordaten, da sie das tatsächliche Erlebnis der Nutzer auf verschiedenen Geräten und Netzwerken widerspiegeln.

Einfluss des Hostings auf Core Web Vitals

Server-Leistung

Die Qualität des Hostings wirkt sich direkt auf TTFB aus und somit auf LCP. Shared Hosting mit überlasteten Servern kann zu einem TTFB von über einer Sekunde führen, was praktisch unmöglich macht, ein gutes LCP zu erreichen. SSD-Festplatten, ausreichend RAM-Speicher und eine optimierte Server-Konfiguration sind das Minimum für gute Leistung. PHP-Version 8.2 oder neuer mit OPcache beschleunigt die Ausführung von PHP-Code erheblich im Vergleich zu älteren Versionen.

Bei BeoHosting sind unsere optimierten Hosting-Pakete für Core Web Vitals eingerichtet mit NVMe SSD-Festplatten, HTTP/2- und HTTP/3-Unterstützung, Brotli-Komprimierung und Server-Level-Caching. Der LiteSpeed-Webserver, den wir verwenden, bietet überlegene Leistung im Vergleich zu Apache, insbesondere für WordPress-Websites mit dem LiteSpeed Cache-Plugin. Unsere Infrastruktur in Serbien gewährleistet eine geringe Latenz für inländische Besucher, was die TTFB- und LCP-Metriken direkt verbessert.

Fazit

Die Optimierung der Core Web Vitals erfordert einen systematischen Ansatz mit Fokus auf Bilder und Server für LCP, JavaScript-Optimierung für INP und visuelle Stabilität für CLS. Verwenden Sie Messwerkzeuge, um problematische Seiten zu identifizieren und den Fortschritt nach jeder Optimierung zu verfolgen. Die Kombination aus qualitativ hochwertigem Hosting, optimiertem Code und richtig konfiguriertem Caching kann alle drei Metriken erheblich verbessern und bessere Positionen in der Google-Suche sicherstellen.