Webサイトの表示速度を改善する方法

サイトの表示速度、計測したことはありますか？

「ページの読み込みが3秒を超えると、53%のモバイルユーザーが離脱する」

Googleの調査で報告されたこの数字は、表示速度がビジネスに直結することを示しています。さらに、2021年からGoogleは Core Web Vitals をランキングシグナルに組み込んでおり、表示速度はSEOにも影響します。

しかし、「遅い」と感じていても、具体的にどの指標がどれだけ悪いのかを把握していなければ、改善のしようがありません。

この記事では、ページ速度チェッカーを使った計測方法と、スコアを改善するための具体的な対策を解説します。

Core Web Vitals とは — 3つの指標を理解する

Core Web Vitals は、Googleがページのユーザー体験を評価するための3つの指標です。

各指標が意味すること

LCP（最大コンテンツ描画）: ページのメインコンテンツが表示されるまでの時間です。ユーザーが「ページが読み込まれた」と感じるタイミングに直結します。大きな画像やヒーローバナーの読み込み時間が影響します。

CLS（レイアウトシフト）: ページ読み込み中にコンテンツが意図せずズレる現象の度合いです。広告やフォントの遅延読み込みで「読んでいた箇所が飛ぶ」体験を引き起こします。

INP（操作の応答性）: ボタンクリックやフォーム入力に対するページの応答速度です。重いJavaScript処理がメインスレッドをブロックすると悪化します。

ページ速度を計測する手順

まず現状を把握します。ページ速度チェッカーにURLを入力するだけで、Core Web Vitals を含むパフォーマンス指標を確認できます。

Step 1: URLを入力して計測する

チェックしたいページのURLを入力し、「チェック開始」をクリックします。Google PageSpeed Insights API を使って分析が行われます。

Step 2: モバイルのスコアを優先的に確認する

Googleはモバイルファーストインデックスを採用しているため、モバイルのスコアが重要です。デスクトップよりモバイルのスコアが低いのは正常ですが、目標はモバイルで50以上、できれば70以上です。

Step 3: 各指標の色で優先度を判断する

赤い指標がある場合は、そこから優先的に改善に取り組みましょう。

LCPを改善する — 最大コンテンツの描画を速くする

LCP はパフォーマンススコアに最も大きく影響する指標です。目標は 2.5秒以下。

画像の最適化

LCPの悪化原因で最も多いのが、最適化されていない画像です。

Before: JPEG（3MB）→ LCP 4.2秒

After: WebP（300KB）→ LCP 1.8秒

具体的な対策:

• フォーマット変換: JPEG/PNGをWebP形式に変換する。画像フォーマット変換でブラウザ上で変換可能
• リサイズ: 表示サイズより大きい画像は無駄。画像リサイズツールで適切なサイズに調整
• 遅延読み込み: ファーストビュー外の画像に loading="lazy" を設定

<!-- ファーストビュー内の画像（遅延読み込みしない） -->
<img src="hero.webp" width="1200" height="600" alt="..." />

<!-- ファーストビュー外の画像 -->
<img src="photo.webp" loading="lazy" width="800" height="400" alt="..." />

サーバー応答時間の短縮

サーバーが応答するまでの時間（TTFB: Time to First Byte）が遅いとLCPも悪化します。

ブラウザキャッシュの設定には.htaccessジェネレーターが便利です。GUIでキャッシュ期間を設定するだけで、正しい .htaccess コードが生成されます。

フォントの最適化

Webフォントの読み込みがLCPを遅延させることがあります。

• font-display: swap を設定して、フォント読み込み中もテキストを表示する
• 使用する文字だけをサブセット化して読み込む
• フォントファイルをプリロードする

<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin />

CLS を改善する — レイアウトのズレを防ぐ

CLS の目標は 0.1以下。ユーザーが「ページがガクガクする」と感じる原因を取り除きます。

画像と動画にサイズを明記する

要素のサイズが未指定だと、読み込み完了時にレイアウトが変わります。

<!-- NG: サイズ未指定 → CLSの原因 -->
<img src="photo.webp" alt="..." />

<!-- OK: width/height を明記 → ブラウザが事前に領域を確保 -->
<img src="photo.webp" width="800" height="400" alt="..." />

広告・埋め込みコンテンツの領域確保

外部の広告や埋め込みコンテンツは読み込みに時間がかかるため、事前に固定サイズの領域を確保しておきましょう。

.ad-container {
  min-height: 250px; /* 広告の高さを事前に確保 */
}

Webフォントによるズレの防止

Webフォントの読み込みでテキストの幅が変わると CLS が発生します。font-display: swap と size-adjust を組み合わせるのが効果的です。

INP を改善する — 操作への応答を速くする

INP の目標は 200ms以下。ユーザーの操作に対してページが素早く反応するようにします。

JavaScript の最適化

<!-- レンダリングをブロックしない -->
<script src="analytics.js" defer></script>

イベントハンドラの軽量化

クリックやスクロールのイベントハンドラ内で重い処理を行うと、INPが悪化します。requestAnimationFrame やデバウンスを活用して、メインスレッドの負荷を軽減しましょう。

改善の優先順位

すべてを一度に改善するのは難しいため、効果の大きい順に取り組みましょう。

まずは画像の最適化から。工数が低く、LCPへの効果が大きいため、最もコストパフォーマンスの高い改善策です。

改善前後を比較する

改善を行ったら、再度 ページ速度チェッカーで計測して効果を確認します。

注意点

• 計測結果は毎回変動する: サーバー状況により数ポイントの誤差があるため、複数回計測して平均値で判断する
• 24時間キャッシュ: ページ速度チェッカーは同一URLの結果を24時間キャッシュするため、改善直後は Google PageSpeed Insights で直接確認するのも有効
• モバイルが重要: デスクトップのスコアが高くてもモバイルが低いと、SEO効果は限定的

まとめ

Webサイトの表示速度を改善する流れ:

1. 計測: ページ速度チェッカーでCore Web Vitalsを確認
2. 画像最適化: 画像フォーマット変換でWebPに変換、画像リサイズツールで適切なサイズに調整
3. キャッシュ設定: .htaccessジェネレーターでブラウザキャッシュを設定
4. 再計測: 改善後のスコアを確認して効果を検証

表示速度の改善はSEO、ユーザー体験、コンバージョン率のすべてに効果があります。まずは自サイトのスコアを計測するところから始めてみてください。

あわせて読みたい

• Web制作者のためのSEO設定ツール完全ガイド — 表示速度を含むSEO設定10項目を網羅
• .htaccessリダイレクト設定の完全ガイド — リダイレクトとキャッシュ設定でさらに高速化
• GIFアニメをWebMに変換してサイト表示速度を改善する方法 — 動画フォーマットの最適化でさらに高速化
• SNS別の最適な画像サイズ一覧と変更方法 — 画像サイズの最適化ガイド