Core Web Vitals: Geschwindigkeit und Benutzererfahrung verbessern

In der Vergangenheit war "Geschwindigkeit" ein vages Konzept. Wurde die Seite schnell geladen? Heute hat Google genau quantifiziert, wie sich "schnell" und "reibungslos" für einen Benutzer anfühlen. Diese Metriken heißen Core Web Vitals (CWV).

Seit sie zu einem Ranking-Signal geworden sind, haben CWV den Fokus von der reinen Servergeschwindkeit auf die wahrgenommene Benutzererfahrung verlagert. Es geht nicht nur darum, wie schnell der Code lädt; es geht darum, wie bald der Benutzer die Seite tatsächlich nutzen kann.

Drei spezifische Metriken bilden die Core Web Vitals. Um die Bewertung zu bestehen, muss eine Seite in allen drei Bereichen mit "Gut" bewertet werden.

1. LCP (Largest Contentful Paint) – Ladeleistung

"Wie schnell erscheinen die Hauptinhalte?"

LCP misst die Zeit, die das größte sichtbare Element (normalerweise ein Hero-Image, Video oder eine Hauptüberschrift) benötigt, um vollständig geladen und auf dem Bildschirm angezeigt zu werden. Es sagt dem Benutzer: "Diese Seite passiert tatsächlich."

Die Schwellenwerte

• Gut: ≤ 2.5 Sekunden
• Verbesserungswürdig: ≤ 4.0 Sekunden
• Schlecht: > 4.0 Sekunden

Häufige Ursachen für schlechten LCP

• Langsame Serverantwortzeiten: Wenn Ihr Hosting billig oder überlastet ist, wartet der Browser zu lange auf Daten.
• Ressourcenladeverzögerung: Das Hero-Image ist nicht optimiert oder wird über Lazy-Loading geladen (was für das oberste Bild vermieden werden sollte).
• Render-Blocking JavaScript: Der Browser pausiert den Aufbau der Seite, um eine Skriptdatei zu lesen.

Wie man es verbessert

• Bilder optimieren: Komprimieren Sie Bilder (WebP-Format) und stellen Sie sicher, dass das Hero-Image nicht lazy-loaded ist.
• Ein CDN verwenden: Ein Content Delivery Network liefert Bilder von einem Server, der physisch näher am Benutzer liegt.

2. INP (Interaction to Next Paint) – Interaktivität

"Friert die Seite ein, wenn ich klicke?"

Hinweis: INP hat im März 2024 offiziell First Input Delay (FID) als Kernmetrik ersetzt.

INP beobachtet die Latenz aller Interaktionen, die ein Benutzer während seines gesamten Besuchs mit einer Seite durchführt (Klicks, Tippen und Tastendrücke). Es misst die Zeit zwischen der Aktion des Benutzers und der Fähigkeit des Browsers, das nächste Bild zu malen, das das Ergebnis zeigt (z. B. Öffnen eines Menüs oder Erweitern eines Akkordeons).

Die Schwellenwerte

• Gut: ≤ 200 Millisekunden
• Verbesserungswürdig: ≤ 500 Millisekunden
• Schlecht: > 500 Millisekunden

Häufige Ursachen für schlechten INP

• Schwere JavaScript-Ausführung: Der "Hauptthread" des Browsers ist zu beschäftigt mit der Verarbeitung von Code, um auf den Klick des Benutzers zu reagieren.
• Komplexe Layouts: Der Browser braucht zu lange, um die Seite nach einer Interaktion neu zu zeichnen.

Wie man es verbessert

• Lange Aufgaben aufteilen: Entwickler können große JavaScript-Blöcke in kleinere Stücke aufteilen, damit der Browser atmen kann.
• Event-Handler optimieren: Stellen Sie sicher, dass der durch einen Klick ausgelöste Code leicht und schnell ist.

3. CLS (Cumulative Layout Shift) – Visuelle Stabilität

"Springt der Inhalt unerwartet herum?"

Wir haben das alle schon erlebt: Sie wollen auf einen Button klicken, aber plötzlich lädt eine Anzeige darüber, schiebt den Inhalt nach unten, und Sie klicken versehentlich auf das Falsche. Das ist eine Layout-Verschiebung. CLS misst die Gesamtsumme aller unerwarteten Layout-Verschiebungen, die während der Lebensdauer der Seite auftreten.

Die Schwellenwerte

• Gut: ≤ 0.1
• Verbesserungswürdig: ≤ 0.25
• Schlecht: > 0.25

Häufige Ursachen für schlechten CLS

• Bilder ohne Abmessungen: Wenn Sie dem Browser nicht width="800" und height="600" mitteilen, weiß er nicht, wie viel Platz er reservieren soll.
• Anzeigen und Einbettungen: Werbebanner, die ihre Größe dynamisch ändern, schieben oft Inhalte nach unten.
• Webfonts: Manchmal ist der Text verborgen, bis die benutzerdefinierte Schriftart heruntergeladen wird (FOIT) oder den Stil wechselt (FOUT), was dazu führt, dass sich die Zeilenhöhe ändert.

Wie man es verbessert

• Abmessungen festlegen: Fügen Sie immer Breiten- und Höhenattribute zu Bild- und Videoelementen hinzu.
• Platz reservieren: Wenn Sie einen dynamischen Anzeigenplatz haben, reservieren Sie in CSS eine bestimmte Boxgröße dafür, damit sich der Inhalt nicht bewegt, wenn die Anzeige lädt.

Zusammenfassungstabelle: Die Metriken auf einen Blick

Wie Sie Ihren Wert messen

Sie müssen nicht raten. Google stellt kostenlose Tools zur Verfügung, um Ihre Website gegen diese Standards zu testen:

• PageSpeed Insights: Das Go-to-Tool für eine schnelle Momentaufnahme. Es bietet sowohl "Labordaten" (simuliert) als auch "Felddaten" (echte Benutzerdaten).
• Google Search Console: Der bericht "Core Web Vitals" zeigt Ihnen, welche URLs auf Ihrer Website fehlschlagen, und gruppiert sie nach Problemtyp.
• Lighthouse: Ein Entwicklertool, das in den Chrome-Browser integriert ist (Rechtsklick > Untersuchen > Lighthouse) für lokale Tests.