JEDEN CORE WEB VITAL BEHEBEN
Drei Kennzahlen, drei verschiedene Aufgaben. Die konkreten Maßnahmen, die bei jeder einzelnen zum Erfolg führen – ganz ohne theoretisches Geschwafel.
← Alle Guides Alle Guides zu diesem Thema
LCP: Das Wichtigste soll schnell geladen werden
„Largest Contentful Paint“ ist in der Regel ein Hero-Bild, eine große Überschrift oder ein Poster-Frame. Finden Sie dieses Element. Alles andere ist zweitrangig, bis es schnell geladen ist.
Maßnahmen zur Verbesserung des LCP: Komprimieren und Anpassen der Größe der Ressource, Verwendung eines modernen Formats, Festlegen der Abmessungen, Vorladen der genauen URL, wenn diese erst spät ermittelt werden kann, Einbinden in ein CDN und Verkürzung des TTFB, damit die Datenübertragung beginnen kann. Vermeiden Sie das verzögerte Laden des LCP-Bildes. Vermeiden Sie Karussells, die den eigentlichen LCP-Knoten verzögern.
Aus Sicht des Servers: Wenn HTML selbst zu spät kommt, hilft kein Bildtrick. Behebe zuerst die Probleme mit dem Cache und dem Ursprungsserver.
Das Wichtigste auf einen Blick: Benennen Sie das LCP-Element und sorgen Sie dann dafür, dass diese Datei und ihr Zugriffspfad unglaublich schnell sind.
INP: Den Hauptthread frei halten
„Interaction to Next Paint“ misst, wie schnell die Seite nach einem Tippen oder Klicken reagiert. Aufwändiges JavaScript im Hauptthread ist dabei meist der Übeltäter: umfangreiche Initialisierung, ressourcenintensive Handler und Skripte von Drittanbietern, die endlos laufen.
Maßnahmen: Dritte entfernen oder zurückstellen, Handler aufteilen, große synchrone Komponenten auf Marketing-Seiten vermeiden, servergerendertes HTML mit kleinen Inseln bevorzugen und auf einem echten Android-Gerät der mittleren Leistungsklasse testen, nicht nur mit einer voreingestellten Drosselung auf dem Desktop.
Das Wichtigste auf einen Blick: Der INP-Wert verbessert sich, wenn man Aufgaben aus dem Hauptthread auslagert, nicht aber, wenn man eine CSS-Übergangseffekte im Detail optimiert.
CLS: Verhindern, dass die Seite springt
„Cumulative Layout Shift“ bezeichnet visuelle Instabilität. Dazu gehören Bilder ohne Größenangaben, Schriftarten, die erst spät ausgetauscht werden und die Textgröße ändern, Anzeigen und eingebettete Inhalte, die eine Lücke im Layout hinterlassen, sowie Banner, die über den Inhalt gelegt werden.
Maßnahmen: Breite und Höhe oder CSS-Seitenverhältnis je nach Medium, reservierte Plätze für Anzeigen, Strategien zur Darstellung von Schriftarten, die das Layout nicht durcheinanderbringen, und keine erst spät geladene Benutzeroberfläche über bereits vorhandenem Inhalt. Es ist vorzuziehen, vorhandenen Platz anzupassen, anstatt oben neue Blöcke einzufügen.
Das Wichtigste auf einen Blick: Wenn etwas erst später erscheint, reserviere den Platz dafür schon früher.
Die Fehler, die immer wieder zum Scheitern führen
| Metrisch | Häufiger Fehler | Ich mache mich besser auf den Weg |
|---|---|---|
| LCP | Lazy Loading des Hero-Bereichs | Eager + Vorladen der tatsächlichen LCP-URL |
| LCP | Optimierung eines Nicht-LCP-Bildes | Identifizieren Sie zunächst den LCP-Knoten |
| INP | CSS-Animationen als Sündenbock | JS und Drittanbieter entfernen |
| INP | Testen nur auf dem Desktop | Verwenden Sie ein Smartphone der mittleren Preisklasse |
| CLS | Schriftmetriken ignorieren | Schriftarten auswählen, Platz reservieren |
| CLS | Cookie-Banner ohne Leerzeichen | Sorgfältig reservieren oder überlagern |
Das Wichtigste auf einen Blick: Die meisten wiederholten Fehlschläge sind Prozessfehler und nicht das Fehlen von Mikrooptimierungen.
So besteht man alle drei Prüfungen
Reihenfolge der Maßnahmen bei einer fehlerhaften Website: Zuerst LCP bereinigen, dann INP, dann CLS. Messen Sie die Felddaten zwischen den einzelnen Schritten erneut. Verwenden Sie die CWV-Checkliste als Startpunkt und den Leitfaden für langsame Websites, wenn Sie den Server immer noch nicht vom Frontend unterscheiden können.
Es reicht aus, wenn alle drei Kriterien auf Mobilgeräten das 75. Perzentil erreichen. Halten Sie die Veröffentlichung nicht länger zurück, nur weil die Laborwerte bei 100 liegen, sobald die Felddaten zufriedenstellend sind.
Das Wichtigste auf einen Blick: Zuerst LCP optimieren. INP und CLS lassen sich leichter verbessern, sobald der Hauptinhaltspfad optimiert ist.
Ein einwöchiger Rettungsplan
Tag 1: Felddaten abrufen, das LCP-Element in den drei wichtigsten Vorlagen benennen, jedes Skript von Drittanbietern mit einem Verantwortlichen auflisten. Tag 2 und 3: Nur die LCP-Medien- und Discovery-Korrekturen bereitstellen. Tag 4: Die problematischsten Drittanbieter entfernen oder zurückstellen und den INP auf einem Smartphone erneut überprüfen. Tag 5: Platz für die CLS-Verursacher reservieren, die in der Benutzererfahrung sichtbar sind. Tag 6 und 7: Erneut messen, verbleibende Probleme dokumentieren und entscheiden, ob die verbleibenden Arbeiten den Start verhindern.
Diese Woche ist besser als ein Monat mit uneinheitlichen Refactorings, da jeder Tag eine Kennzahl und einen Evidenzzyklus umfasst. Wenn der LCP nach Tag 3 immer noch im roten Bereich liegt, beginne nicht mit der Bereinigung des Designsystems. Bleibe so lange bei dem LCP-Element, bis sich etwas ändert.
Das Wichtigste auf einen Blick: Eine Kennzahl pro Tag mit einer erneuten Messung ist besser als ein Backlog mit uneinheitlichen Ergebnissen.