ホームページの表示速度を改善する方法｜Core Web Vitalsと画像最適化の基本
2026/08/03
ホームページ制作の基本ホームページの表示速度が重要な理由
ホームページを開いたとき、なかなか画面が表示されなかったり、ボタンを押しても反応しなかったりすると、ユーザーはストレスを感じます。
特にスマートフォンでは、通信環境や端末の性能によって表示速度が左右されるため、パソコンでは問題なくても、スマートフォンでは遅く感じられることがあります。
表示速度が遅い状態を放置すると、次のような問題につながります。
- ページが表示される前に離脱される
- サービス内容や強みを読んでもらえない
- お問い合わせや予約まで進んでもらえない
- 企業や店舗に対する信頼感が下がる
- 検索結果で競合サイトに負けやすくなる
表示速度は、単なる技術的な問題ではありません。
ホームページを通じて成果を上げるための、ユーザー体験と導線設計の一部として考える必要があります。
Googleも、Core Web Vitalsを検索ランキングで考慮する要素の一つとしています。ただし、表示速度の点数が良ければ必ず上位表示されるわけではなく、コンテンツの関連性や有用性を含めた総合的なページ体験が重要です。
Core Web Vitalsとは？確認すべき3つの指標
Core Web Vitals（コアウェブバイタル）とは、実際のユーザーがページを利用したときの体験を、主に次の3つの視点から測定する指標です。
- 読み込みの速さ
- 操作に対する反応の速さ
- 表示の安定性
2026年7月時点では、LCP・INP・CLSの3つが主要な指標として使用されています。
LCP｜主要コンテンツが表示されるまでの速さ
LCP（Largest Contentful Paint）は、画面内の主要な画像やテキストが表示されるまでの時間を測る指標です。
Googleが示す良好な目安は、2.5秒以内です。
LCPが遅くなる主な原因には、次のようなものがあります。
- ファーストビューの画像容量が大きい
- サーバーからの応答が遅い
- 表示前に大量のJavaScriptを読み込んでいる
- 画像の読み込み開始が遅れている
ホームページを開いても、メイン画像や見出しがなかなか表示されない場合は、LCPに問題がある可能性があります。
INP｜操作に対する反応の速さ
INP（Interaction to Next Paint）は、ボタンのクリックやメニュー操作などに対して、ページがどれだけ素早く反応するかを測る指標です。
良好な目安は、200ミリ秒未満です。
INPが悪化しやすいケースとしては、次が挙げられます。
- JavaScriptの処理が多い
- 外部の計測タグや広告タグが多い
- 複雑なアニメーションを使用している
- 問い合わせフォームの処理が重い
見た目は表示されていても、メニューやボタンの反応が遅い場合は、INPの改善が必要です。
CLS｜表示中のレイアウトの安定性
CLS（Cumulative Layout Shift）は、ページの読み込み中に、画像やボタン、文章などの位置が突然ずれる現象を測る指標です。
良好な目安は、0.1未満です。
たとえば、ボタンを押そうとした瞬間に広告や画像が表示され、違う場所を押してしまう状態は、CLSが悪い典型例です。
画像や動画の表示領域が事前に確保されていないことや、後から読み込まれるコンテンツ、Webフォントなどが主な原因になります。
まずは現状を測定する｜表示速度の確認方法
表示速度を改善するときは、感覚だけで判断せず、まず現在の状態を測定しましょう。
代表的な確認方法は、次の3つです。
PageSpeed Insights
URLを入力すると、スマートフォンとパソコンの表示状況を確認できます。
主に次の情報が表示されます。
- Core Web Vitalsの評価
- 実際のユーザーによる利用データ
- テスト環境で測定したパフォーマンス
- 改善できる項目
- 容量の大きい画像や不要なコード
実際のユーザーデータが表示される場合は、テスト時の点数だけでなく、実際のユーザーがどのような体験をしているかを優先して確認することが重要です。
Search ConsoleのCore Web Vitalsレポート
Search Consoleでは、サイト内のページをグループ単位で確認できます。
特定の1ページだけでなく、サイト全体に共通する問題を見つけたい場合に向いています。Search Consoleのレポートは、実際の利用状況に基づくデータを使用しています。
Lighthouse
Lighthouseは、表示速度だけでなく、アクセシビリティやSEOなども確認できる診断ツールです。
PageSpeed InsightsやChromeの開発者ツールから実行でき、具体的な問題を調査する際に役立ちます。
ホームページの表示が遅くなる主な原因
表示速度が遅くなる原因は、一つとは限りません。
よくある原因は次のとおりです。
- 画像の容量が大きい
- 動画をそのまま読み込んでいる
- JavaScriptやCSSが多い
- 外部サービスの読み込みが多い
- サーバーの応答が遅い
- WordPressのプラグインが多い
- キャッシュが正しく設定されていない
- Webフォントを多く使用している
- 広告やSNSの埋め込みが多い
- 古いテーマやコードを使用している
まずはPageSpeed Insightsなどで問題を確認し、影響の大きい項目から改善することが大切です。
表示速度を改善する7つの方法
画像を圧縮・最適化する
企業サイトで表示速度を遅くしている原因として、特に多いのが画像です。
デジタルカメラやスマートフォンで撮影した写真を、そのまま掲載すると、1枚で数MBになることがあります。
次の方法で画像を最適化しましょう。
- 掲載場所に合ったサイズへ縮小する
- JPEG・PNGを適切に使い分ける
- WebPやAVIFなどの軽量な形式を検討する
- 画質を保てる範囲で圧縮する
- 画面外の画像は遅延読み込みを利用する
ただし、ファーストビューの主要画像まで遅延読み込みにすると、LCPが悪化する可能性があります。
最初に表示する重要な画像は早く読み込み、それ以外の画像を遅らせるという使い分けが必要です。
不要なJavaScriptやCSSを減らす
JavaScriptやCSSが多すぎると、ブラウザが画面を表示するまでの処理が増えます。
特に注意したいのが、次のような外部ツールです。
- アクセス解析タグ
- 広告計測タグ
- SNS埋め込み
- チャットツール
- ヒートマップ
- アニメーション用ライブラリ
すべて必要かを見直し、使っていないタグや機能は削除しましょう。
ファイルの圧縮や読み込み順序の変更も有効ですが、専門的な作業になるため、制作会社やエンジニアに確認するのが安全です。
サーバーとキャッシュ設定を見直す
画像を軽くしても改善しない場合は、サーバー側に原因がある可能性があります。
確認したいポイントは次のとおりです。
- サーバーの処理性能
- PHPなどの実行環境
- ページキャッシュの有無
- ブラウザキャッシュの設定
- CDNの利用
- データベースの状態
LCPを改善するには、画像だけでなく、HTMLの最初のデータが届くまでの時間や、主要コンテンツの読み込み開始時期など、ページ全体の読み込み工程を確認する必要があります。
アクセス数やサイト規模に対してサーバー性能が不足している場合は、プラン変更やサーバー移転も選択肢になります。
ファーストビューの読み込みを優先する
ファーストビューとは、ページを開いたときに最初に表示される範囲です。
ここに大きな画像、動画、複雑なアニメーションを多く配置すると、ユーザーが内容を確認できるまでに時間がかかります。
改善方法としては、次が挙げられます。
- メイン画像の容量を小さくする
- 背景動画の自動再生を見直す
- 最初に必要なCSSを優先して読み込む
- ファーストビューに不要な外部ツールを置かない
- メイン画像を早い段階で読み込ませる
見た目の華やかさだけでなく、ユーザーがすぐに内容を理解できるかを基準に設計しましょう。
Webフォントを使いすぎない
Webフォントは、デザインの統一感を出すうえで便利です。
一方で、種類や文字の太さを多く読み込むと、表示速度に影響します。
次のような見直しが有効です。
- 使用するフォントを絞る
- 使用する文字の太さを減らす
- 不要な言語のフォントデータを読み込まない
- システムフォントの使用を検討する
- フォントの読み込み中も文字を表示できる設定にする
デザイン性と表示速度のバランスを考えることが大切です。
画像や広告によるレイアウトのずれを防ぐ
画像や動画、地図、広告などの表示領域が決まっていないと、読み込み後にコンテンツが押し下げられます。
CLSを改善するためには、次の対策が有効です。
- 画像に幅と高さを設定する
- 動画や地図の表示領域を先に確保する
- 後から表示するバナー用のスペースを用意する
- ページ上部へ突然コンテンツを追加しない
- Webフォントによる文字幅の変化を抑える
ユーザーが操作しようとしているボタンやリンクを動かさないことが重要です。
WordPressのプラグインを整理する
WordPressでは、プラグインを追加するだけでさまざまな機能を利用できます。
しかし、プラグインが増えすぎると、次の問題が起こりやすくなります。
- 不要なファイルが読み込まれる
- データベース処理が増える
- プラグイン同士が競合する
- 管理画面やページ表示が遅くなる
- セキュリティ管理が複雑になる
使用していないプラグインは停止するだけでなく、必要に応じて削除しましょう。
ただし、削除によってフォームや表示が動かなくなることもあるため、バックアップを取ってから作業することが重要です。
症状別｜優先して改善すべきポイント
ページ全体の表示開始が遅い
確認する項目
- サーバーの応答速度
- キャッシュ設定
- リダイレクトの回数
- WordPressやデータベースの処理
メイン画像の表示が遅い
確認する項目
- 画像容量
- 画像形式
- 読み込みの優先順位
- ファーストビュー画像への遅延読み込み
ボタンやメニューの反応が遅い
確認する項目
- JavaScriptの処理
- 外部タグの数
- アニメーション
- フォームや検索機能の処理
読み込み中に画面が大きくずれる
確認する項目
- 画像の幅・高さ
- 動画や地図の表示領域
- 後から表示されるバナー
- Webフォント
原因によって対応方法が異なるため、PageSpeed Insightsの点数だけで判断せず、どの指標に問題があるかを確認しましょう。
表示速度改善でよくある失敗と注意点
失敗1：PageSpeed Insightsで100点を取ることが目的になる
点数を上げること自体が目的ではありません。
Googleも、Core Web Vitalsの良好な結果だけで検索上位が保証されるわけではなく、SEOのためだけに満点を目指すことは必ずしも有効ではないと説明しています。
重要なのは、ユーザーが快適にページを利用できることです。
失敗2：必要な画像や機能まで削除してしまう
画像や動画、フォーム、チャットなどは、ビジネス上必要な場合があります。
単純に削除するのではなく、次の視点で判断しましょう。
- 問い合わせに貢献しているか
- 信頼感を高めているか
- ユーザーの理解を助けているか
- 軽量化や読み込み方法の変更で残せないか
失敗3：トップページだけを確認する
ユーザーが最初に訪れるのは、トップページとは限りません。
検索からブログ記事、サービスページ、事例ページへ直接アクセスすることもあります。
次のページは個別に確認しましょう。
- トップページ
- 主要サービスページ
- アクセス数の多い記事
- お問い合わせフォーム
- 採用ページ
- 広告やSNSのリンク先
失敗4：一度改善して終わる
画像やプラグイン、外部タグは運用中に増えていきます。
公開時は速くても、数年後には遅くなっていることがあります。
月次や四半期ごとなど、定期的に確認する仕組みを作りましょう。
表示速度の改善チェックリスト
- スマートフォンとパソコンの両方で測定したか
- 実際のユーザーデータを確認したか
- LCP・INP・CLSのどこに問題があるか把握したか
- ファーストビュー画像を圧縮したか
- 画像の表示サイズに合ったデータを使用しているか
- 不要なJavaScriptや外部タグを整理したか
- キャッシュ設定を確認したか
- WordPressの不要なプラグインを整理したか
- 画像や動画の表示領域を事前に確保したか
- 主要ページを個別に確認したか
- 改善後にフォームや表示の動作確認をしたか
- 定期的に測定する担当者と頻度を決めたか
すべてを一度に改善する必要はありません。
まずは、容量の大きい画像・不要な外部タグ・サーバーの応答速度など、影響の大きい部分から着手しましょう。
まとめ：点数ではなくユーザー体験を改善する
ホームページの表示速度は、SEOのためだけに改善するものではありません。
ユーザーがストレスなく情報を確認し、問い合わせや予約、応募へ進める状態を作ることが本来の目的です。
表示速度を改善するときは、次の順番で進めましょう。
- PageSpeed InsightsやSearch Consoleで現状を確認する
- LCP・INP・CLSのどこに問題があるか把握する
- 画像・コード・サーバーを影響の大きい順に見直す
- 改善後に表示とフォームの動作を確認する
- 定期的に測定して、遅くなる前に対処する
点数だけを追うのではなく、ホームページの目的や必要な機能を維持しながら、ユーザーにとって快適な状態を目指すことが重要です。
無料相談
Refuでは、PageSpeed InsightsやSearch Consoleを活用した現状分析から、画像最適化・サーバー環境・WordPressの構成まで確認し、優先順位を付けた表示速度改善をご提案しています。
「ホームページの表示が遅い」「改善項目が多く、どこから手を付ければよいか分からない」という方も、お気軽にご相談ください。
その他おすすめ記事はこちら
ドメイン・サーバーの選び方｜初心者でも失敗しない基礎知識と注意点
ホームページ公開後にやるべき初期設定10選｜最低限の運用準備チェック
ホームページのKPI設計｜アクセス・CV・問い合わせを“数字で改善”する方法
