Webサイトの表示速度改善ガイド｜Core Web Vitals対策とページ速度最適化の実践

Webサイトの表示速度はなぜ重要か

Webサイトの表示速度は、SEO（検索順位）とコンバージョン率（CVR）の両方に直接的な影響を与えます。

Googleは2021年以降、「Core Web Vitals」をランキング要素として正式に採用しており、表示速度が遅いサイトは検索順位で不利になります。また、Googleの調査によるとページ読み込み時間が1秒から3秒に増加するとモバイルでの直帰率が32%上昇するとされており、表示速度の改善は集客・コンバージョン両面で重要な投資です。

Core Web Vitalsとは

Core Web Vitals（コアウェブバイタル）は、Googleが定めるユーザー体験の質を測る3つの指標です。

LCP（Largest Contentful Paint）｜最大コンテンツ描画時間

ページの読み込み開始から、最もサイズが大きいコンテンツ（画像・見出しテキスト等）が表示されるまでの時間です。ユーザーが「ページが読み込まれた」と感じるタイミングに相当します。

• 良好：2.5秒以下
• 要改善：2.5〜4.0秒
• 不良：4.0秒超

INP（Interaction to Next Paint）｜操作から次の描画まで

2024年3月にFID（First Input Delay）に代わって採用された指標です。ユーザーがボタンをクリックしたり入力したりしたときに、ブラウザが応答するまでの時間を測ります。

• 良好：200ミリ秒以下
• 要改善：200〜500ミリ秒
• 不良：500ミリ秒超

CLS（Cumulative Layout Shift）｜累積レイアウト変更

ページ読み込み中にコンテンツが予期せずにずれる現象（レイアウトシフト）の合計量です。広告や遅延読み込み画像がレイアウトを押し下げる現象がCLSの主要因です。

• 良好：0.1以下
• 要改善：0.1〜0.25
• 不良：0.25超

現状の速度を測定する｜PageSpeed Insights の使い方

PageSpeed Insights での測定手順

1. Google PageSpeed Insights（pagespeed.web.dev）にアクセス
2. 測定したいURLを入力し「分析」をクリック
3. 「モバイル」と「パソコン」それぞれのスコアを確認
4. Core Web Vitalsの各指標と、「診断」セクションの改善提案を確認

重要：スコアはモバイルを優先確認してください。Googleはモバイルファーストインデックスを採用しており、モバイルの評価がSEOに直結します。

スコアの読み方

表示速度改善の具体的な手法

1. 画像の最適化（インパクト：大）

Webサイトの読み込み時間のうち、画像が占める割合は最大60〜70%に達することがあります。画像最適化は最も費用対効果の高い改善手法の一つです。

画像フォーマットの変換

従来のJPEG・PNGより、次世代フォーマット（WebP・AVIF）に変換することで、同じ品質で30〜50%のファイルサイズ削減が可能です。

• WebP：Chrome・Firefox・Safari全対応。JPEGと比べて25〜34%小さい
• AVIF：さらに圧縮率が高いが、処理負荷がやや高い

画像サイズの最適化

表示する最大サイズに合わせた画像を用意し、必要以上に大きな画像を読み込まないようにします。モバイルでは640px幅、PCでは1,200〜1,920px幅が目安です。

遅延読み込み（Lazy Loading）

画面に表示されていない画像は読み込みを遅らせ、スクロールして表示されるタイミングで読み込む設定です。``の属性一つで実装でき、初期読み込み速度が大幅に改善します。

2. ブラウザキャッシュの設定（インパクト：中〜大）

CSS・JavaScript・画像などの静的ファイルをブラウザにキャッシュすることで、再訪問時の読み込み速度を大幅に改善できます。サーバー設定（.htaccessまたはnginx.conf）でCache-Controlヘッダーを設定します。

• 画像・フォント：1年間キャッシュ（変更頻度低）
• CSS・JavaScript：1ヶ月〜1年（バージョニングと組み合わせ）
• HTMLファイル：短時間または無キャッシュ（更新反映のため）

