Core Web Vitals: Page Speed und UX Signale für SEO

Was sind Core Web Vitals

Core Web Vitals sind eine Reihe von spezifischen, messbaren Metriken, die Google verwendet, um die reale Benutzererfahrung auf Webseiten zu bewerten. Sie wurden 2021 als Ranking-Signale eingeführt und seitdem aktualisiert (Ersetzen der First Input Delay durch Interaction to Next Paint im Jahr 2024), konzentrieren sich auf drei Aspekte der Seitenerfahrung, die für die Benutzer am wichtigsten sind: wie schnell der Hauptinhalt geladen wird, wie schnell die Seite auf die Benutzerinteraktion reagiert und wie visuell stabil die Seite während des Ladens ist.

Diese Metriken sind nicht theoretisch – sie werden mit echten Benutzerdaten aus dem Chrome User Experience Report (CrUX) gemessen, der anonymisierte Leistungsdaten von Chrome-Browsern aggregiert. Dies bedeutet, dass Ihre Core Web Vitals-Werte widerspiegeln, wie tatsächliche Besucher Ihre Website erleben, nicht nur wie sie in einem Labortest funktioniert.

Größte Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Inhaltselement (normalerweise ein Heldenbild, eine Überschrift oder ein Textblock) das Rendering abgeschlossen hat. Es ist ein Proxy für die wahrgenommene Ladegeschwindigkeit – wann fühlt sich der Benutzer wie die Seite geladen hat? Das Ziel liegt unter 2,5 Sekunden.

Häufige LCP Probleme

Langsame Antwortzeiten auf Server, Render-Blocking JavaScript und CSS, nicht optimierte Bilder (zu großes, falsches Format) und langsames Laden von Ressourcen von Servern von Drittanbietern sind die häufigsten Ursachen für schlechtes LCP.

Wie man LCP verbessert

Optimieren Sie die Reaktionszeit Ihres Servers (erwägen Sie ein Upgrade des Hostings oder das Hinzufügen eines CDN). Laden Sie kritische Ressourcen wie Heldenbilder und Schriftarten vor. Verwenden Sie moderne Bildformate (WebP, AVIF) und Größenbilder entsprechend. Minimieren Sie Render-Blocking-Ressourcen, indem Sie nicht-kritisches CSS und JavaScript verschieben. Implementieren Sie das faule Laden für Bilder unterhalb der Falte, damit der Browser den Inhalt priorisiert, den Benutzer zuerst sehen.

Interaktion mit Next Paint (INP)

INP misst die Reaktionsfähigkeit einer Seite auf Benutzerinteraktionen (Klicks, Taps, Tastendrücke) während der gesamten Zeit, in der die Seite geöffnet ist. Es berichtet über die schlechteste beobachtete Interaktionslatenz und spiegelt wider, wie schnell die Seite auf die Aktionen des Benutzers reagiert. Das Ziel liegt unter 200 Millisekunden.

Gemeinsame INP Probleme

Lang laufende JavaScript-Aufgaben, die den Hauptthread blockieren, schwere Ereignis-Handler, übermäßige DOM-Größe und synchrone Layout-Berechnungen während Benutzerinteraktionen tragen alle zu schlechten INP-Werten bei.

Wie man INP verbessert

Brechen Sie lange JavaScript-Aufgaben in kleinere Stücke mit Techniken wie requestIdleCallback oder setTimeout um die Kontrolle zurück an den Browser zu geben. Minimieren Sie die Komplexität von Event-Handlern. Die Größe des DOM wird reduziert. Verwenden Sie Webworker für schwere Berechnungen, die keinen Zugriff auf das DOM benötigen. Optimieren Sie Skripte von Drittanbietern, die auf Interaktion laufen.

Kumulative Layoutverschiebung (CLS)

CLS misst die visuelle Stabilität – wie sehr sich das Seitenlayout unerwartet verschiebt, wenn Inhalte geladen werden. Haben Sie jemals einen Artikel gelesen und der Text springt nach unten, weil eine Anzeige oder ein Bild darüber geladen wird? Das ist Layout-Verschiebung, und es ist frustrierend für die Benutzer. Das Ziel liegt unter 0,1.

