CWVチェックリスト
サイトやテンプレートをローンチ対応と判断する前に実行する12項目のチェック。短くて実用的でありながら、実際の問題を確実に捉える厳密さを兼ね備えている。
短いチェックリストが機能する理由
長大なパフォーマンス監査は無視される。リード開発者が午後のうちに実行できる12項目のリストなら使われる。これはローンチ前、メジャーなテンプレート変更前、そして「ちょっとスクリプトを追加しただけ」という予期しない変更のあとに実行するリストである。
このリストはあなたが既にメトリクスを理解していることを前提にしている。診断の背景が必要なら、「なぜあなたのウェブサイトが遅いのか」を読むこと。特定のメトリクスについて深掘りが必要なら、LCP、INP、CLSガイドを読むこと。このページはゲートウェイである。
重要なポイント:完成させるチェックリストは、誰も2回開かない40ページの監査には勝つ。
12の項目
| # | チェック項目 | Passの外観 |
|---|---|---|
| 1 | フィールドデータを取得 | CrUXまたはRUM(主要テンプレート用)、モバイル75パーセンタイル |
| 2 | LCP要素を特定 | マネーページ上で要素とそのURLに名前を付けることができます |
| 3 | LCPメディア予算 | ヒーローは適正な重量、モダンフォーマット、サイズ指定、必要に応じてプリロード |
| 4 | TTFBが妥当か | キャッシュまたは静的HTMLがTTFBを危険ゾーンから遠ざける |
| 5 | クリティカルパス上のJS | 最初のインタラクション前に、チャット、A/B、または重いハイドレーションは不要 |
| 6 | INPスポットチェック | プライマリタップはミッドレンジ端末で応答性を保つ |
| 7 | フォント | サブセット化、自己ホストまたは管理されたCDN、複数秒の非表示テキストなし |
| 8 | CLSリザーブスペース | 画像、埋め込み、広告は寸法またはアスペクト比ボックスを持つ |
| 9 | 第三者をリスト化 | すべてのタグに所有者と存在理由がある |
| 10 | キャッシュヘッダー | HTMLとアセットは意図的なキャッシュポリシーを持つ、偶然ではなく |
| 11 | テンプレートの整合性 | ホームページ、ハブ、記事テンプレートはそれぞれチェック、ホームだけではなく |
| 12 | ストップルール | Lighthouseが100に達したときではなく、フィールドCWVがパスしたときにストップする |
印刷するなり、ローンチチケットに貼り付けるなり、PRチェックリストとして実行するなり。重要なのは各行が合格か不合格かの二値判定であり、エッセイ形式の回答ではない。
重要なポイント:項目1と項目2にチェックを入れられなければ、項目3から12へ進む準備ができていない。
実際の使い方
収入またはランキングを生み出すテンプレートで実行する:ホームページ、主要なランディングページ、カテゴリーまたはハブ、そして代表的な記事またはプロダクトページ。ホームページが緑色でもアーティクルテンプレートが赤色なら、それでもローンチ失敗である。
失敗項目ごとに担当者を割り当てる。オーナーのいないパフォーマンス作業はSlackスレッドになる。リリース後1週間でフィールドデータを再実行する。ステージング環境だけでなく。ステージング環境はサードパーティ、キャッシュの温度、実デバイスについて嘘をつく。
すべてが合格したらやめる。さらなる最適化はオプションのブランド磨きであり、特定のコンバージョンテストが別の指示をしない限りは不要である。
重要なポイント:チェックリストを重要なテンプレートのゲートとして使い、フィールドデータが確認できたら進める。
チームを不合格にする理由
Search Consoleがまだ不調なURLグループを示しているのにラボがグリーンだからと合格にする。チェックリストに載っていない新しいマーケティングページをリリースする。営業からの要求でチャットウィジェットをクリティカルパスに残す。ステージング環境で空の広告枠で修正したCLSが本番環境で崩れる。
また、チェックリストを一度限りのものとして扱う。テンプレートは変動する。マネーページの四半期ごとの再実行は、「もう一つタグを追加するだけ」からの緩やかな衰退を捉える。
3行以上失敗する場合は、12のマイクロタスクを並列化しない。LCPとサードパーティーを先に修正してから再実行する。ほとんどのボードはそうすることで、散弾銃的なスプリントより速くクリアできる。
重要なポイント:ラボスコアが89だからではなく、フィールドデータやテンプレートカバレッジが不足しているときにローンチを不合格にする。
このチェックリストがクラスター内のどこに位置するか
サーバーとフロントエンドの話が必要な場合はwhy-is-my-website-slowを使う。単一のメトリクスが赤くてレバーが必要な場合はLCP、INP、CLSガイドを使う。質問がローンチゲートではなくロードマップと投資の場合はパフォーマンスピラーを使う。
このチェックリストは退屈な中間部分だ:二項択一、繰り返し可能、人々が実際に実行するには短い。
重要なポイント:チェックリストでローンチをゲートする。他のパフォーマンスガイドで診断する。