Analysiere die echte Performance deiner Website mit CrUX-Daten
Verlauf wird geladen...
Was sind die Core Web Vitals?
Die Core Web Vitals sind drei von Google definierte Metriken, die die Nutzererfahrung auf einer Webseite messen. Seit 2021 sind sie ein offizieller Rankingfaktor für SEO.
Um die Bewertung der Core Web Vitals zu bestehen, müssen alle drei Metriken beim 75. Perzentil der Felddaten (echte Nutzerdaten, die Chrome erfasst) den Schwellenwert „gut“ erreichen.
Largest Contentful Paint (LCP)
Ladezeit des größten sichtbaren Elements
Was ist LCP?
Der LCP misst die Zeit, bis das größte sichtbare Inhaltselement im Viewport angezeigt wird. Dazu gehören meist Hero-Bilder, Videos oder große Textblöcke.
So verbesserst du den LCP
- Bilder optimieren: Nutze moderne Formate (WebP, AVIF), komprimiere sie und lege explizite Abmessungen fest
- Kritische Ressourcen vorladen: Nutze
<link rel="preload">für LCP-Bilder und Schriftarten - Serverantwortzeit verbessern: Nutze ein CDN, optimiere das Backend und speichere Antworten im Cache
- Blockierendes CSS entfernen: Binde kritisches CSS inline ein und lade den Rest verzögert
- Layoutverschiebungen vermeiden: Setze bei Bildern immer width und height
Interaction to Next Paint (INP)
Reaktion auf Nutzerinteraktionen
Was ist INP?
Der INP misst die Latenz aller Nutzerinteraktionen (Klicks, Tippen, Tastatureingaben) während des gesamten Besuchs einer Seite. Ein guter INP bedeutet, dass die Seite schnell auf Nutzeraktionen reagiert.
So verbesserst du den INP
- JavaScript reduzieren: Teile lange JavaScript-Aufgaben (>50 ms) in kleinere Aufgaben auf
- Nicht kritisches JavaScript aufschieben: Nutze
deferoderasyncfür Skripte - Aufwendige Berechnungen vermeiden: Nutze Web Workers für aufwendige Operationen
- Event-Handler optimieren: Nutze Event-Delegation sowie Debounce/Throttle
- DOM verkleinern: Kleineres DOM = schnellere Rendering-Updates
Cumulative Layout Shift (CLS)
Visuelle Stabilität der Seite
Was ist CLS?
Der CLS misst die visuelle Stabilität, indem er unerwartete Layoutverschiebungen quantifiziert. Ein schlechter CLS frustriert Nutzer, die wegen einer plötzlichen Verschiebung auf das falsche Element klicken können.
So verbesserst du den CLS
- Platz für Bilder/Videos reservieren: Setze immer die Attribute
widthundheight - Dynamische Werbeanzeigen vermeiden: Reserviere einen festen Platz für Werbeflächen
- Schriften vorladen: Nutze
font-display: optionaloder lade kritische Schriftarten vorab - Keine Inhalte über bestehenden Inhalten einfügen: Außer als Reaktion auf eine Nutzerinteraktion
- Transform-Animationen nutzen: Nutze für Animationen lieber
transformstatttop/left
Die folgenden Metriken sind nicht Teil der Core Web Vitals und beeinflussen die Pass/Fail-Bewertung nicht direkt. Allerdings können sie die eigentliche Ursache für einen schlechten LCP oder INP sein. Wenn du diese Metriken optimierst, können sich deine Core Web Vitals indirekt verbessern.
First Contentful Paint (FCP)
Erste Anzeige von Inhalten
Was ist FCP?
Der FCP misst die Zeit zwischen dem Beginn der Navigation und dem Moment, in dem der Browser das erste Inhaltselement anzeigt (Text, Bild, Canvas). Ein schlechter FCP zeigt, dass der Server oder das initiale Rendering zu langsam ist, was auch den LCP verzögert.
Einfluss auf die Core Web Vitals
Der FCP ist ein Vorläufer des LCP: Wenn der erste Inhalt lange braucht, bis er angezeigt wird, braucht auch das größte Element zwangsläufig länger. Ein besserer FCP verbessert in der Regel auch den LCP.
So verbesserst du den FCP
- TTFB reduzieren: Ein langsamer Server verzögert alles andere
- Blockierende Ressourcen entfernen: CSS und JS im
<head>blockieren das Rendering - Kritisches CSS inline einbinden: Das für die erste Darstellung nötige CSS muss inline sein
- Vorab mit Drittanbieter-Domains verbinden:
<link rel="preconnect">für CDNs, Schriftarten usw. - CSS/JS minimieren: Verringere die Größe der zu ladenden Dateien
Time to First Byte (TTFB)
Server-Antwortzeit
Was ist TTFB?
Die TTFB misst die Zeit zwischen der HTTP-Anfrage und dem Empfang des ersten Bytes der Antwort. Das ist die Zeit, die dein Server zum „Antworten“ braucht. Eine hohe TTFB verzögert alles andere : FCP, LCP und sogar die Interaktivität.
Einfluss auf die Core Web Vitals
Die TTFB ist die Grundlage aller anderen Metriken. Wenn dein Server langsam antwortet, leiden alle deine Performance-Metriken darunter. Sie ist oft das Erste, was du optimieren solltest.
So verbesserst du den TTFB
- Ein CDN nutzen: Liefere Inhalte von Servern in der Nähe deiner Nutzer aus
- Seiten cachen: Server-Cache (Redis, Varnish) oder Anwendungs-Cache
- Datenbankabfragen optimieren: Indizes, N+1-Abfragen, Paginierung
- HTTP/2 oder HTTP/3 nutzen: Schnellere Protokolle
- Weiterleitungen vermeiden: Jede Weiterleitung verursacht einen zusätzlichen Netzwerk-Roundtrip
- Backend optimieren: Effizienter Servercode, gutes Hosting
In der Praxis
Gib eine URL ein, um CrUX-Daten abzurufen und Mobilgeräte mit Desktop zu vergleichen. Diese Messungen zeigen die Erfahrung von Chrome-Besuchern statt eines einzelnen Labortests. Sie helfen bei Ladezeit, Reaktionsfähigkeit und Stabilität; für Seiten mit wenig Traffic können Daten fehlen.
Geh noch weiter mit einem vollständigen Audit.
Crawl, Search Console, Analytics und Logs mit wenigen Klicks.