Häufige CLS Probleme

Bilder und Anzeigen ohne spezifizierte Dimensionen, dynamisch injizierte Inhalte über vorhandenen Inhalten, Webfonts, die beim Laden einen Textfluss verursachen (FOUT/FOIT) und spätes Laden von Widgets von Drittanbietern sind die häufigsten Ursachen.

Wie man CLS verbessert

Geben Sie immer Breiten- und Höhenattribute für Bilder und Videos an (oder verwenden Sie das CSS-Seitenverhältnis), damit der Browser vor dem Laden Platz reserviert. Reservieren Sie Platz für Anzeigen und Embeds. Verwendung font-display: swap mit Schriftvorspannung, um schriftbezogene Layoutverschiebungen zu minimieren. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn, sie werden durch eine Benutzerinteraktion ausgelöst.

Messung von Core Web Vitals

Felddaten vs. Labordaten

Die Felddaten stammen von echten Nutzern (Chrome UX Report, Google Search Console, PageSpeed Insights Felddatenbereich). Labordaten stammen aus simulierten Seitenlasten (Lighthouse, PageSpeed Insights Labordaten, WebPageTest). Google verwendet Felddaten für das Ranking, aber Labordaten sind nützlich für die Diagnose und das Debuggen bestimmter Probleme. Priorisieren Sie immer Felddaten, wenn Sie Ihre tatsächliche Leistung bewerten.

Werkzeuge

Der Core Web Vitals-Bericht der Google Search Console zeigt Ihren Site-weiten Status an. PageSpeed Insights stellt sowohl Feld- als auch Labordaten für einzelne URLs bereit. Lighthouse (in Chrome DevTools) gibt detaillierte Labormessungen und spezifische Empfehlungen. Die Web Vitals Chrome-Erweiterung zeigt Echtzeit-CWV-Scores, während Sie durchsuchen. Tools von Drittanbietern wie Screaming Frog und SEMrush können CWV auf Ihrer gesamten Website auditieren.

Core Web Vitals und SEO Rankings

Core Web Vitals sind Teil des Google Page Experience Ranking-Systems, das auch Mobile-Friendlichkeit, HTTPS und das Fehlen von aufdringlichen Interstitials umfasst. Page Experience ist ein Tiebreaker-Signal – wenn zwei Seiten in der Inhaltsqualität und Relevanz ähnlich sind, wird die mit besserer Page Experience wahrscheinlich höher eingestuft. Es ist kein dominierender Faktor, der die Qualität der Inhalte überwiegt, aber es kann der Unterschied zwischen Position vier und Position sieben sein.

Die praktische Implikation ist, dass Core Web Vitals am wichtigsten für Wettbewerbsabfragen sind, bei denen kleine Ranking-Unterschiede erhebliche Auswirkungen auf den Traffic haben. Es ist unwahrscheinlich, dass die Behebung eines schlechten CWV eine mittelmäßige Seite von Seite fünf auf Seite eins nimmt, aber es kann einer starken Seite den Vorteil geben, den sie braucht, um ähnlich starke Konkurrenten zu übertreffen.

Ein praktischer Ansatz

Überprüfen Sie zunächst Ihre Core Web Vitals in der Google Search Console. Identifizieren Sie Seiten oder Seitenvorlagen, die eine oder mehrere Metriken nicht erfüllen. Konzentrieren Sie sich auf die Metrik, die die meisten Seiten zuerst betrifft. Implementieren Sie Korrekturen, Bereitstellung und Überwachung von Real-User-Daten in den folgenden Wochen, um Verbesserungen zu überprüfen. CWV ist keine einmalige Korrektur, sondern eine fortlaufende Leistungspraxis, insbesondere wenn Sie neue Inhalte, Funktionen und Integrationen von Drittanbietern hinzufügen, die Ihre Ergebnisse regressieren können.

Third-Party-Scripts und ihre Auswirkungen

Third-Party-Scripts sind oft die größten Performance-Killer auf modernen Websites. Analyse-Tools, Werbe-Tags, Social Media-Widgets, Chat-Widgets, A / B-Test-Tools und Tracking-Pixel laden JavaScript, das um den Hauptthread des Browsers konkurriert. Jedes Skript erhöht das Seitengewicht, erhöht die Renderzeit und kann Layoutverschiebungen und Interaktionsverzögerungen verursachen.

