Webサイトの表示速度を改善する方法｜原因や確認方法も解説
この記事の内容について相談する
専門スタッフが無料でお答えします。オンライン相談も可能です。
Webサイトの表示速度が遅いと、ユーザーがページを開く前に離脱したり、必要な情報へたどり着くまでにストレスを感じたりする原因になります。
特にスマートフォンでは、通信環境や端末性能の影響を受けやすいため、表示速度の遅さがより目立つことがあります。
表示速度が遅くなる主な原因は、容量の大きい画像や動画、JavaScriptやCSSの肥大化、サーバーの応答速度などです。
改善する際は、やみくもに設定を変更するのではなく、まず現在の表示速度を確認し、どこに負荷がかかっているのかを特定することが重要です。
画像を軽くするだけで大きく改善するケースもあれば、サーバー側の見直しが必要なケースもあります。
原因によって有効な対策は異なります。
表示速度を改善する基本的な方法と、PageSpeed Insightsを使った確認方法、Core Web Vitalsで見るべき指標を整理していきましょう。
ホームページ制作に関するお悩みはお気軽にご相談ください。
Webサイトの表示速度が遅くなる原因
Webサイトの表示速度が遅くなる原因は一つとは限りません。
画像や動画などのファイル容量が大きい場合もあれば、JavaScriptやCSSの処理に時間がかかっていることもあります。
また、Webページ自体が軽くても、サーバーからデータが返ってくるまでに時間がかかれば、ユーザーには「表示が遅いサイト」と感じられます。
まずは代表的な原因を把握することが重要です。
画像や動画の容量が大きい
Webページの中でも、画像や動画はデータ容量が大きくなりやすい要素です。
高解像度の画像をそのままアップロードすると、見た目には必要以上に大きなデータをユーザーへ読み込ませることになります。
たとえば、Webページでは横幅1,000px程度で表示する画像に、4,000px以上の元画像をそのまま使用しているケースがあります。
表示上は縮小されていても、読み込むファイル自体が大きければ通信量は増えます。
その結果、ページの表示に時間がかかります。
画像枚数が多いページでは、1枚ごとの容量が小さくても合計すると大きな負荷になることがあります。
商品一覧や実績紹介、ギャラリーなどは特に注意が必要です。
動画も同様です。
動画ファイルをページ内で直接読み込む場合、ファイルサイズによっては初期表示へ大きな影響を与えることがあります。
特にファーストビューに大きな動画を配置しているサイトでは、ユーザーが最初に必要とする情報より先に重いデータを読み込んでしまう場合があります。
画像や動画はデザイン上重要ですが、画質だけを優先すると表示速度が悪化しやすくなります。
必要な品質を保ちながら、ファイル容量を抑えることが重要です。
JavaScriptやCSSが重い
JavaScriptやCSSも、表示速度が遅くなる原因になります。
CSSはWebページの色やレイアウト、文字サイズなどを指定するために使われます。
JavaScriptはメニューの開閉やスライダー、アニメーションなど、ページ上のさまざまな動きを実現するために利用されます。
これらのファイル自体が大きかったり、不要なコードが大量に残っていたりすると、読み込みや処理に時間がかかります。
特にJavaScriptは注意が必要です。
ブラウザが重い処理を実行している間、ユーザーの操作への反応が遅くなることがあります。
見た目ではページが表示されていても、ボタンを押してすぐ反応しない状態になる場合があります。
CMSやテーマ、プラグインを長期間利用しているサイトでは、使っていない機能のコードが残っていることもあります。
過去に設置したスライダーやアニメーションを削除しても、関連するJavaScriptやCSSが読み込まれ続けているケースです。
複数のライブラリが同じような機能を持っていることもあります。
必要なコードと不要なコードを整理せずに追加を繰り返すと、サイト全体が徐々に重くなります。
サーバーの応答速度が遅い
ユーザーがWebページへアクセスすると、ブラウザからサーバーへリクエストが送られます。
サーバーはそのリクエストを処理し、HTMLなどのデータを返します。
この最初の応答に時間がかかると、その後の画像やCSSを読み込む前から表示が遅れます。
サーバーの応答が遅くなる理由はいくつかあります。
たとえば、
- サーバー性能がサイト規模に合っていない
- アクセスが集中している
- データベース処理に時間がかかっている
- CMS側の処理が重い
などです。
共有サーバーでは、同じ環境を複数のユーザーで利用するため、状況によって性能の影響を受ける場合があります。
また、WordPressなど動的にページを生成するCMSでは、アクセスのたびにデータベースから情報を取得してページを作成することがあります。
処理が複雑になれば、サーバーからページが返されるまでの時間も長くなります。
画像をいくら圧縮しても、サーバー側の応答そのものが遅ければ改善には限界があります。
表示速度を確認する際は、Webページ側だけでなくサーバー側も含めて考えることが重要です。
Webサイトの表示速度を改善する方法
表示速度を改善するときは、原因に合わせて対策を選ぶ必要があります。
代表的な方法は、画像の最適化、JavaScriptやCSSの整理、サーバー環境の見直しです。
まず負荷の大きな部分から手を付けると、改善効果を確認しやすくなります。
| 改善対象 | 主な対策 |
| 画像・動画 | サイズ調整、圧縮、ファイル形式の見直し |
| JavaScript・CSS | 不要コードの削除、ファイル軽量化、処理の整理 |
| サーバー | 性能、処理時間、CMSやデータベースの確認 |
画像を最適化する
画像の最適化では、最初に実際の表示サイズを確認します。
Webページ上で小さく表示する画像に、必要以上の解像度は不要です。
表示幅に合わせて適切なサイズへ変更するだけでも、ファイル容量を大きく削減できる場合があります。
次に、画像を圧縮します。
画像圧縮では、見た目の品質をできるだけ維持しながらファイルサイズを小さくします。
写真の場合、圧縮率を少し調整するだけでも容量を減らせることがあります。
画像形式の見直しも有効です。
WebPやAVIFなど、従来のJPEGやPNGより小さいファイルサイズで同等程度の画質を維持しやすい形式があります。
ただし、すべての画像を無条件に変換すればよいわけではありません。
透明背景が必要か、写真なのかイラストなのかなど、用途に合わせて選びます。
また、画像をアップロードする運用ルールを決めておくことも重要です。
制作時に最適化しても、運用担当者が毎回大容量画像をアップロードすると再びサイトが重くなります。
「アップロード前に横幅を何pxまで縮小する」「一定容量を超える画像は圧縮する」など、基準を決めておくと改善状態を維持しやすくなります。
JavaScriptやCSSを最適化する
JavaScriptやCSSを改善するときは、まず不要なファイルやコードが読み込まれていないか確認します。
以前は使っていた機能でも、現在のサイトでは不要になっていることがあります。
その関連ファイルを削除できれば、読み込むデータ量と処理を減らせます。
コードを圧縮してファイルサイズを小さくする方法もあります。
改行や空白、コメントなど、ブラウザの処理に不要な情報を削除することでデータ量を減らします。
ただし、本番環境のファイルを直接編集すると管理しにくくなるため、開発環境やビルド処理を利用している場合は適切な方法で行う必要があります。
JavaScriptでは、読み込みタイミングも重要です。
ページを開いた瞬間に必要のない処理まで先に実行すると、最初の表示やユーザー操作が遅れる可能性があります。
必要な処理を整理し、優先度の低いものを後に実行できるようにすると改善につながります。
アニメーションにも注意しましょう。
視覚的な演出はデザイン上効果的ですが、複数の処理が同時に実行されると端末への負荷が増えることがあります。
特にスマートフォンでは、PCでは問題なく動く演出でも重く感じる場合があります。
表示速度を優先するページでは、演出の数そのものを見直すことも選択肢です。
サーバー環境を見直す
画像やコードを改善しても表示速度が十分に速くならない場合は、サーバー環境を確認します。
特にページが表示され始めるまでの待ち時間が長い場合は、サーバー側の処理が影響している可能性があります。
まず、現在使用しているサーバーがWebサイトの規模に合っているか確認します。
アクセス数が増えたにもかかわらず、開設当初と同じ小規模な環境を使い続けている場合、処理能力が不足していることがあります。
CMSを利用している場合は、データベース処理も確認します。
大量のデータが蓄積されていたり、複雑な処理を行うプラグインが多数動いていたりすると、ページ生成に時間がかかることがあります。
サーバーだけを高性能なものへ変更しても、サイト側の処理が非効率なままでは十分な効果が出ない場合があります。
そのため、
- サーバーの応答時間を確認する
- CMSやデータベースの処理状況を見る
- サーバー性能が不足しているか判断する
という順番で原因を切り分けることが重要です。
アクセス集中時だけ遅くなる場合は、通常時とピーク時の両方を確認しましょう。
日中は速いのにキャンペーン開始直後だけ遅い場合、サーバーが瞬間的なアクセス増加に対応できていない可能性があります。
表示速度改善では、普段の数字だけでなく実際の利用状況も考慮する必要があります。
Webサイトの表示速度が重要な理由
表示速度は単なる技術的な数値ではありません。
ユーザーがWebサイトを快適に利用できるかに直結する要素です。
ページが遅ければ、どれだけ内容が良くても読まれる前に離脱される可能性があります。
また、Googleもページ体験を評価する要素としてCore Web Vitalsなどを利用しています。
そのため、表示速度改善はユーザー体験とSEOの両面から考えることが重要です。
ユーザー体験や離脱率に影響する
ユーザーがWebページを開いたとき、数秒間何も表示されなければ「このサイトは遅い」と感じます。
そのまま待つユーザーもいますが、別のサイトへ移動する人もいます。
特に検索結果から訪れたユーザーは、ほかにも選択肢があります。
ページが表示される前に戻るボタンを押されれば、掲載している情報を読んでもらうことすらできません。
表示後の操作性も重要です。
ページが開いていても、ボタンを押した後に反応が遅かったり、スクロール中に動作が引っかかったりするとストレスにつながります。
ユーザーが感じる「速さ」は、最初の読み込み時間だけではありません。
- ページが表示されるまで
- 主要な内容が見えるまで
- 操作に反応するまで
- 表示中にレイアウトが安定するまで
といった一連の体験が関係します。
スマートフォンではさらに影響が大きくなります。
ユーザーが必ず高速なWi-Fi環境で閲覧しているとは限りません。
移動中のモバイル回線や、通信状況が不安定な場所でアクセスする場合もあります。
制作会社や社内担当者が高速回線のPCで確認したときに問題がなくても、実際のユーザー環境では遅いことがあります。
そのため、表示速度は実際の利用環境を想定して確認することが大切です。
SEOにも関係する
Googleは、ページ体験に関する要素としてCore Web Vitalsを利用しています。
ただし、「サイトが速ければ必ず検索順位が上がる」という単純な仕組みではありません。
検索順位では、検索意図との一致やコンテンツの有用性など、多くの要素が考慮されます。
そのうえで、表示速度や操作性などもユーザー体験の一部として評価されます。
そのため、SEO目的で表示速度を改善する場合でも、スコアだけを追いかけないことが重要です。
たとえば画像を極端に圧縮して商品写真が見づらくなれば、ユーザーにとっては使いにくくなります。
JavaScriptを削除しすぎて必要な機能が使えなくなっても意味がありません。
目指すべきなのは、数値上の最高点ではなく、必要なコンテンツや機能を維持しながら快適に利用できる状態です。
表示速度改善とコンテンツ品質は別々に考えるものではありません。
どちらもユーザーが目的を達成しやすいサイトを作るための要素です。
Webサイトの表示速度を確認する方法
表示速度を改善する前に、現在の状態を数値で把握しておくことが重要です。
「なんとなく遅い」と感じるだけでは、どこを改善すべきか判断しにくくなります。
また、施策を実施しても、改善前のデータがなければ効果を比較できません。
表示速度の確認には、PageSpeed Insightsなどの計測ツールを利用できます。
PageSpeed Insightsで測定する
PageSpeed Insightsは、Webページのパフォーマンスを確認できるツールです。
調べたいページのURLを入力すると、モバイルとデスクトップの状態を確認できます。
結果にはパフォーマンスに関する数値だけでなく、改善候補も表示されます。
たとえば、
- 画像が大きい
- JavaScriptの処理が重い
- サーバー応答に時間がかかっている
といった問題を確認する手掛かりになります。
ただし、表示されるスコアだけで良し悪しを判断しないことが重要です。
同じスコアでも、サイトによって問題となっている箇所は異なります。
また、ページの種類によって必要な機能も違います。
シンプルな記事ページと、多数の商品画像や検索機能を持つECサイトをまったく同じ条件で考えることはできません。
トップページだけでなく、実際にユーザーがよく閲覧するページも計測しましょう。
たとえば、
- 商品ページ
- サービスページ
- 問い合わせページ
- 記事ページ
などです。
ページによって使用している画像やJavaScriptが異なるため、一つのURLだけではサイト全体の問題を把握できない場合があります。
改善前後で数値を比較する
表示速度改善では、改善前の数値を記録しておくことが重要です。
そのうえで施策実施後に同じページを計測します。
たとえば画像を圧縮した場合、変更前と変更後でどの程度改善したかを比較します。
JavaScriptを整理した場合も同様です。
一度に多くの変更を行うと、どの施策が効果を出したのか分かりにくくなります。
可能であれば、影響の大きそうな対策から順番に実施し、その都度確認すると原因を把握しやすくなります。
計測条件にも注意しましょう。
表示速度はネットワークや端末、サーバーの状況などによって変動します。
一回だけの結果ではなく、複数回確認したり、時間を変えて確認したりする方法があります。
改善後に一度だけ良い数字が出たからといって、常に同じ速度で表示されるとは限りません。
また、トップページの表示速度だけを改善して終わらせないことも大切です。
ユーザーが検索から直接サービスページへ流入するサイトであれば、そのページの速度も重要です。
アクセス解析などを確認し、閲覧数の多いページや成果につながるページから優先的に改善すると効率的です。
表示速度改善ではCore Web Vitalsのどこを見る？
現在の表示速度改善では、単純に「ページが何秒で開いたか」だけではなく、ユーザーが実際にどのようにページを体験するかを見ることが重要です。
その代表的な指標がCore Web Vitalsです。
主に確認するのはLCP、INP、CLSの3つです。
| 指標 | 主に確認する内容 |
| LCP | 主要コンテンツが表示されるまでの速さ |
| INP | ユーザー操作に対する反応の速さ |
| CLS | 表示中のレイアウトの安定性 |
それぞれ見ている問題が異なるため、数値が悪い指標に合わせて改善内容を考える必要があります。
LCPで主要コンテンツの表示速度を確認する
LCPは、ページ内の主要なコンテンツが表示されるまでの速さを見る指標です。
トップページで大きなメインビジュアルを使用している場合、その画像がLCPの対象になることがあります。
LCPが悪い場合は、
- 大きな画像ファイル
- サーバーの応答
- CSSやJavaScriptの読み込み
などが影響している可能性があります。
たとえばファーストビューの画像が数MBある場合、画像最適化によって大きく改善することがあります。
一方、画像を軽くしても改善しない場合は、サーバー応答や読み込み順を確認する必要があります。
重要なのは、LCPの数字だけを見るのではなく「何がLCPの対象になっているか」を確認することです。
同じ数値でも原因が違えば対策も変わります。
INPで操作時の反応速度を確認する
INPは、ユーザーがクリックやタップなどの操作をしたとき、ページがどれだけ素早く反応できるかを見る指標です。
ページが表示されているのに、
「ボタンを押してもすぐ反応しない」
「メニューを開こうとしてもワンテンポ遅れる」
といった状態は、ユーザー体験を悪化させます。
INPが悪い場合は、JavaScriptの処理が重くなっていないか確認します。
複数の処理が同時に走ったり、長時間ブラウザを占有する処理があったりすると、ユーザー操作への反応が遅れます。
特に、
- メニュー
- 絞り込み
- フォーム
- モーダル
- カルーセル
など、ユーザーが頻繁に操作する機能は確認しておきましょう。
初期表示が速くても操作が重ければ、ユーザーにとって快適なサイトとはいえません。
そのため、現在の表示速度改善では読み込み速度と操作速度の両方を見ることが重要です。
CLSでレイアウトのズレを確認する
CLSは、ページの表示中にレイアウトがどれだけ動くかを見る指標です。
たとえば文章を読んでいる途中で画像が後から読み込まれ、本文が突然下へ移動することがあります。
押そうとしていたボタンがずれて、別の場所をタップしてしまうケースもあります。
こうしたズレは表示そのものが速くても、ユーザーにとって大きなストレスになります。
CLSが悪化しやすい例としては、
- 画像サイズが事前に指定されていない
- 広告枠が後から追加される
- Webフォント読み込み時に文字サイズが変化する
- 動的コンテンツが途中へ挿入される
などがあります。
画像を配置する際に表示領域をあらかじめ確保しておけば、読み込み後に周囲のレイアウトが大きく移動するのを防ぎやすくなります。
表示速度改善では、「早く表示する」ことだけに注目しがちです。
しかし、ユーザーがページを読み始めた後も安定して利用できることが重要です。
LCP、INP、CLSを確認することで、読み込み・操作・表示の安定性をそれぞれ把握できます。
まとめ｜表示速度改善は原因を特定して優先順位をつけよう
Webサイトの表示速度が遅い原因は、画像や動画、JavaScriptやCSS、サーバーなどさまざまです。
そのため、改善方法もサイトによって異なります。
まずPageSpeed Insightsなどを利用し、どこに負荷がかかっているのかを確認しましょう。
画像が原因であれば、表示サイズの調整や圧縮、ファイル形式の見直しを行います。
JavaScriptやCSSが重い場合は、不要なコードや処理を整理します。
ページが表示され始めるまでの時間が長い場合は、サーバーやCMS側の処理も確認する必要があります。
また、表示速度はユーザー体験だけでなくSEOにも関係する要素です。
ただし、スコアを高くすることだけが目的ではありません。
画像を劣化させたり、必要な機能を削除したりしてまで数値を追う必要はありません。
現在はCore Web VitalsとしてLCP、INP、CLSも確認できます。
主要コンテンツが素早く表示されるか。
操作したときにすぐ反応するか。
表示途中でレイアウトが大きく動かないか。
こうした実際の使いやすさまで含めて改善することが重要です。
表示速度改善は、一度対策して終わりではありません。
コンテンツや機能を追加すれば、再びページが重くなることがあります。
改善前後の数値を比較しながら定期的に状態を確認し、ユーザーが快適に利用できるWebサイトを維持していきましょう。
監修者コメント
Webへの投資は、金額の大小より「何をもって成功とするか」を決めているかで結果が変わります。発注前に目的と指標を一枚にまとめておくと、制作会社との認識のズレがほぼなくなります。
東 直樹 あずま なおき
Webコンサルタント
株式会社中小企業のチカラ Web戦略室
制作会社でディレクターを務めたのち、事業会社側のWeb責任者を経て現職。制作費の妥当性や制作会社の選び方など、発注する側…
関連キーワード
次に読む
