- レンダリング開始を、有線で1秒以内、3Gで3秒以内。SpeedIndex を1000以下にする
- クリティカル CSS を 14kb 以下に抑えて
<head>タグ内に記載する - 可能な限り、スクリプトの読み込みを遅延させる。特にビデオプレイヤーやSNSボタンなど
- リソースヒントを適切に送る（dns-lookup, preconnect, prefetch, preload, rerender）
- ウェブフォントはサブセット化して、非同期で読み込む
- 画像は最適化する、特にWebPを推奨
- HTTP cache と セキュリティヘッダーを適切に設定する
- Brotli もしくは Zopfli で圧縮する
- HTTP/2 を利用しているのであれば、 HPACK と OCSP stapling を有効にする
- 可能なら、出来るだけのリソースをサービスワーカーでキャッシュする
- 競合サイトで一番早いサイトの20%上を目指せ
- 100msでのレスポンス、60fps
- ファーストペイントは-25秒、スピードインデックスは1000以下
- ビルドツールを準備する
- プログレッシブエンハンスメント
- AMPかインスタントアーティクルか
- CDNを選ぶ
- 優先順位を明確にする
- カッティングマスタードテクニックを使う
- ミクロな最適化とプログレッシブブーティング
- HTTP Cache ヘッダーを適切に指定する
- サードパーティーのJSを制限して、JS は非同期で読み込む
- レスポンシブイメージを利用して適切に最適化する
- さらに高度な画像最適化
- ウェブフォントの最適化
- クリティカルCSSを素早く配信する
- WebPack の tree-shaking と code-splitting を活用する
- レンダリングのパフォーマンスを上げる（CSS containment,
will-change） - プリフェッチやプリコネクトを活用する
- HTTP/2 への対応を準備する
- HTTP/2 に正しくデプロイする
- HTTPS などのセキュリティ対応（HTTPS 必須なので）
- サーバーと CDN が HTTP/2 に対応しているか確認
- 圧縮には Brotli か Zopfli を使う
- OCSP stapling を有効にする
- IPv6 に対応する
- HPACK （HTTP-header 圧縮技術）を有効にする
- サービスワーカーでキャッシュとフォールバックを用意する
- mixed-content warning をモニタする
- DevTool を活用して開発する
- プロキシーブラウザとレガシーブラウザのチェックをする
- 継続的にモニタリングできる環境を用意する
レガシーブラウザに対しては Core Value のみを提供して、リッチな体験はモダンブラウザのみに提供するテクニック
サーバサイドレンダリングを活用して、ファーストペイントとインタラクションの開始をずらして体験を向上させるテクニック