DIE CWV-CHECKLISTE
Die zwölf Prüfschritte, die ich durchführe, bevor ich eine Website oder eine Vorlage als startbereit erachte. Kurz genug, um sie anzuwenden, streng genug, um echte Fehler zu erkennen.
← Alle Guides Alle Guides zu diesem Thema
Warum kurze Checklisten funktionieren
Umfangreiche Leistungsprüfungen werden ignoriert. Stattdessen wird eine Liste mit zwölf Punkten verwendet, die ein leitender Entwickler an einem Nachmittag abarbeiten kann. Diese Liste gehe ich vor dem Start, vor einer größeren Änderung an der Vorlage und nach jeder Überraschung vom Typ „Wir haben ein kleines Skript hinzugefügt“ durch.
Hier wird davon ausgegangen, dass Sie die Kennzahlen bereits kennen. Wenn Sie eine Diagnose benötigen, lesen Sie den Artikel „Warum Ihre Website langsam ist“. Wenn Sie bei einer bestimmten Kennzahl Maßnahmen ergreifen müssen, lesen Sie den Leitfaden zu LCP, INP und CLS. Diese Seite ist der Einstieg.
Das Wichtigste auf einen Blick: Eine Checkliste, die man tatsächlich abarbeitet, ist besser als ein 40-seitiger Prüfbericht, den niemand ein zweites Mal aufschlägt.
Die 12 Punkte
| # | Überprüfen | Der Pass sieht so aus: |
|---|---|---|
| 1 | Felddaten abgerufen | CrUX oder RUM für die Schlüsselvorlagen, 75. Perzentil für Mobilgeräte |
| 2 | LCP-Element identifiziert | Sie können das Element und dessen URL auf der Geldseite benennen |
| 3 | LCP-Medienbudget | Hero mit angemessenem Gewicht, in modernem Format, maßgeschneidert, bei Bedarf vorinstalliert |
| 4 | TTFB normal | Zwischengespeichertes oder statisches HTML hält die TTFB-Zeit aus der Gefahrenzone |
| 5 | JS auf dem kritischen Pfad | Kein Smalltalk, kein A/B-Test und keine übermäßige Flüssigkeitszufuhr vor dem ersten Kontakt erforderlich |
| 6 | INP-Stichprobe | Die Haupttasten reagieren auch bei einem Smartphone der Mittelklasse weiterhin gut |
| 7 | Schriftarten | Teilmenge, selbst gehostetes oder kontrolliertes CDN, kein unsichtbarer Text, der mehrere Sekunden lang angezeigt wird |
| 8 | CLS-Reservierungsbereich | Bilder, Einbettungen und Anzeigen verfügen über Rahmen, die ihre Abmessungen oder ihr Seitenverhältnis angeben |
| 9 | Aufgeführte Dritte | Jedes Etikett hat einen Besitzer und einen Daseinsgrund |
| 10 | Cache-Header | Für HTML und Assets gelten bewusst festgelegte Cache-Richtlinien, keine zufälligen |
| 11 | Vorlagenparität | Vorlagen für Startseite, Hub und Artikel wurden jeweils überprüft, nicht nur die Startseite |
| 12 | Stoppregel | Man hört auf, wenn das Feld „CWV“ überschritten wird, nicht wenn „Lighthouse“ den Wert 100 erreicht. |
Drucken Sie es aus, fügen Sie es in das Launch-Ticket ein oder verwenden Sie es als PR-Checkliste. Es geht um eine binäre Bewertung („bestanden“ oder „nicht bestanden“) pro Zeile, nicht um ausführliche Antworten.
Das Wichtigste auf einen Blick: Wenn Sie Punkt 1 und Punkt 2 nicht abhaken können, sind Sie noch nicht bereit für die Punkte 3 bis 12.
Wie man es tatsächlich benutzt
Wenden Sie die Liste auf die Vorlagen an, die Umsatz oder Rankings generieren: Startseite, primäre Landingpage, Kategorie- oder Hub-Seite sowie einen repräsentativen Artikel oder eine Produktseite. Eine grüne Startseite mit einer roten Artikelvorlage ist immer noch ein missglückter Launch.
Weisen Sie jedem Fehler einen Verantwortlichen zu. Arbeiten zur Leistungsoptimierung ohne Verantwortlichen enden in einem Slack-Thread. Führen Sie eine Woche nach der Veröffentlichung erneut Feldtests durch, und zwar nicht nur in der Staging-Umgebung. Die Staging-Umgebung liefert falsche Angaben zu Drittanbietern, Cache-Wärme und echten Geräten.
Wenn alles vorbei ist, hören Sie auf. Eine weitere Optimierung dient lediglich der Imagepflege der Marke und ist optional, sofern nicht ein spezifischer Conversion-Test etwas anderes ergibt.
Das Wichtigste auf einen Blick: Nutzen Sie die Checkliste als Kontrollinstanz für wichtige Vorlagen und ziehen Sie sich zurück, sobald die Felddaten vorliegen.
Wofür ich Teams durchfallen lasse
„Lab Green“ als bestanden werten, obwohl die Search Console immer noch eine URL-Gruppe mit schlechter Bewertung anzeigt. Eine neue Marketingseite veröffentlichen, die nie auf der Checkliste stand. Chat-Widgets auf dem kritischen Pfad belassen, weil der Vertrieb darum gebeten hat. CLS im Staging-Umfeld mit leeren Anzeigenplätzen beheben, die in der Produktionsumgebung zu Problemen führen.
Außerdem: Die Checkliste als einmalige Maßnahme zu betrachten. Vorlagen verändern sich mit der Zeit. Eine vierteljährliche Überprüfung der Finanzseiten verhindert den schleichenden Verfall durch „nur noch ein Tag“.
Wenn mehr als drei Zeilen fehlschlagen, parallelisieren Sie keine zwölf Mikroaufgaben. Beheben Sie zunächst die Probleme mit LCP und Drittanbietern und führen Sie den Vorgang dann erneut aus. Die meisten Boards werden auf diese Weise schneller abgearbeitet als bei einem wahllosen Sprint.
Das Wichtigste auf einen Blick: Die Markteinführung sollte abgesagt werden, wenn Felddaten oder Vorlagen fehlen – nicht, wenn ein rein symbolischer Laborwert bei 89 liegt.
Wo diese Checkliste innerhalb des Clusters angesiedelt ist
Verwenden Sie „why-is-my-website-slow“, wenn Sie noch einen Überblick über die Zusammenhänge zwischen Server und Frontend benötigen. Nutzen Sie den Leitfaden zu LCP, INP und CLS, wenn eine einzelne Kennzahl im roten Bereich liegt und Sie Ansatzpunkte für Verbesserungen benötigen. Greifen Sie auf den Leistungsbereich zurück, wenn es um die Roadmap und Investitionen geht und nicht um eine Startvoraussetzung.
Diese Checkliste ist der langweilige Mittelteil: binär, wiederholbar und kurz genug, dass die Leute sie auch wirklich durchgehen.
Das Wichtigste auf einen Blick: Gate startet mit der Checkliste. Führen Sie die Diagnose mithilfe der anderen Leistungsleitfäden durch.