CWVチェックリスト

長いチェックリストは使われない。成功するCore Web Vitalsチェックリストは、エンジニアが本番環境にプッシュする前に苦労なく実行できるほど短いものです。私のものは12項目です。

ローンチ時に12項目すべてをクリアしたサイトは、本番環境ではCWVの問題が発生することはほぼありません。3～4項目をスキップしたサイトは、やがて75パーセンタイルで失敗し、Googleが気づいた後にチームが対応に追われることになります。

1. ヒーロー画像はheadセクション内のlink rel=preload as=imageでプリロードされている。

2. ファーストビューの画像には明示的な幅と高さの属性があり、読み込み前にレイアウトが領域を確保します。

3. WebP形式、品質82、アップロード前に実際のレンダリング寸法にリサイズします。

4. 重要なCSSはheadにインライン化し、残りは非同期読み込みに遅延させます。

5. ウェブフォントはセルフホストで、font-display: swapを設定します。

6. 公開ページすべてで初期JavaScriptは100KB以下です。

7. Analytics、マーケティング、ソーシャルピクセルスクリプトはすべて遅延読み込みします。

8. CSSグリッドの列は1frではなくminmax(0, 1fr)を使用し、長いコンテンツでのオーバーフローを防止します。

9. コンテンツが許可する限り、静的レンダリングを使用します。

10. オリジンの前にCloudflareまたは同等のCDNを配置します。

11. フィールドデータはSearch Console > Core Web Vitalsで週単位で測定します。

12. ビルド時SEOリンターが回帰でビルドを失敗させる。

メジャーローンチ前にリストを手動で確認してください。継続的なエンジニアリング作業では、6、8、11、12番をCI内で自動化してください。残りはデザイン時に行われるテンプレートレベルのチェックであり、回帰することはほぼありません。

CWVが本番環境で回帰した場合、その回帰はほぼ常にこれら12項目のいずれかが無言で違反されていることに遡ります。診断フローは：リストを確認して違反を見つけ、それを修正し、CrUXの更新を28日間待ち、確認するというものです。