Prüfung der Auswirkungen Dritter

Verwenden Sie das Netzwerk-Panel von Chrome DevTools und die Lighthouse-Zusammenfassung von Drittanbietern, um zu ermitteln, welche externen Skripts geladen werden, wie viele Daten übertragen werden und wie lange sie für die Ausführung benötigt werden. Möglicherweise finden Sie Skripte von Tools, die Sie nicht mehr verwenden, doppelte Tracking-Tags oder Skripte, die asynchron geladen werden können, anstatt das Seitenrendering zu blockieren.

Minderungsstrategien

Laden Sie nicht-kritische Skripte von Drittanbietern mit dem Attribut async oder defer, damit sie das Seitenrendern nicht blockieren. Verwenden Sie einen Tag-Manager, um zu steuern, wann Skripte geladen werden und auf welchen Seiten. Implementieren sie das lazy-laden für chat-widgets und soziale einbettungen, so dass sie nur geladen werden, wenn der benutzer zu ihnen scrollt oder mit einem trigger interagiert. Entfernen Sie alle Skripte, die Sie nicht mehr benötigen. Bei den verbleibenden Skripten bewerten Sie, ob der von ihnen bereitgestellte Geschäftswert ihre Leistungskosten rechtfertigt.

Bildoptimierung in der Tiefe

Bilder sind in der Regel die schwersten Ressourcen auf einer Webseite und die häufigste Ursache für schlechte LCP-Werte. Eine umfassende Bildoptimierungsstrategie befasst sich mit Format, Abmessungen, Kompression und Ladeverhalten.

Moderne Formate

WebP bietet deutlich kleinere Dateigrößen als JPEG und PNG mit vergleichbarer Qualität. AVIF bietet eine noch bessere Komprimierung, hat aber weniger Browser-Unterstützung. Verwenden Sie das Bildelement oder die Inhaltsverhandlung, um Browsern, die sie unterstützen, moderne Formate zu liefern, während Sie für ältere Browser auf JPEG zurückgreifen. Die meisten CDNs und Bildoptimierungsdienste verarbeiten die Formatkonvertierung automatisch.

Responsive Bilder

Servieren Sie Bilder in geeigneter Größe für jedes Gerät. Ein 3000-Pixel-weites Heldenbild, das auf einem 375-Pixel-breiten mobilen Bildschirm angezeigt wird, verschwendet Bandbreite auf Pixeln, die nie gesehen werden. Verwenden Sie die Attribute srcset und sizes, um dem Browser mitzuteilen, welche Bilddatei basierend auf der Viewport-Breite heruntergeladen werden soll. Diese einzelne Optimierung kann die Datenübertragung auf mobilen Geräten drastisch reduzieren.

Fauler Ladevorgang

Hinzufügen des loading="lazy" Attributieren Sie Bilder unter der Falte, so dass der Browser sie nur herunterlädt, wenn der Benutzer auf sie zu scrollt. Lazy laden Sie keine Bilder im ursprünglichen Viewport (über dem Falten), da dies LCP verzögert. Für das Heldenbild oder Hauptinhaltsbild verwenden loading="eager" (oder das Attribut ganz weglassen) und erwägen, es mit einem Link rel=preload-Tag für das schnellste Rendering vorzuladen.

Fontoptimierung

Webfonts können zwei Leistungsprobleme verursachen: verzögertes Textrendering (Benutzer sehen einen Leerraum, in dem Text sein sollte, bis die Schrift geladen wird) und Layoutverschiebungen (Textreflowing, wenn eine Webfont eine Systemfont ersetzt). Beide Probleme betreffen Core Web Vitals.

