はじめに
こんにちは、relationのリコです！
「自社のWebサイトの表示が遅い気がする」「スマホで開くとページがなかなか出てこない」と感じていませんか。
サイトが重いことには気づいていても、原因がどこにあるのか分からず、手をつけられないまま時間が過ぎてしまうことはよくあります。
PageSpeed Insightsで計測してみたものの、専門用語が並ぶ改善項目を前に、何から対応すべきか迷っている担当者の方もいるでしょう。表示速度の問題は、原因が1つとは限らず、複数の要素が重なって起きている場合もあります。
この記事では、Webサイトが重くなる主な原因を3つのグループに整理し、表示速度の確認方法から具体的な改善策まで順番に解説します。
自社で対応できる範囲と、専門家に任せたほうがよい範囲の見極め方も紹介しますので、改善の優先順位を決める際の参考にしてください。
こんな方におすすめの記事です
- 自社サイトの表示速度が遅く、どこに原因があるのか分からないWeb担当者の方
- PageSpeed Insightsで計測してみたが、何から改善すべきか判断に迷っている方
- 表示スピードを改善して、ユーザー離脱を防ぎ成果（SEO・問い合わせ）につなげたい方
Webサイトが重いとどのような影響がある？
Webサイトの表示速度は、単なる「待ち時間」の問題ではありません。ユーザーの行動、検索エンジンからの評価、画面上の動作、そして問い合わせや購入といった成果にも関わってきます。
まず影響を受けるのが、ユーザーの体験です。ページがなかなか表示されないと、訪問者は内容を見る前に「戻る」ボタンを押してしまう可能性があります。
特にスマートフォンでは、移動中や通信環境が安定しない場所で閲覧されることも多く、読み込みの遅さがストレスに直結しやすい傾向があります。
次に、SEOへの影響です。Googleは、ページの読み込みや操作性に関する指標「Core Web Vitals（コアウェブバイタル）」を、検索ランキングを決めるシステムの一部で使用していると公表しています。
ただし、Googleは検索結果の順位付けで最も重視するのはコンテンツの関連性や有用性だとしています。表示速度を改善すれば必ず順位が上がる、というものではない点は押さえておきましょう。
そして見落とされがちなのが、問い合わせや購入への影響です。
たとえば、広告から問い合わせフォームのページへ誘導しているのに、ページの表示に時間がかかれば、せっかくの見込み客を取りこぼすおそれがあります。広告費をかけて集客しているサイトほど、表示速度の問題は成果に響きやすいと考えてよいでしょう。
Webサイトが重くなる主な原因
Webサイトの表示速度が遅くなる原因は、大きく次の3つのグループに分けて考えると整理しやすくなります。
- 画像や動画などのデータ量
- JavaScript・CSS・外部ツールの読み込み
- サーバーやCMSなど、ページを配信する側の処理
ページが表示されるまでには、サーバーがデータを用意し、ブラウザがそのデータを受け取り、画面に描画するという流れがあります。どの段階で時間がかかっているかによって、打つべき対策は変わります。
ここからは、それぞれの原因を詳しく見ていきましょう。
画像や動画のデータ量が大きい
表示速度が遅いサイトで、まず確認したいのが画像や動画です。ページ全体のデータ量のうち、画像や動画が大きな割合を占めているケースはよく見られます。
たとえば、デジタルカメラやスマートフォンで撮影した写真を、そのままのサイズでアップロードしているケースがあります。横幅4,000px以上ある写真を、画面上では横幅800px程度で表示しているような状態です。
見た目は同じでも、ブラウザは元の大きなファイルをすべて読み込むため、その分だけ時間がかかります。
トップページのメインビジュアルに動画を使っている場合も注意が必要です。動画は画像よりもファイルサイズが大きくなりやすく、圧縮や配信方法を工夫しないと、ページ全体の読み込みを遅らせる原因になります。
ここで気をつけたいのは、「画像形式が古いから遅い」と単純に判断しないことです。WebPやAVIFといった新しい画像形式は、JPEGやPNGに比べてファイルサイズを抑えやすいとされています。
しかし、形式を変えるだけで解決するとは限りません。実際には、次のような要素を総合的に確認する必要があります。
- 画像の縦横のサイズ（ピクセル数）が、表示サイズに対して大きすぎないか
- 適切な圧縮がかけられているか
- 写真・イラスト・ロゴなど、用途に合った形式を選んでいるか
- 1ページに使っている画像の枚数が多すぎないか
どれか1つだけが原因のこともあれば、複数が重なっていることもあります。
画像の問題は比較的目に見えやすく、担当者が自分で確認しやすい部分でもあるため、最初のチェックポイントとして取り組みやすいでしょう。
なお、Webサイトに動画を配置する際のSEO上の注意点や最適化手法については、「動画SEO対策のやり方｜埋め込み・構造化データ・注意点を解説」でも詳しく解説しています。
JavaScript・CSS・外部ツールの読み込みが多い
画像に次いで確認したいのが、JavaScriptやCSSといったプログラム・デザイン関連のファイルです。
JavaScriptは、スライダーやアニメーション、フォームの入力チェックなど、ページに動きや機能を持たせるためのプログラムです。
CSSは、文字の大きさや色、レイアウトなど見た目を指定するためのファイルを指します。
どちらもWebサイトに欠かせないものですが、読み込むファイルが多かったり、1つのファイルが大きかったりすると、ブラウザの処理に時間がかかります。
特に影響が出やすいのは、ブラウザがJavaScriptやCSSの読み込み・実行を終えるまで、画面の描画を待ってしまうケースです。この状態を「レンダリングブロック」と呼びます。
ページの上部に表示される内容と関係のないファイルでも、読み込む順番や方法によっては表示を遅らせてしまいます。
見落としやすいのが、外部サービスのスクリプト（外部タグ）です。たとえば、次のようなものが該当します。
- Googleアナリティクスなどのアクセス解析ツール
- 広告の効果測定用タグ
- SNSの投稿やYouTube動画の埋め込み
- チャットボットやWeb接客ツール
- ヒートマップツール
こうしたツールは、導入時は便利でも、運用を続けるうちに増えていきがちです。担当者が変わったり、キャンペーンが終わったりしても、タグだけが残っていることもあります。
外部タグは他社のサーバーからデータを読み込むため、自社側では速度を調整しにくい点にも注意が必要です。
サーバーやCMS側の処理に時間がかかっている
画像やコードを見直しても改善しない場合は、ページを配信する側、つまりサーバーやCMSに原因がある可能性があります。
ユーザーがページを開くと、まずブラウザからサーバーへリクエストが送られ、サーバーが応答を返します。この最初の応答に時間がかかっていると、その後の処理をいくら工夫しても、表示全体が遅れてしまいます。
WordPressなどのCMSで作られたサイトでは、ページを開くたびにデータベースから情報を取り出し、ページを組み立てる処理が行われるのが一般的です。そのため、次のような状況では表示速度が落ちやすくなります。
- プラグインを多数インストールしており、処理が重くなっている
- 投稿やリビジョン（編集履歴）が蓄積し、データベースが肥大化している
- キャッシュの仕組みが導入されていない、または正しく機能していない
- サーバーのプランの性能が、アクセス数やサイトの規模に合っていない
- PHPやCMS本体のバージョンが古いまま運用されている
サーバーやCMSの問題は、画面を見ているだけでは気づきにくい部分です。
原因の切り分けにも専門知識が必要になるケースがあるため、次の章で紹介する計測ツールを使って、まずは状況を把握することから始めましょう。
Webサイトの表示速度と原因を確認する方法
原因の見当がついたら、実際に表示速度を計測して状況を確かめます。確認の方法は、大きく分けて2つです。
1つはツールで数値を計測する方法、もう1つは実際の端末で閲覧して体感を確かめる方法です。
ツールの数値だけ、あるいは体感だけで判断すると、原因を見誤るおそれがあります。両方を組み合わせて確認するのがおすすめです。
PageSpeed Insightsで表示速度を確認する
Webサイトの表示速度を手軽に計測できるツールとして、Googleが無料で提供している「PageSpeed Insights」があります。調べたいページのURLを入力するだけで、モバイルとデスクトップそれぞれの状態を確認できます。
PageSpeed Insightsの結果画面には、主に2種類のデータが表示されます。
1つは、実際にChromeブラウザでそのページを訪れたユーザーの計測結果をもとにしたデータです。もう1つは、ツールが決められた条件でページを読み込んで計測した診断データで、0〜100のパフォーマンススコアや改善候補はこちらに表示されます。
なお、アクセス数が少ないページでは、実際のユーザーのデータが表示されない場合もあります。
結果を見るうえで押さえておきたいのが、Core Web Vitalsと呼ばれる3つの指標です。
- LCP（LargestContentfulPaint）：ページの主要なコンテンツが表示されるまでの時間
- INP（InteractiontoNextPaint）：クリックやタップなどの操作に対して、画面が反応するまでの速さ
- CLS（CumulativeLayoutShift）：表示中にレイアウトがどれくらいずれるか
Googleは、LCPは2.5秒以内、INPは200ミリ秒以内、CLSは0.1以下を「良好」の目安としています。たとえばLCPの数値が悪ければ、大きな画像やサーバーの応答が原因の可能性があります。
INPが悪い場合はJavaScriptの処理、CLSが悪い場合は画像や広告の表示枠の指定漏れなどが疑われます。このように、どの指標に問題が出ているかを見ると、前章の3つの原因のどこから調べるべきか見当をつけやすくなります。
ただし、PageSpeed Insightsの点数を100点にすること自体を目的にしないよう注意しましょう。パフォーマンススコアは、以下のようにスコアに応じて3色で表示されます。
- 0〜49点： 遅い（赤）
- 50〜89点： 要改善（オレンジ）
- 90〜100点： 速い（緑）
このスコアは、一定の条件のもとで計測された「診断用の数値」です。そのため、回線状態やサーバーのタイミングによって、計測するたびに多少変動します。
実務上の目安としては、まずモバイル環境で「赤領域（0〜49点）」を抜け出すことを目指しましょう。そのうえで、次の2点を重視するのがおすすめです。
- 前述した3つのCore Web Vitals指標が「良好（緑）」に収まっているか
- 実際のスマートフォンで操作したときに、ストレスなくスムーズに動くか
点数を上げることだけにこだわり、必要な機能やデザインを削りすぎてしまっては本末転倒です。サイト本来の役割やユーザーの利便性を損なわない範囲で、バランスよく改善を進めましょう。
大切なのは、スコアを改善の「手がかり」として使うことです。表示された改善候補のなかから、ユーザーの体験に影響が大きく、自社で対応できそうなものを選んで取り組むと、無理なく改善を進められます。
実際のスマートフォンやPCでも確認する
ツールで計測したあとは、実際のスマートフォンやPCでページを開いて確認しましょう。数値に表れない「使いにくさ」は、実際に操作してみて初めて気づくことがあります。
確認するときは、次のような点に注目してみてください。
- ページを開いてから、メインの内容が見えるまでにストレスを感じないか
- 読み込み中に文字やボタンの位置がずれて、押し間違えそうにならないか
- メニューの開閉やボタンのタップに対して、すぐに反応するか
- 問い合わせフォームなど、成果に直結するページがスムーズに動くか
社内のPCは性能が高く、通信環境も安定していることが多いため、実際より速く感じてしまう場合があります。
ユーザーの多くがスマートフォンから訪問しているなら、Wi-Fiを切ってモバイル回線で開いてみるなど、ユーザーに近い環境で試すのがおすすめです。
ツールの数値と実際の体感の両方を確認できたら、いよいよ改善に取りかかります。
Webサイトの表示スピードを改善する方法
ここからは、前述した原因と対応させながら、実務で検討したい改善方法を4つ紹介します。
すべてを一度に実施する必要はありません。計測結果をもとに、影響が大きいものや自社で対応しやすいものから優先して取り組みましょう。
画像や動画を軽量化する
画像や動画が原因の場合は、ファイルサイズを適切に抑えることが改善の第一歩です。比較的取り組みやすく、効果を実感しやすい対策でもあります。
まず見直したいのが、画像のサイズです。表示サイズに対して大きすぎる画像は、あらかじめ適切なサイズに縮小してからアップロードしましょう。
たとえば、ブログ記事の本文で横幅800px程度で表示する画像なら、元画像もそれに近いサイズに縮小すると、ファイルサイズを大幅に抑えられる場合があります。スマートフォンの高解像度画面を考慮して、表示サイズの1.5〜2倍程度で用意するといった考え方もあります。
次に、圧縮です。画像圧縮ツールを使うと、見た目の品質をできるだけ保ちながら、ファイルサイズを小さくできます。WordPressであれば、アップロード時に自動で圧縮するプラグインを利用する方法もあります。
ファイル形式も、用途に合わせて選びましょう。写真はJPEGやWebP、ロゴやアイコンのように色数が少ない画像はPNGやSVGといったように、画像の種類によって適した形式は異なります。WebPやAVIFは主要なブラウザで利用できるようになっていますが、導入する際はサイトの仕組みや表示確認も含めて検討すると安心です。
あわせて検討したいのが「遅延読み込み（LazyLoad）」です。画面の下のほうにあり、最初は見えていない画像の読み込みを、スクロールして必要になるまで後回しにする仕組みです。
ただし、ページを開いてすぐに表示されるメインビジュアルに遅延読み込みを設定すると、かえってLCPが悪化する場合があります。どの画像に適用するかは、配置を見て判断しましょう。
動画については、ファイルを圧縮する、自動再生を見直す、YouTubeなどの外部サービスを使って埋め込むといった方法があります。外部サービスを埋め込む場合も読み込みの負荷は発生するため、次の項目で紹介する外部タグの整理とあわせて考えるのがよいでしょう。
JavaScript・CSS・外部タグを整理する
JavaScriptやCSS、外部ツールが原因の場合は、「減らす」と「読み込み方を工夫する」の2つの方向から見直します。
まずは、使っていないファイルを洗い出すことから始めましょう。PageSpeed Insightsで計測すると、改善候補（診断）の欄に次のような項目が表示されることがあります。
- 使用していない JavaScript の削減
- 使用していない CSS の削減
これらの項目を展開すると、具体的にどのファイルが表示を遅らせているかが一覧で確認できます。使われていない不要なファイルであれば、削除や読み込みの停止を検討しましょう。
外部タグについては、現在設置されているタグを一覧にして、それぞれの目的と担当者を確認するのがおすすめです。
たとえば、終了したキャンペーンの計測タグや、今は使っていないヒートマップツールのタグが残っていれば、削除の候補になります。Googleタグマネージャーでタグを管理している場合は、管理画面から設置状況を確認できます。
削除できないファイルについては、読み込み方を調整します。JavaScriptの読み込みを後回しにする「defer」や「async」といった指定を使うと、ページの描画を妨げにくくなります。また、ファイル内の不要な空白や改行を取り除く「圧縮（minify）」も、よく使われる手法です。
注意したいのは、JavaScriptやCSSの変更はサイトの動作に直接影響するという点です。読み込み順を変えたことで、スライダーが動かなくなったり、フォームの送信ができなくなったりするトラブルも起こりえます。
変更する際は、事前にバックアップを取り、テスト環境で動作を確認してから本番に反映しましょう。
キャッシュやCDNを活用する
画像やコードの整理とあわせて検討したいのが、キャッシュやCDNの活用です。どちらも「毎回すべてのデータを一から取得・生成する負担を減らす」ための仕組みといえます。
キャッシュとは、一度読み込んだデータを一時的に保存しておき、次回以降に再利用する仕組みです。キャッシュには主に2つの種類があります。
- ブラウザキャッシュ：ユーザーのブラウザ側に画像やCSSなどを保存する仕組み。同じサイトの別ページを開いたときや再訪問したときに、保存済みのファイルを使えるため、読み込み時間を短縮できます。
- サーバーキャッシュ（ページキャッシュ）：サーバー側で作成したページを保存しておく仕組み。WordPressのようにアクセスのたびにページを組み立てるCMSでは、この処理を省けることで応答が速くなる場合があります。
CDN（コンテンツデリバリーネットワーク）は、世界各地に配置されたサーバーにデータのコピーを置き、ユーザーに近い場所から配信する仕組みです。アクセスが集中したときの負荷分散にも役立ちます。国内向けのサイトでも、画像が多いサイトやアクセスの多いサイトでは効果が期待できます。
ただし、キャッシュやCDNは設定を誤ると、サイトを更新しても古い内容が表示され続けるといった問題が起こることがあります。
問い合わせフォームや会員ページなど、ユーザーごとに内容が変わるページは、キャッシュの対象から外すといった配慮も必要です。
サーバーやCMSの環境を見直す
ここまでの対策を行っても改善しない場合や、計測結果からサーバーの応答が遅いと分かった場合は、サイトの実装や運用環境そのものを見直す段階です。
まず確認したいのは、サーバーのプランがサイトの規模に見合っているかどうかです。開設当初は小規模だったサイトも、ページ数やアクセス数が増えるにつれて、当初のプランでは処理が追いつかなくなることがあります。サーバーの管理画面で、CPUやメモリの使用状況を確認してみましょう。
WordPressなどのCMSを使っている場合は、次のような見直しも有効です。
- 使っていないプラグインを停止・削除する
- 機能が重複しているプラグインを1つにまとめる
- 投稿のリビジョンや不要なデータを整理し、データベースを最適化する
- PHPやCMS本体、テーマ、プラグインを最新の安定版に更新する
PHPのバージョンを新しくすると処理速度の向上が期待できるほか、セキュリティ面でも利点があります。ただし、古いテーマやプラグインが新しいバージョンに対応していないと、サイトが正常に表示されなくなるおそれがあります。更新作業は、必ずバックアップを取ったうえで行いましょう。
高速表示に対応したテーマの選び方は「無料で使えるWordPressテーマおすすめ5選」を参考にしてください。
サーバーの移転や、テーマの作り直しが必要になるケースもあります。影響範囲が大きい対応になるため、自社だけで判断するのが難しい場合は、次の章を参考に専門家への相談も検討してみてください。
Webサイトの表示速度改善をプロに相談すべきケース
画像の圧縮や不要なプラグインの削除など、自社で対応できる改善策もあります。一方で、表示速度の問題は原因の切り分けや改修に専門知識が必要になることも多く、無理に自社で進めるとサイトの不具合につながるおそれもあります。
次のようなケースに当てはまる場合は、Web制作会社や開発会社への相談を検討するとよいでしょう。
1つ目は、PageSpeed Insightsを見ても原因が判断できないケースです。
改善候補の項目は専門用語が多く、どの項目が自社サイトの何に当たるのか、読み解くのが難しいこともあります。画像を軽量化しても数値がほとんど変わらないといった場合は、別の原因が隠れている可能性があります。
2つ目は、JavaScript・CMS・サーバーなどの改修が必要なケースです。
コードの読み込み方法の変更や、テーマの修正、サーバーの移転などは、サイトの動作に直接関わる作業です。誤った変更をすると、ページが表示されない、フォームが送信できないといったトラブルにつながりかねません。バックアップやテスト環境の用意を含め、経験のある担当者に任せたほうが安全に進められます。
3つ目は、表示速度だけでなく、SEOや導線、デザインも含めてサイト全体を改善したいケースです。
表示速度の問題を調べていくと、「サイトの構成自体が古くなっている」「スマートフォンで見づらい」「問い合わせまでの導線が分かりにくい」など、別の課題が見えてくることもあります。こうした場合は、部分的な修正を重ねるよりも、サイト全体の見直しを視野に入れたほうが、結果的に効率よく成果につながる場合があります。
relationでは、Webサイトの制作・改善を通じて、表示速度の改善はもちろん、SEOや導線設計、デザインまで含めたご相談を承っています。
「自社サイトのPageSpeed InsightsのURLを送るだけの簡易スピード診断」など、ボトルネックの切り分けからサポート可能です。「どこから手をつければよいか分からない」という段階でも、現状の確認から一緒に進めていきますので、お気軽にご相談ください。
まとめ
Webサイトが重い原因は1つとは限りません。画像・動画のデータ量をはじめ、JavaScriptや外部ツールの読み込み、サーバーやCMSの処理など、複数の要素が重なって起きているケースもよくあります。
改善を進めるうえで大切なのは、いきなり対策に飛びつくのではなく、まず状態を計測して原因の見当をつけることです。PageSpeed Insightsで数値や改善候補を確認し、実際のスマートフォンやPCでも表示や操作を確かめましょう。
そのうえで、原因に合った対策から優先順位をつけて取り組むと、効率よく改善を進められます。
- まずはPageSpeed Insightsと実機の両方でサイトの状態を確認する
- LCP・INP・CLSのどこに問題があるかを見て、原因の見当をつける
- 画像の軽量化や不要なタグの整理など、自社で対応しやすいものから着手する
- スコア100点を目指すより、ユーザーが快適に使えるかを基準にする
画像の圧縮や外部タグの整理であれば、自社で取り組める部分も多いでしょう。一方で、原因の特定が難しい場合や、コード・サーバーの改修が必要な場合は、専門家の力を借りるのも1つの方法です。
「まずは自社サイトの表示スピードを診断してほしい」という場合も、relationまでお気軽にご相談ください。
