Webパフォーマンス最適化
Webパフォーマンス最適化とは
Webパフォーマンス最適化は、ページの表示と操作を速くするための計測と改善の総称です。表示が1秒遅くなるだけで離脱率は目に見えて上がり、[[SEOの技術基礎]] で扱う検索順位にも影響します。「速さは機能」と言われる理由です。
まず計測 — Core Web Vitals
改善の前に計測です。Google が定義する Core Web Vitals が事実上の標準指標です。
| 指標 | 何を測るか | 目安 |
|---|---|---|
| LCP | メインコンテンツが表示されるまでの時間 | 2.5秒以内 |
| INP | 操作(クリック等)への反応の速さ | 200ms以内 |
| CLS | 表示中のレイアウトのガタつき | 0.1以下 |
Lighthouse(開発者ツール内蔵)や PageSpeed Insights で測定できます。推測ではなく計測結果に基づいてボトルネックから直すのが鉄則です。
定番の改善手法
読み込みを軽く・少なく
- 画像最適化 — WebP/AVIF 形式への変換、適切なサイズでの配信。多くのサイトで最大の改善余地
- 遅延読み込み — 画面外の画像に
loading="lazy"を付け、必要になるまで読み込まない - コード分割 — [[ESモジュールとバンドラ]] の機能で、ページごとに必要なJSだけを読み込む
- 圧縮と軽量化 — gzip/Brotli 圧縮、未使用コードの削除
届け方を速く
- [[CDN]] — 利用者に近いサーバーから静的ファイルを配信する
- [[HTTPキャッシュ]] — 一度取得したファイルを再利用し、通信自体をなくす
描画を軽く
- [[ブラウザレンダリングの仕組み]] を踏まえ、
<script defer>でHTML解析のブロックを避ける - アニメーションは transform / opacity を使い、リフローを避ける
初学者向けポイント
- 「画像の最適化」と「キャッシュの活用」だけでも体感が大きく変わるサイトは多いです。まずこの2つから
- 開発マシンは高速です。開発者ツールのネットワーク/CPUスロットリングで、遅い環境を再現して確認しましょう
- 最適化には「複雑さ」というコストが伴います。計測して効果のあるものだけを採用してください
関連技術とのつながり
- [[ブラウザレンダリングの仕組み]] — 描画系の最適化の理論的な土台
- [[CDN]] / [[HTTPキャッシュ]] — 「届け方」を速くするインフラ側の手法
- [[ESモジュールとバンドラ]] — コード分割・軽量化を担うツール
- [[SEOの技術基礎]] — 表示速度は検索順位の評価要素
Q: パフォーマンス改善の進め方として本文で推奨されているのはどれ?
- [ ] 思いついた手法を手当たり次第すべて導入する
- [x] 計測してボトルネックを特定してから直す
- [ ] とにかくサーバーの台数を増やす
解説: 推測ではなく、LighthouseなどでCore Web Vitalsを計測し、効果の大きい箇所から直すのが鉄則です。
Q: LCPが測っているのはどれ?
- [x] メインコンテンツが表示されるまでの時間
- [ ] 操作への反応の速さ
- [ ] レイアウトのガタつき
解説: LCPは主要コンテンツの表示時間(目安2.5秒以内)、INPが操作への反応、CLSがガタつきの指標です。
Q: 画面外の画像を必要になるまで読み込まない手法はどれ?
- [ ] コード分割
- [ ] gzip圧縮
- [x] 遅延読み込み(loading="lazy")
解説: loading="lazy" を付けると画面外の画像の読み込みを遅らせ、初回表示を軽くできます。