PageSpeedの最適化 — 2026年にウェブサイトを高速化する方法
スピードがランキング要因である理由
Googleはページスピードがランキングに影響を与えることを確認しています。遅いページはユーザーを frustrate（フラストレーション）させ、Googleは最良の体験を提供したいと考えています。Googleのデータによれば、読み込み時間が1秒から3秒に延びると、ユーザーがサイトを離れる確率が32%増加します。
しかし、ランキングだけではありません。スピードは直接的に収益に影響を与えます：
- コンバージョン — 読み込み時間が1秒増えるごとに、コンバージョンが最大7%減少します。
- バウンス率 — モバイルユーザーの53%が3秒以上かかるページを離れます。
- ユーザー体験 — 高速なページはプロフェッショナルで信頼できると感じられます。
コアウェブバイタル — Googleのスピードメトリクス
Googleはスピードを3つのコアウェブバイタルメトリクスで測定します：
LCP — Largest Contentful Paint
最も大きな可視要素（通常は画像や見出し）が読み込まれる完了時刻を測定します。
- 良好: 2.5秒未満
- 改善が必要: 2.5 — 4.0秒
- 不良: 4.0秒以上
INP — Interaction to Next Paint
ユーザーがインタラクト（クリック、入力、スクロール）したときにページがどれだけ速く応答するかを測定します。
- 良好: 200ms未満
- 改善が必要: 200 — 500ms
- 不良: 500ms以上
CLS — Cumulative Layout Shift
読み込み中にレイアウトがどれだけ移動するかを測定します。何かをクリックしたいと思っているのに、突然コンテンツが移動し、別のものに当たってしまう感覚を知っています。
- 良好: 0.1未満
- 改善が必要: 0.1 — 0.25
- 不良: 0.25以上
具体的な最適化のヒント10選
1. 画像を最適化する
画像は一般的に最大の犯人です。WebPやAVIFなどのモダンフォーマットを使用すると、目に見える品質を損なうことなくファイルサイズを30-50%削減できます。
- アップロード前にすべての画像を圧縮します
- 初期ロード時に表示されない画像には
loading="lazy"を使用します - CLSを回避するために、必ず
widthとheightを指定します - 異なる画面サイズ用に
srcsetを使ってレスポンシブ画像を使用します
2. CSSとJavaScriptを最小化する
CSSとJSファイルから不要なコード、ホワイトスペース、コメントを削除します。ほとんどのビルドツールはこれを自動的に行いますが、実際にプロダクションで行われているか確認しましょう。
3. 圧縮を有効にする
サーバーがGzipまたはBrotli圧縮を使用してファイルを送信するようにしてください。これにより、ファイルサイズを最大70%削減できます。
4. ブラウザキャッシングを利用する
Cache-Control ヘッダーを設定し、ブラウザが静的ファイル（CSS、JS、画像）をローカルに保存するようにします。次回ユーザーが訪問するとき、これらのファイルは再度ダウンロードする必要がありません。
5. サーバー応答時間を短縮する
サーバーの応答時間（Time to First Byte, TTFB）は200ms未満であるべきです。解決策：
- 高速なホスティングプロバイダーを利用する
- サーバーサイドキャッシングを有効にする
- データベースクエリを最適化する
- CDNを使用してユーザーに近いサーバーから静的ファイルを配信する
6. 非クリティカルなJavaScriptを遅延させる
初期表示に必要のないJavaScriptは、asyncまたはdeferで非同期に読み込むべきです。これには、一般的にアナリティクス、チャットウィジェット、ソーシャルメディアの埋め込みが含まれます。
7. 重要なリソースを事前ロードする
初期表示に必要なフォント、CSS、画像には を使用します。これにより、ブラウザがこれらのファイルの優先順位を高めます。
8. レンダーブロッキングリソースを削除する
内のCSSとJavaScriptはページのレンダリングをブロックします。非クリティカルなCSSは下部に移動し、初期表示に必要なCSS（クリティカルCSS）はインライン化します。
9. CDNを使用する
コンテンツ配信ネットワークは、世界中のサーバーにファイルを分散します。ユーザーは最寄りのサーバーからダウンロードするため、レイテンシが大幅に削減されます。
10. ウェブフォントを最適化する
カスタムフォントはテキストの表示を遅らせる可能性があります：
font-display: swapを使用して、カスタムフォントが読み込まれるまでの間、フォールバックフォントでテキストを表示します- 使用する文字のみを含むようにフォントをサブセット化します
- 最も重要なフォントを事前ロードします
- ボディテキストにはシステムフォントを検討します
スピードをテストする方法
Google PageSpeed Insights
Googleの公式ツールです。シミュレーションされたラボデータと実際のユーザーデータを提供し、具体的な改善提案を提供します。
Chrome DevTools
DevToolsを開き（F12）、"Performance"パネルに移動し、ページの読み込みを記録します。何がどのくらいの時間がかかっているのか、ファイルがどの順に読み込まれているのかを正確に確認できます。
WebPageTest
異なる場所や接続速度からテストできる高度なテストツールです。詳細なウォーターフォール図を提供します。
優先順位 — ここから始める
焦点を絞るために選ぶべき3つのこと：
- 画像 — 圧縮してWebPに変換する。最も影響が大きく、労力が少ない。
- キャッシング — 正しいCache-Controlヘッダーを設定する。一度の設定で済みます。
- JavaScript — 非クリティカルなものはすべて遅延させる。サードパーティスクリプトを減少させる。
サイトのパフォーマンスを正確に知りたいですか？無料の監査を実行して、コアウェブバイタルとスピードスコアを確認してください。