Verwendung font-display: swap in Ihren Font-Face-Deklarationen Text sofort in einer Fallback-Schriftart anzuzeigen, während die Web-Schrift geladen wird. Laden Sie Ihre wichtigsten Schriftartendateien mit link rel=preload vor, um sie früher herunterzuladen. Legen Sie Ihre Schriftarten so fest, dass sie nur die Zeichen enthalten, die Sie tatsächlich verwenden (z. B. lateinische Zeichen anstelle des vollen Unicode-Bereichs). Hosten Sie Schriftarten lokal, anstatt sie aus Google Fonts zu laden, wenn Sie maximale Kontrolle über das Caching- und Ladeverhalten haben möchten.

Core Web Vitals für Single-Page-Anwendungen

Single-Page-Anwendungen (SPAs), die mit React, Vue oder Angular erstellt wurden, stellen einzigartige Core Web Vitals-Herausforderungen dar. Die clientseitige Navigation löst keine neuen Seitenlasten aus, so dass die herkömmliche CWV-Messung nur die anfängliche Seitenlast erfasst. Die vom Benutzer wahrgenommene Leistung während der In-App-Navigation ist jedoch immer noch wichtig für die Benutzererfahrung.

Für das erste Seitenladen stellen Sie sicher, dass das serverseitige Rendern (SSR) oder die statische Site-Generierung (SSG) so erfolgt, dass der erste aussagekräftige Inhalt schnell angezeigt wird, ohne auf die Ausführung von JavaScript zu warten. Code-Split Ihre Anwendung, so dass Benutzer nur das JavaScript herunterladen, das für die erste Ansicht benötigt wird. Lazy Load Route-Level-Blöcke, so dass nachfolgende Seiten auf Anfrage geladen werden. Überwachen Sie Ihre Real-User-Metriken genau, da Labortools die CWV-Auswirkungen großer JavaScript-Anwendungen oft unterschätzen.

CWV Optimierung Workflow für Teams

Die Verbesserung von Core Web Vitals erfordert oft die Koordination zwischen Entwicklern, Designern, Content-Teams und Marketing. Etablieren Sie einen klaren Workflow: Das Marketing identifiziert die Seiten mit der höchsten Priorität (basierend auf Traffic, Conversions und aktuellen CWV-Scores), das Entwicklungsteam diagnostiziert die spezifischen Probleme mit Labortools und echten Benutzerdaten, Designer passen Layouts und Assets an die Leistungsziele an und das Content-Team sorgt für Bildoptimierung und Content-Struktur unterstützt schnelles Laden.

Setzen Sie Performance-Budgets für jede Seitenvorlage: maximale Gesamtseitengewicht, maximale JavaScript-Größe, maximale Anzahl von Anfragen und Ziel-CWV-Scores. Integrieren Sie Performance-Tests in Ihre Deployment-Pipeline, damit Regressionen abgefangen werden, bevor sie die Produktion erreichen. Behandeln Sie Leistung als Feature, nicht als nachträglichen Einfall, indem Sie CWV-Ziele in die Anforderungen für jede neue Seitenvorlage oder -funktion aufnehmen.

Der Business Case für Core Web Vitals

Über SEO-Rankings hinaus hat die Verbesserung von Core Web Vitals direkte Auswirkungen auf das Geschäft. Schnellere Seiten reduzieren die Bounce-Raten, erhöhen die Seiten pro Sitzung und verbessern die Conversion-Raten. Mehrere groß angelegte Studien von Google und anderen Unternehmen haben Korrelationen zwischen Seitengeschwindigkeitsverbesserungen und Umsatzsteigerungen gezeigt. Während die genauen Auswirkungen je nach Branche und Geschäftsmodell variieren, ist die Richtung konsistent: Schnellere, reaktionsschnellere und visuell stabilere Seiten schneiden bei jeder Geschäftsmetrik besser ab.

Rahmen CWV Verbesserungen in der Geschäftsbedingungen bei der Förderung von Ressourcen. Anstatt “wir müssen unseren LCP von 4,2 Sekunden auf 2,4 Sekunden reduzieren”, sagen Sie “Verbesserung unserer Seitenladegeschwindigkeit, um die Google-Standards zu erfüllen, könnte unsere Bounce-Rate reduzieren und die Conversion-Rate verbessern, basierend auf Branchenbenchmarks für Geschwindigkeitsverbesserungen in unserer Vertikalen.” Die technische Metrik ist wichtig; Das Geschäftsergebnis motiviert Investitionen.