Web Speed Hackathon チェックリスト ver.2025032210

SPDX-FileCopyrightText: Copyright (c) 2025 TwoSquirrels
SPDX-License-Identifier: MIT

りすりす/TwoSquirrels が WSH 用にまとめた、Web サイトチューニングのチェックリストです。このリストの項目を 1 つずつ対応していけば、機械的にある程度チューニングができるはずです。ご自由にお使いください！(WSH 用なので、キャッシュ周りについては省いています)

1. WSH 事前準備

環境構築はできていますか？
- 最新版 Chrome
- IDE / エディタ
- 拡張機能
対策はしましたか？
- チェックリストの用意
- 過去問演習
- テーマから予想
  - 2025 なら「架空の動画配信サービス」なので、動画周りの最適化を勉強しておく
持ち物は揃っていますか？
- PC と周辺機器
  - これが無いと元も子もない
  - 電源ケーブルや延長ケーブルは忘れがち
- 会場で参加する場合、受付表と名刺
  - 名刺を持っていない場合は受付時に伝える
- やること、気づいたことなどをメモするノート
  - 紙か電子かはお好みで
  - 電子の場合、スマホからも確認・編集ができるとよさそう
- カフェインや糖分を含む飲み物
  - コーヒー、緑茶、エナジードリンク、スポーツドリンクなど
  - 会場だとフリードリンクのコーナーがあるらしい…？
- お菓子
  - チョコレート、ナッツなど
- 会場で参加する場合、食事を用意しておく
  - 11 時から入れなくなるらしく、外食は無理そう
レギュレーションを確認しましたか？
- 採点方法
- 生成 AI の使用可否
- その他もろもろのルール

2. ビルド最適化

pnpm の最新を指定
- package.json の packageManager を "pnpm@latest" にする
- jq -i '.packageManager = "pnpm@latest"' package.json でもできる
依存関係をアップデート
- pnpm up でできる
Dockerfile を改善
- マルチステージビルドによって、ビルドと起動を分離する
- builder の方は pnpm install --frozen-lockfile にする
- 起動の方は ENV NODE_ENV=production して RUN rm -rf node_modules してから、
  pnpm install --prod --frozen-lockfile にする
バンドル設定を最適化
- 大体のバンドラならデフォルト設定の方が最適なので、余計な設定は消す
- Minification や Tree Shaking や Splitting が無効化されているなら、有効化する
- Minification で terser を使うよう設定する
- WSH なら Polyfill や Shim はなくし、最新版 Chrome のみをサポートする設定にする
- brotli 圧縮するようにする

3. サーバー最適化

brotli (か gzip) で圧縮するように設定する
HTTP/2 や HTTP/3 を使うように設定する

4. バンドルサイズ削減

ビルドツールに応じた Bundle Analyzer を調べて利用
- バンドルサイズの大きなところから削減
バンドルサイズの大きい無駄なライブラリを排除
- 基本は標準機能を用いて置き換える
- それが難しいなら、軽量なライブラリで置き換える
- 特に jQuery や Lodash などの Utility Library は標準機能に置き換えられる
- React は Preact に置き換えられることがある
JS コード分割
- 必要なコードだけを読み込むようにする
- すぐに必要のないモジュールは React.lazy や dynamic imports で読み込む
CSS 最適化
- Tailwind CSS などは purge する設定にする
  - コード内で動的につけていたりする場合は例外設定が必要
- Sass を使うなどして、CSS の @import を避ける
リソースを圧縮・遅延読み込み
- [[#6. リソース最適化]] を参照

5. [超重要] 計測・診断

最低限の最適化ができたら、計測をしてからボトルネックを見つけて最適化をする
提供された採点方法でスコアを計測する
DevTools の Network throttling を Slow 4G や 3G に設定し、通信速度を制限して確認する
- DevTools から通信を観察する
Lighthouse で計測する (Speed Index は総合的な指標)
- First Contentful Paint 改善 (通信がボトルネック)
  - preconnect や preload を削る
  - (キャッシュは WSH では意味無いため、不要)
- Largest Contentful Paint 改善 (通信順の問題)
  - LCP の要素の読み込みをとにかく速くする
  - <img> なら loading="eager" を指定する
- Intersection to Next Paint 改善 (JS がボトルネック)
  - メインスレッドでの処理を減らす
- Cumulative Layout Shift 改善 (style の問題)
  - 動的に読み込んで差し込まれる要素は、あらかじめその大きさを確保しておく
  - 読み込まれるまでスケルトンを置いておくとよい
- Total Blocking Time 改善 (JS がボトルネック)
  - メインスレッドでの処理を減らす
  - Service Worker で並列実行する
E2E テスト・Visual Regression Testing を実行する
- テストが落ちていないか都度確認する
- WSH はレギュレーション違反が一番怖い

6. リソース最適化

圧縮
- 画像や動画は適当にリサイズする
- 画像なら WebP、動画なら WebM、音声なら Opus で圧縮する
  - WSH なら品質が落ちてると見て分かり始めるくらいまでは圧縮してもいい
- フォントは WOFF2 を使う
  - 使っていないフォントは無くす
- 事前に圧縮できない場合、画像なら sharp、動画と音声なら FFmpeg を使う
フォント最適化
- 使っていないフォントは無くす
  - 必要な weight のみを読み込む
- サブセット化する
  - 一部ならクエリで指定するか、画像化する
- CSS で font-display: swap; する
基本的には遅延読み込み
- <link rel="preload"> しない
- <img> なら loading="lazy" を指定する
- <img> 以外は IntersectionObserver を使う
- 長めの動画は HLS や MPEG-DASH でストリーミングをする
ファーストビュー (最初に表示される部分)
- <link rel="preload"> をしておく
- ヒーロー画像などは <picture> で画面サイズごとに切り替える
- <img> なら loading="eager" を指定する
- 長文は 1 画面分だけ埋め込むか、優先・事前読み込みする
サーバー分割
- 静的ファイルは CDN に置く

7. スタイル最適化

CLS 対策
- 動的に読み込まれるリソースや動的に内容が追加される要素は、
  あらかじめその大きさを確保しておく
- SSR するか、スケルトンを置く
  - React なら <Suspense> の fallback で読み込まれるまで表示できる
ファーストビュー
- ファーストビューの部分の CSS はインライン化する
JS を置き換え
- CSS でできることを JS でやっている場合、CSS で置き換える

8. API 最適化

API 設計の改善
- API コールを減らす
- レスポンス内容を必要最低限にする
- 余計な処理を無くす
  - 過剰な鯖の負荷対策
    - WSH なら負荷対策は要らない
バックエンドの改善
- SQL を最適化する
  - インデックスを貼る
  - N+1 問題を解消する
- アルゴリズムを最適化する

9. React 最適化

動的に読み込まれるところは細かく <Suspense> でくくる
React.memo 使って不要な再レンダリングを防ぐ
ReDoS を解消する
WSH なら、変な事をしていたらデチューニングされている可能性が高いので注意する

TwoSquirrels/wsh-checklist.md