Webサイトの表示速度を改善するには？原因の調べ方と具体的な対策
にリースはお応えします！
「Webサイトの表示が遅い」「PageSpeed Insightsで改善項目がたくさん出たけれど、何から手を付ければいいかわからない」。そんなお悩みはありませんか？
Webサイトが遅くなる原因は、画像の容量、JavaScriptの処理、サーバーの設定などさまざまです。表示速度を改善するには、ツールに出てきた項目を片っ端から修正するのではなく、自社サイトでは何が速度に影響しているのかを見極めることが大切です。
この記事では、Webサイトが遅くなる主な原因と具体的な改善方法、取り組む際の優先順位を紹介します。「自社で対応できる範囲」と「専門家に相談したほうがよい範囲」を整理する際にもお役立てください。
目 次
Webサイトの表示速度を改善するメリット
Webサイトを訪れた人は、必要な情報を探しながらページを移動します。ページがなかなか表示されなかったり、ボタンを押しても反応しなかったりすると、内容を見る前に離れてしまう可能性があります。
特にスマートフォンでは、利用する場所や通信環境によって表示の遅さを感じやすくなります。トップページだけでなく、検索結果から直接訪問されるブログ記事やサービスページも、快適に閲覧できる状態にしておくことが大切です。
表示速度は検索対策とも関係します。ただし、「速くすれば必ず検索順位が上がる」というものではありません。訪問者がストレスなく情報を読み、問い合わせなどの次の行動へ進めるサイトにすることを、改善の目的にしましょう。
→【関連ブログ】Google、Speed Updteをついに導入開始！ページの読み込み速度も順位の要因
まずは「どこが遅いのか」を調べる
Webサイトを高速化する最初の一歩は、現状を測定することです。「なんとなく遅い」という感覚だけでは、優先して直すべき箇所を決めにくいためです。
PageSpeed Insightsでページごとの課題を見る
Googleの「PageSpeed Insights」では、URLを入力して、スマートフォンとパソコンそれぞれの測定結果を確認できます。表示される改善項目は、画像のデータ量や読み込みを妨げているファイルなど、原因を探す手がかりになります。
ただし、点数だけで判断する必要はありません。どの問題が実際の表示や操作にどう影響しているかを確認し、ページの役割に合わせて改善することが大切です。
Search Consoleでサイト全体の傾向を見る
Google Search Consoleの「ウェブに関する主な指標」では、改善が必要なページの傾向を確認できます。似た構成のページで同じ問題が起きていれば、一つの記事だけでなく、サイト共通のテンプレートや設定を見直す必要があるかもしれません。
トップページに加えて、検索からの訪問が多い記事、主力サービスの紹介ページ、問い合わせにつながるページも確認すると、優先順位を決めやすくなります。
コアウェブバイタルも確認したい指標の一つ
表示速度を細かく見る際によくでてくるのが、コアウェブバイタル（Core Web Vitals）です。これは、訪問者がページを利用するときの体験を、主に次の3つの観点から捉える指標です。
- LCP： ページの主要な内容が表示されるまでの速さ
- INP： クリックやタップなどの操作に対する反応の速さ
- CLS： 読み込み中に画像や文字の位置がずれないか
たとえば、「ページは開いたのにメイン画像がなかなか出ない」「メニューを押しても反応が遅い」「読んでいる途中でボタンの位置が動く」といった問題を考える手がかりになります。
リースエンタープライズでも先日、サイトのコアウェブバイタルに関する改善対応を行いました。数値の良し悪しだけを見るのではなく、実際の現場で何が起きているかを調べ、原因に合った対策を選ぶことが重要です。
なお、コアウェブバイタルはGoogle検索でも考慮される要素ですが、数値を改善しただけで検索順位が上がるとは限りません。訪問者にとって使いやすいサイトにするための指標として活用しましょう。
Webサイトが遅くなる主な原因と改善方法
1. 画像のファイルサイズが大きい
写真やメインビジュアルは、データ量が大きくなる原因の一つです。画面上では小さく表示する画像に、撮影時の大きなデータをそのまま使っていると、不要なデータを読み込むことになります。
画像を表示箇所に合うサイズへ調整し、画質とのバランスを見ながら圧縮します。画像形式の見直しも有効です。
また、画面を下へスクロールしないと見えない画像は、必要になったタイミングで読み込む方法もあります。ただし、最初に表示される重要な画像まで一律に遅延読み込みすると、かえって表示が遅く見える場合があります。画像の役割に合わせて設定しましょう。
2. JavaScriptやCSSの読み込みが多い
JavaScriptは、メニューやスライダーなどの動きに使われるプログラムです。CSSは、文字やレイアウトなどの見た目を整えるファイルです。
これらのファイルが多かったり、読み込む順番が適切でなかったりすると、ページの表示や操作への反応に影響することがあります。使われていない機能の整理や、必要なファイルの読み込み方法の見直しを検討します。
ただし、ファイルを単純に削減すると、デザインが崩れたり機能が動かなくなったりする可能性もあります。修正する範囲を確認し、作業後の動作確認まで行うことが必要です。
3. 計測タグや外部サービスが増えている
アクセス解析、広告計測、チャット、動画、SNSの埋め込みなど、webサイトでは主に外部サービスを利用します。一つひとつは小さなものでも、長年の運用で使っていないタグが残っている場合があります。
現在設定されているタグや外部サービスを整理し、運用目的がなくなったものがないか確認しましょう。必要なものについては、読み込むページやタイミングを見直せる場合があります。
4. サーバーの応答が遅い
ページのデータが届き始めるまでに時間がかかる場合は、サーバー側の処理や設定も確認します。キャッシュの設定、サイトで使用するシステムやプラグインの処理、サーバーの利用状況など、確認する点は複数あります。
「サーバーが原因なら移転するしかない」とは限りません。設定の見直しで改善できる場合もあれば、利用状況に合ったサーバーへの変更を検討したほうがよい場合もあります。移転には費用と作業が伴うため、現状を調べてから判断しましょう。
5. フォントや動画などの読み込みが影響している
Webフォント、背景動画、大きなアニメーションなども、ページの表示に影響することがあります。特にスマートフォンでは、パソコンと同じ演出が必要かを見直す余地があります。
デザインをすべて簡素にするのではなく、「訪問者に必要な表現か」「表示を待ってでも見せたい内容か」を考えながら調整することが大切です。
→【関連ブログ】Googleに嫌われる！？やってはいけないWebサイトの落とし穴
よくある症状から考える改善の手がかり
| 気になる症状 | 確認したいこと |
|---|---|
| 最初の画面がなかなか表示されない | メイン画像の容量、サーバーの応答、最初に読み込むファイル |
| ページは見えるがボタンの反応が遅い | JavaScriptの処理、外部ツールの動作 |
| スクロール中に画面がずれる | 画像や埋め込み要素の表示領域、後から挿入される要素 |
| スマートフォンだけ遅く感じる | スマートフォン向けの画像・演出、端末での処理負荷 |
| 特定のページだけ遅い | そのページ固有の画像、動画、埋め込み、機能 |
この表だけで原因を確定することはできませんが、調査を始める際の目安になります。同じ「遅い」という症状でも、必要な改善はページごとに異なります。
速度改善は「原因の特定」と「修正後の確認」まで重要
速度改善の方法を調べると、画像の圧縮、キャッシュの設定、サーバー移転など、さまざまな対策が見つかります。ただし、自社サイトの原因に合っていなければ、作業をしても期待した効果が得られないことがあります。
たとえば、サーバーを移転しても、実際の原因が大きな画像やJavaScriptにあれば、遅さは残るかもしれません。反対に、画像だけを調整しても、サーバーの応答に時間がかかっていれば、ページを開いたときの待ち時間は改善しきれません。
また、速度だけを優先してファイルや機能を削除すると、デザインが崩れたり、問い合わせフォームなどが正常に動かなくなったりするおそれがあります。改善後は数値を再測定し、スマートフォンとパソコンの両方で表示や操作を確認することが欠かせません。
「測定結果のどこを見ればよいかわからない」「修正がサイト全体に影響しそう」という場合は、作業を始める前にWeb制作・運用の担当者へ相談すると安心です。
速度改善はどの順番で進める？
1. 重要なページを選ぶ
トップページに加え、検索からの訪問が多いページ、主力サービスのページ、問い合わせの直前に見られるページを確認します。サイト内のすべてのページを同時に修正するより、事業への影響が大きいページから着手すると作業の目的が明確になります。
2. 遅さの原因を調べる
測定ツールの結果と実際の表示を照らし合わせます。「画像が大きい」「操作への反応が遅い」など、問題を具体的にしたうえで改善策を選びます。
3. 影響の大きいものから修正する
改善の効果と作業量を見ながら、優先順位を付けます。画像の調整で対応できるものもあれば、サイトの共通部分やサーバー設定に手を入れる必要があるものもあります。
4. 修正後に再測定する
作業後は再測定し、数値だけでなく、パソコンやスマートフォンでページが問題なく表示・操作できるかを確認します。新しい画像や機能を追加した後も、状態を確認することが大切です。
速度改善にかかる期間や費用は？
必要な期間や費用は、原因と修正の範囲によって変わります。
画像の調整や不要なタグの整理など、対象が限られている場合と、サイト全体の構造やサーバー環境の見直しが必要な場合では、作業量が大きく異なります。また、修正前の調査や、修正後に表示崩れがないかを確認する時間も必要です。
費用を抑えたい場合こそ、最初から大がかりな改修を決めるのではなく、調査→優先順位付け→必要な範囲の改善という順序で進めることをおすすめします。まずは現在のサイトで、どこに問題があるのかを把握しましょう。
リースエンタープライズにご相談できること
リースエンタープライズでは、Webサイトの制作だけでなく、公開後の運用や改善にも対応しています。
「サイトが遅い」というご相談に対しても、まずはページの表示状況や測定結果を確認し、どこから改善すべきかを整理します。画像やプログラムの見直し、サーバーに関する確認など、必要な対応はサイトの状況によって異なります。
たとえば、次のようなお悩みをご相談ください。
- PageSpeed Insightsの結果を見ても、改善項目の意味がわからない
- スマートフォンでの表示が遅く、問い合わせへの影響が気になる
- 画像、タグ、サーバーのどこに原因があるのか調べたい
- 他社が制作したサイトで、改善を誰に頼めばよいかわからない
- 一度だけの修正ではなく、公開後もサイトの状態を見ながら運用したい
Webサイトの高速化は、表示速度の数値だけを追う作業ではありません。必要なデザインや機能を保ちながら、訪問者が使いやすい状態に整えていくことが大切です。
Webサイトの速度改善についてよくある質問
PageSpeed Insightsの点数は100点を目指すべきですか？
100点を取ること自体を目的にする必要はありません。ページの役割や必要な機能を踏まえ、訪問者が情報を読みやすく、操作しやすい状態を目指しましょう。
サーバーを移転すれば必ず速くなりますか？
サーバーの応答が主な原因なら、改善につながる可能性があります。ただし、画像やJavaScriptなど別の原因が大きい場合、サーバー移転だけでは十分に改善しません。移転を決める前に原因を確認することが大切です。
WordPressのプラグインを入れれば改善しますか？
プラグインで対応できるものもあれば、既存の機能や設定との相性を確認する必要があります。高速化機能を重ねて設定すると、表示崩れや動作不良が起きる場合もあるため、導入後の確認まで含めて進めましょう。
一度高速化すれば、その後は何もしなくていいですか？
新しい画像や動画の追加、デザイン変更、外部ツールの導入などによって、サイトの状態は変わります。更新を続けるサイトほど、定期的に表示や速度を確認することが大切です。
自社サイトに必要な速度改善を見極めよう
表示速度が気になっていても、測定結果だけで原因や必要な対策を判断するのは難しいものです。まずは自社サイトの状況を確認し、効果が見込める改善から進めましょう。
リースエンタープライズでは、Webサイトの状況を調べ、改善の優先順位から修正後の確認まで対応します。「何から始めればいいかわからない」という段階でも、お気軽にご相談ください。他社で制作されたサイトの改善についてもご相談いただけます。
リースエンタープライズはお客様と寄り添い、
お客様と共に一つの問題解決に取り組みます。
あなたのやりたい、叶えたいを、なんでもお聞かせください。
- 著者.
- デザイナー/ディレクター 伊良波
- 役職.
- デザイナー/ディレクター
制作ディレクションとデザインを担当。関連会社のmakeitkidsで自社コンテンツ運営を一通りになった経験からWEBサイト運営に必要なスキルを保持。 保守サポート領域での担当も多数担当しています。
