IndexReady
seoパフォーマンスPageSpeed

ページ速度改善の実践ガイド｜表示速度を劇的に上げる方法

なぜページ速度がSEOに影響するのか

Googleは2021年からCore Web Vitalsをランキング要因に組み込んでいます。ページの表示速度はユーザー体験に直結するため、検索順位にも影響を与えるのです。

表示が遅いサイトの問題は検索順位だけではありません。

  • 直帰率の増加: 表示に3秒以上かかると、53%のモバイルユーザーがページを離脱するというGoogleの調査結果があります
  • コンバージョン率の低下: Amazon は表示速度が100ミリ秒遅くなるごとに売上が1%減少すると報告しています
  • クロール効率の低下: 応答が遅いサイトはGoogleのクロールバジェットを浪費します

Core Web Vitalsを理解する

ページ速度の指標としてGoogleが重視しているのがCore Web Vitals（CWV）です。

指標意味良好要改善
LCP (Largest Contentful Paint)最大コンテンツの表示時間2.5秒以下4秒超
INP (Interaction to Next Paint)インタラクション応答速度200ms以下500ms超
CLS (Cumulative Layout Shift)レイアウトのずれ量0.1以下0.25超

これらの指標は、PageSpeed Insightsで簡単に確認できます。

画像の最適化

ページの読み込み時間のうち、画像が占める割合は平均して50%以上です。画像の最適化は最も効果が大きい改善策のひとつです。

次世代フォーマットを使う

WebPやAVIFは、JPEGやPNGに比べて30〜50%ファイルサイズを削減できます。

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="ヒーロー画像" width="1200" height="630" />
</picture>

適切なサイズで配信する

表示サイズが400pxの場所に2000px幅の画像を配信するのは無駄です。srcset属性を使って、デバイスに応じた適切なサイズの画像を配信しましょう。

<img
  src="/images/article.jpg"
  srcset="/images/article-400.jpg 400w,
          /images/article-800.jpg 800w,
          /images/article-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="記事のサムネイル"
  width="1200"
  height="630"
/>

遅延読み込み（Lazy Loading）

ファーストビューに表示されない画像は、スクロールして近づいたタイミングで読み込むようにします。

<!-- ファーストビューの画像: 遅延読み込みしない -->
<img src="/images/hero.jpg" alt="メインビジュアル" fetchpriority="high" />

<!-- ファーストビュー外の画像: 遅延読み込みする -->
<img src="/images/content.jpg" alt="本文の画像" loading="lazy" />

JavaScript・CSSの最適化

不要なJavaScriptを削減する

使っていないJavaScriptはページの読み込みを遅くします。Chrome DevToolsの「Coverage」タブで、未使用コードの割合を確認できます。

対策としては以下があります。

  • ツリーシェイキング: バンドラー（webpack、Rollup）が未使用のコードを自動削除します
  • コード分割: ページごとに必要なJSだけを読み込むようにします
  • サードパーティスクリプトの見直し: アナリティクス、広告、チャットウィジェットなど、本当に必要なものだけに絞ります

CSSの最適化

<!-- クリティカルCSSをインライン化 -->
<style>
  /* ファーストビューに必要な最小限のCSS */
  body { margin: 0; font-family: sans-serif; }
  .hero { min-height: 100vh; }
</style>

<!-- 残りのCSSは非同期で読み込む -->
<link rel="preload" href="/styles/main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'" />

JavaScriptの遅延実行

レンダリングをブロックしないスクリプトは defer または async 属性を使って遅延実行します。

<!-- defer: HTMLパース後に順序通り実行 -->
<script src="/js/analytics.js" defer></script>

<!-- async: ダウンロード完了次第実行（順序不定） -->
<script src="/js/widget.js" async></script>

サーバーサイドの最適化

CDN（Content Delivery Network）を活用する

CDNを使うと、ユーザーに最も近いサーバーからコンテンツを配信できます。日本のユーザーに対して米国のサーバーから配信すると100ms以上のレイテンシが生じますが、CDNを使えば大幅に短縮されます。

主要なCDNサービスとしては、Cloudflare、Fastly、AWS CloudFrontなどがあります。

ブラウザキャッシュを適切に設定する

静的アセット（画像、CSS、JS）には長めのキャッシュ期間を設定します。

# Nginx の設定例
location ~* \.(jpg|jpeg|png|webp|avif|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

ファイル名にハッシュを含めれば（例: main.a1b2c3.js）、内容が変わったときに自動的にキャッシュが更新されます。

HTTP/2 を有効にする

HTTP/2は1つの接続で複数のリクエストを並列処理できるため、ページの読み込みが高速になります。ほとんどのモダンなWebサーバーとCDNはHTTP/2に対応しています。

# Nginx でHTTP/2を有効化
server {
    listen 443 ssl http2;
    # ...
}

Gzip / Brotli 圧縮

テキストベースのアセット（HTML、CSS、JS）を圧縮して配信すると、転送サイズを60〜80%削減できます。BrotliはGzipよりも圧縮率が高く、現在の主要ブラウザはすべて対応しています。

クリティカルレンダリングパスの最適化

ブラウザがページを表示するまでの流れ（クリティカルレンダリングパス）を理解することで、的確な最適化ができます。

  1. HTML のダウンロードとパース
  2. CSS のダウンロードとパース（レンダリングブロック）
  3. レンダーツリーの構築
  4. レイアウトの計算
  5. ペイント

このうち、CSS は本質的にレンダリングブロックリソースです。クリティカルCSS（ファーストビューに必要なCSS）をインライン化し、残りを非同期で読み込むことで、初期表示を高速化できます。

計測ツールの活用

改善は計測から始まります。以下のツールを定期的に活用しましょう。

  • PageSpeed Insights: Core Web Vitalsの計測とLabデータの確認
  • Chrome DevTools: Network / Performance / Lighthouseタブ
  • WebPageTest: 詳細なウォーターフォール分析
  • IndexReady: IndexReadyでPageSpeedスコアとCWVを含むSEO診断が可能です

よくある質問（FAQ）

PageSpeedスコアは何点を目指すべきですか？

モバイルで90点以上を目指しましょう。ただし、スコアはあくまで目安です。実際のユーザー体験（フィールドデータ）と検索順位への影響は、ラボデータのスコアとは異なる場合があります。

画像をWebPに変換するだけで速くなりますか？

WebPへの変換はファイルサイズの削減に効果的ですが、それだけでは不十分です。適切なサイズでの配信、遅延読み込み、CDNの活用なども組み合わせることで、最大限の効果が得られます。

WordPressサイトの速度改善で最も効果的な方法は？

まずは不要なプラグインの削除、次に画像の最適化、そしてキャッシュプラグイン（WP Super Cache、W3 Total Cache等）の導入が効果的です。テーマの軽量化やCDNの導入も検討しましょう。

サーバーレスポンスタイム（TTFB）が遅い場合はどうすればいいですか？

TTFB（Time to First Byte）が遅い場合は、サーバー側の問題である可能性が高いです。サーバーのスペック増強、データベースクエリの最適化、サーバーサイドキャッシュの導入、CDNの活用などを検討してください。