3. CDN（コンテンツデリバリーネットワーク）の導入（インパクト：中〜大）

CDNは世界各地のサーバーにコンテンツのコピーを配置し、ユーザーに最も近いサーバーから配信することで、物理的な距離による遅延を解消します。

• Cloudflare（無料プランあり）：DNS設定を変更するだけで利用開始可能。静的ファイルのキャッシュ配信に加え、DDoS対策機能も提供
• CloudFront（AWS）：AWSを既に使っている場合にシームレスに導入可能

国内向けサイトのみでも、CDNによるHTTP/2対応・圧縮転送の恩恵でページ速度が改善します。

4. CSSとJavaScriptの最適化（インパクト：中）

不要なCSS・JavaScriptの削除

使用していないCSSルールや古いJavaScriptライブラリが残っていると、無駄な読み込み時間が発生します。PageSpeed Insightsの「使用していないJavaScript / CSS」の項目で確認できます。

ミニファイ（圧縮）

CSS・JavaScriptファイルのスペース・改行・コメントを削除して容量を削減します。WebpackやViteなどのビルドツールを使えば自動化できます。

レンダーブロッキングの解消

``内のCSS・JavaScriptは、読み込みが完了するまでページのレンダリングを止めます（レンダーブロッキング）。重要でないJavaScriptには`defer`属性を追加し、非同期読み込みにすることで改善できます。

5. サーバーレスポンス時間の改善（インパクト：大）

サーバーのリソース確認

共有サーバー（レンタルサーバー）の低スペックプランを使用している場合、サーバー処理時間（TTFB：Time to First Byte）が長くなりがちです。VPS・クラウドサーバーへの移行を検討してください。

データベースのクエリ最適化（CMSサイトの場合）

WordPressなどのCMSサイトでは、プラグインの増加や最適化されていないクエリによってサーバー処理が遅くなります。不要なプラグインの削除、クエリキャッシュの導入が効果的です。

6. フォントの最適化（インパクト：小〜中）

Google Fontsなど外部フォントの読み込みは、LCPに影響することがあります。

• フォントファイルをサーバーにホストしてCDN経由で配信
• `font-display: swap`でフォント読み込み中もテキストを表示
• 使用するフォントウェイト（Bold・Regularなど）を最小限に絞る

CLS（レイアウトシフト）を防ぐ実装ポイント

画像・動画に縦横比を指定する

CSSで画像のwidthとheight属性を指定するか、`aspect-ratio`プロパティを設定することで、読み込み前からスペースが確保され、レイアウトシフトを防げます。

広告・埋め込みウィジェットにサイズを確保

広告や外部サービスの埋め込み（SNSウィジェット等）は、読み込み前にスペースを確保しておくことでCLSを防げます。

中小企業向け改善ロードマップ

改善施策を「難易度」と「インパクト」で整理し、優先順位をつけて取り組みましょう。

まず1・2位の施策から取り組むと、最小のコストで大きな改善効果が得られます。PageSpeed Insightsのスコアが50未満の場合は、早急に取り組むことをお勧めします。

Webサイトのリニューアルを検討中の場合は、速度改善も含めた計画が重要です。Webサイトリニューアルの進め方もあわせてご覧ください。また、LP最適化との組み合わせについてはLP A/Bテスト実践ガイドを参考にしてください。

まとめ｜表示速度改善でSEOとCVRを同時に向上

Webサイトの表示速度改善は、SEO順位向上とコンバージョン率アップの両方を実現できる費用対効果の高い施策です。

• Core Web Vitals（LCP・INP・CLS）はGoogleのランキング要素
• まずPageSpeed InsightsでモバイルCVR・スコアを確認
• 画像最適化（WebP・Lazy Loading）とCDN導入が最優先
• サーバー移行は根本的な解決策として有効
• 改善後は継続的にモニタリングする習慣を

Webサイトの表示速度改善からホームページ制作の全体的な設計まで、FUNBREWにお気軽にご相談ください。パフォーマンスを考慮したWeb制作・システム開発を提供しています。