ホームページの表示速度を測る方法と重い原因の切り分け手順

ホームページを開いたときに「なんだか表示が遅いな」と感じることはないでしょうか。スマートフォンで自社のサイトを開いて、画面が白いまま数秒待たされる。その数秒のあいだに、せっかく来てくれた方がそっと戻るボタンを押してしまう——表示の速さは、それくらい問い合わせの数に直結する部分です。

とはいえ、速度の話は「サーバー」「キャッシュ」「圧縮」といった言葉が並びがちで、どこから手をつければいいのか分かりにくいのも事実です。制作会社に聞けば直るのかもしれませんが、何が原因かも分からないまま相談するのは気が引ける、という方も多いと思います。この記事では、専門知識がなくても無料でできる速度の測り方と、「重いのは画像なのか、サーバーなのか、それとも別の何かなのか」を切り分けていく手順を、画面のどこを見ればいいかまで含めてまとめます。測るだけなら5分、原因の見当をつけるところまでで30分ほどの作業です。

表示が遅いと、問い合わせはどこで失われているのか

先に結論からお伝えします。ホームページの表示速度は、内容の良し悪し以前の「見てもらえるかどうかの入口」です。どれだけ丁寧に書かれたページでも、開くまでに待たされれば、中身を読む前に戻るボタンが押されてしまいます。問い合わせが来ない理由を文章や写真に探す前に、まず「そもそも最後まで表示されているか」を確かめる価値があります。

待たされた分だけ、人は戻っていく

一般的な傾向として、スマートフォンでページを開いてから表示されるまでの時間が長くなるほど、途中で離れてしまう人の割合は増えていきます。目安としてよく言われるのが3秒前後です。信号待ちや移動中など、片手で短時間に調べている人にとって、3秒の白い画面はかなり長く感じられます。

そして厄介なのは、この離脱がアクセス解析の画面に「読み込み待ちで帰った人」とは表示されないことです。数字の上では「来たけれどすぐ帰った人」としてしか見えないため、原因が内容にあるのか速度にあるのか、見分けがつきにくいのです。直帰率の見方だけを眺めていても、その裏側までは分かりません。

Googleも読み込みの速さを見ている

Googleは、ページの読み込み体験を検索結果の評価に使う要素のひとつとして公表しています。ただし、速くすれば順位が上がると約束されているわけではありません。順位は内容の充実度をはじめ多くの要素で決まるもので、速度はそのうちのひとつ、という位置づけです。

それでも測る意味があるのは、速度が「訪れた人の体験」に直接効くからです。検索で上に出ているかどうかに関わらず、開いてもらえたページが速く表示されるかどうかは、問い合わせに届くまでの道のりを確実に左右します。

パソコンで見ている限り、遅さには気づけない

ここが一番の落とし穴です。ご自身のホームページを、事務所のパソコンから、安定した光回線で、何度も開いていませんか——という話ではありません。むしろ、それが普通です。毎日のように自社サイトを確認するのは当たり前のことですし、気づきにくくて当然の仕組みがあります。

理由は二つあります。

• キャッシュが効いている：一度読み込んだ画像やデザインのデータは、パソコンやスマートフォンの中に一時的に保存されます（これをキャッシュといいます）。二回目以降はそれを使い回すので、初めて来た人よりずっと速く表示されます。つまり、自分が見ている速さは「最速の状態」です。
• 条件が違いすぎる：パソコンは画面が大きく処理能力も高く、社内の回線は安定しています。一方、検索から来る人の多くはスマートフォンで、電波の弱い場所にいることも、数年前の端末を使っていることもあります。同じページでも、表示にかかる時間はまるで別物になります。

だから、感覚ではなく数字で測る

「うちのサイトは別に遅くないと思う」という感覚は、多くの場合、速い条件で見た結果です。責められるような話ではなく、構造上そうなるというだけのことです。

そこで次の章からは、お金をかけずに、ご自身の手で表示速度を数字として出す方法をご案内します。使うのは無料のツールと、お手持ちのスマートフォンだけ。測った数字をもとに、重さの原因が画像なのか、サーバーなのか、あとから入れた機能なのかを切り分けていきます。まずは「何秒かかっているか」をはっきりさせるところから始めましょう。

無料で測る：PageSpeed Insightsの使い方と見る場所

表示速度は、感覚ではなく数字で確かめられます。Googleが無料で公開している「PageSpeed Insights（ページスピード インサイト）」というページを使えば、自社サイトのURLを貼り付けるだけで測れます。登録も費用も不要で、所要時間は5分ほどです。

手順：5分でできる測り方

1. 検索窓に「PageSpeed Insights」と入力し、Googleの公式ページ（pagespeed.web.dev）を開きます。日本語で表示されます。
2. 画面中央にURLの入力欄があります。そこに自社サイトのURLを貼り付けて、右側の「分析」ボタンを押します。まずはトップページ、次に問い合わせにつながる主要ページ（サービス紹介やお問い合わせページ）を、1ページずつ測ります。
3. 30秒ほど待ちます。測定中はぐるぐると読み込み表示が出ます。途中で閉じずに待ってください。
4. 結果が出たら、画面上部にある「携帯電話」「デスクトップ」という切り替えタブを確認します。まずは「携帯電話」側を見てください。多くのサイトで訪問者の大半はスマートフォンからで、しかもスマホのほうが条件が厳しく、数字は低く出やすいためです。
5. 丸いメーターに0〜100の点数が表示されます。色は、90以上が緑、50〜89がオレンジ、49以下が赤です。赤やオレンジが出ても、まずは落ち着いて色だけ控えておきます。
6. 点数の下にある「パフォーマンス」の項目と、さらに下に並ぶ指標を見ます。赤い印がついた項目をメモします。

並んでいる指標は、普通の言葉に置き換えると分かりやすい

英語の略語が並びますが、意味はどれも素朴なことです。

• Largest Contentful Paint（LCP／最大視覚コンテンツの表示時間）…そのページでいちばん大きい画像や見出しの文字が出そろうまでの時間です。2.5秒以内が目安とされています。ここが赤いときは、重い画像が原因であることが多いです。
• Cumulative Layout Shift（CLS／レイアウトのずれ）…読み込みの途中で、文字やボタンの位置がガタッと動いてしまう度合いです。押そうとしたボタンがずれて別の場所を押してしまう、あの現象のことです。
• Interaction to Next Paint（INP）／Total Blocking Time（TBT）…タップやクリックをしてから画面が反応するまでの引っかかりです。見た目は出ているのに操作できない時間、と考えてください。

「実際のユーザーの環境で評価する」が出ないことがあります

画面の上のほうに「実際のユーザーの環境で評価する」という欄が出る場合があります。これは、実際にそのページを訪れた人の端末から集まった記録です。訪問数が一定に満たないサイトでは、この欄が表示されず「十分なデータがありません」といった案内になります。これは不具合ではなく、よくあることですので心配はいりません。その場合は、下にある「パフォーマンスの問題を診断する」側（測定用の環境でその場で測った結果）を見れば十分です。

点数そのものを追いかけない

大切なのは、点数を上げることではなく、赤く出た項目を書き留めることです。この点数は測るたびに多少前後します。測ったタイミングの回線の混み具合や、サーバーの状況で数ポイント変わるのは普通のことです。5点下がった、10点上がったで一喜一憂すると、かえって本当の原因が見えなくなります。

おすすめは、同じページを時間を変えて2〜3回測り、毎回赤くなる項目だけを拾うやり方です。何度測っても赤い項目こそが、実際に直す価値のある箇所です。何秒なら遅いのかという目安と合わせて見ておくと、自社の現在地がつかみやすくなります。メモした項目は、このあとの原因の切り分けでそのまま使います。

PageSpeed測定手順

1. URLを入力自社サイトのURLを貼り付けて分析を押す
2. 携帯電話側を選ぶ利用者が多く条件が厳しいスマホ側を確認
3. 点数と色を控える赤やオレンジが出ても落ち着いて色を控える
4. 赤い項目をメモ下部に並ぶ指標で赤い印がついた項目を記録

もうひとつの測り方：ブラウザとスマホ実機で確かめる

点数だけを見ていると、実際にお客さまがどう感じているかは分かりません。点数が同じでも「文字がすぐ読めるページ」と「真っ白のまま数秒待たされるページ」では、印象がまるで違います。ここでは、ご自身の目と手で体感を確かめる方法をまとめます。全部で10分ほどで終わります。

(A) シークレットウィンドウで「初めて来た人」の見え方にする

いつも自分で見ているホームページは、パソコンの中に画像などが保存されていて、二回目以降は速く表示されます。初めて訪れる方の見え方に近づけるには、保存済みのデータを使わない窓で開きます。

1. Chromeを開き、Windowsは Ctrl+Shift+N、Macは ⌘+Shift+N を押します。黒っぽい画面の「シークレット モード」が開きます。
2. アドレス欄に自社のURLを入力し、Enterと同時にスマホのストップウォッチを押します。
3. 「文字が読める状態になるまで」何秒か、「画像が出そろって画面が動かなくなるまで」何秒かを、それぞれ書き留めます。

文字が出るまでに3秒以上かかる、あるいは途中で文字の位置がガタンとずれて読みづらい、といった感覚はそのまま記録しておいてください。何秒なら遅いのかの目安と照らし合わせると判断しやすくなります。

(B) 検証画面で「どのファイルが重いか」を見る

もう一歩踏み込むと、ページの中で何が重さの原因になっているかが分かります。難しそうな画面が出ますが、見る場所は3つだけです。

1. Chromeで自社ページを開いた状態で F12 キーを押します（Macは ⌘+Option+I）。画面の横か下に開発者向けの画面が出ます。
2. 上部のタブから Network を選びます。
3. その状態でページを再読み込みします（画面左上の丸い矢印、またはCtrl+R）。一覧にファイルがずらっと並びます。
4. 画面の下部に「Load」「Finish」という秒数と、「transferred」という容量が表示されます。transferredがページ全体の転送量、つまり読み込んだデータの重さです。
5. 一覧の「Size」という列の見出しをクリックすると、大きい順に並べ替えられます。上に来ているファイル名が、そのページで一番重いものです。

目安として、ページ全体の転送量が2MBを超えていたら画像が重い可能性が高いと考えてよいでしょう。並べ替えた一覧の上位に.jpgや.pngといった画像ファイルが並んでいれば、ほぼ画像が原因です。逆に、見慣れないサービス名のファイルが上位にあれば、後から足した外部の仕組み（チャット窓や広告の計測など）が効いている可能性があります。

(C) 自分のスマホをモバイル回線にして開く

事務所のWi-Fiは速いので、スマホで見ても遅さに気づきにくいものです。スマホの設定からWi-Fiを一時的にオフにし、携帯の回線（4G・5G）だけの状態で自社サイトを開いてみてください。外出先で検索している方に近い条件になります。ここで「待たされる」と感じたら、改善の優先度は高いと考えてよいと思います。

(D) トップページだけでなく3〜4ページ測る

重いのはサイト全体ではなく、特定のページだけ、というケースが少なくありません。写真を多く載せた施工事例や商品ページだけが極端に重い、といったことはよくあります。最低でも、トップページ／サービス紹介ページ／問い合わせページ／ブログ記事1本の4つを測ってみてください。

測った結果を書き留める

数字は記録しないとすぐ忘れますし、後で直したときの比較もできません。次のような簡単な表を紙でもメモアプリでも作っておくと、相談するときにもそのまま使えます。

ページ名	スマホのスコア	パソコンのスコア	体感（文字が読めるまで）	転送量
トップページ			秒	MB
サービス紹介			秒	MB
お問い合わせ			秒	MB
ブログ記事			秒	MB

この表が埋まれば、「どのページが、どのくらい重いのか」がはっきりします。次の章では、その数字から原因を切り分けていきます。

原因を切り分ける：画像・サーバー・プラグイン・外部タグ

数字が出たら、次は「どこが足を引っ張っているのか」を絞り込みます。やみくもに直すより、症状から当たりをつけたほうが早く、費用もかかりません。まずは下の表で、ご自身のサイトがどの症状に近いかを探してみてください。

症状	原因として考えやすいもの	自分で確かめる方法
①どのページも一様に遅い	サイトを置いているサーバー（借りている置き場所）の性能やプラン	契約しているレンタルサーバーの管理画面で、会社名とプラン名を確認する
②特定のページだけ遅い	そのページの画像、または埋め込み（地図・動画・SNSの投稿）	遅いページと速いページを見比べ、地図や動画が入っていないかを見る
③文字は先に出るが画像が後からパラパラ出る	画像のファイルサイズが大きすぎる	画像を右クリック→「画像を新しいタブで開く」→保存してサイズを見る
④表示されてもタップの反応が鈍い	動きをつけるプログラム（スクリプト）の読み込み過多、機能追加部品の入れすぎ	WordPressなら管理画面「プラグイン」の有効化数を数える
⑤読み込み中にボタンや文字が飛ぶ	画像に縦横の大きさが指定されていない、広告や特殊な文字（Webフォント）	スマホで一度キャッシュを消して開き、押そうとした場所がずれるか見る
⑥夕方など特定の時間だけ遅い	複数の利用者で分け合う共用サーバーの混雑	朝・昼・夜の3回、同じページで同じ測定をして数字を比べる

画像：いちばん多く、いちばん直しやすい

現場で最も多い原因は画像です。スマートフォンやデジタルカメラで撮った写真をそのまま載せると、1枚で3〜5メガバイトになることがあります。ホームページに載せる写真は、横幅1600ピクセル前後・1枚あたり200〜300キロバイト以内が一つの目安です。PageSpeed Insightsの「改善できる項目」に出てくる「適切なサイズの画像」は「表示される大きさよりも大きすぎる画像がある」という意味、「次世代フォーマットでの画像の配信」は「WebPなど、同じ見た目でも軽い保存形式に変えられる」という意味です。どちらも画像を入れ替えるだけで済むことが多く、費用もかかりません。

外部の埋め込み：便利な部品ほど重い

Googleマップ、YouTube、Instagramの投稿、チャットの吹き出し、予約システム、アクセス解析のタグ。これらは他社のサーバーから部品を読み込むため、自分のサイトがどれだけ軽くても、その分だけ待ち時間が増えます。確認は簡単で、たとえば地図を載せているアクセスページと、文章だけの会社概要ページを両方測って数字を比べるだけです。差が大きければ埋め込みが効いています。地図は「画像＋Googleマップへのリンク」に置き換えるだけで軽くなります。

プラグイン：数を数えるところから

WordPressをお使いなら、管理画面の左メニュー「プラグイン」→「インストール済みプラグイン」を開き、上部の「有効」の横に出ている数字を見てください。20を超えていたら、見直す余地があります。使っていない機能、同じ目的のものが二重に入っている、以前の制作時に入れたまま忘れられている——こうしたものは珍しくありません。ただし停止すると表示が崩れる場合があるので、一つずつ、必ず控えを取ってから行ってください。

サーバー：お金がかかるので最後に

サーバーの乗り換えやプラン変更は効果が大きい一方、費用と手間がかかります。ですから切り分けは「画像 → 外部の埋め込み → プラグイン → サーバー」の順、つまりお金がかからない側から進めるのが現実的です。画像を軽くしただけで十分な速さになることも多く、その場合サーバーに手を付ける必要はありません。どこから手を付けるか迷うときは、直す順番の決め方も合わせて読むと整理しやすくなります。

自分で手を入れられる範囲と、相談したほうが早い範囲

表示を軽くする作業には、画面の操作だけで終わるものと、サイトの土台をさわるものがあります。土台のほうを手探りで触ると、最悪ページが表示されなくなります。まずは「自分でできる側」を全部やり切って、それでも足りなければ相談する。この順番が、費用も手間もいちばん無駄になりません。

自分で手を入れられる5つ

1. 画像を保存し直す。スマホやカメラで撮ったままの写真は、1枚5MB（文章ページ数十ページ分の重さ）あることも珍しくありません。ホームページに載せるなら長辺1600ピクセル程度・JPEG形式で十分です。無料のSquoosh（スクーシュ）や、パソコン標準のペイント・プレビューでも縮小できます。これだけで体感が変わることが多い作業です。
2. 使っていないプラグインを停止・削除する。WordPressなら管理画面の「プラグイン」→「インストール済みプラグイン」を開き、何年も使っていないものを停止します。停止後に必ずサイトの表示崩れがないか確認してください。
3. トップページの埋め込みを減らす。動画やSNSのタイムラインをそのまま貼ると、相手のサーバーからも大量のデータを読み込みます。サムネイル画像＋リンクに置き換えるだけで軽くなります。
4. スライドショーを静止画にする。トップで何枚も自動で切り替わる写真は、全部を先に読み込むため最初の表示が遅れます。いちばん伝えたい1枚に絞るのも手です。
5. キャッシュ系プラグインを1つだけ入れる。一度作った表示を使い回して速くする仕組みです。ただし複数入れると競合して表示崩れや不安定の原因になります。必ず1つだけ、入れた直後にスマホとパソコンの両方で表示を確認してください。

作業時間と効果の目安

やること	作業時間の目安	難易度	効果の出やすさ
画像を縮小して差し替え	1枚3分／10枚で30分	易しい	高い
不要プラグインの停止・削除	20分	やや易しい	中くらい
埋め込みをリンクに置換	30分	易しい	中〜高
スライドショーを静止画に	30分	やや易しい	中くらい
キャッシュ系プラグイン導入	30分＋確認	注意が必要	中〜高

相談したほうが早い範囲

次の4つは、効果は大きい反面、失敗したときに自力で戻せません。制作会社やサーバーの管理担当に任せたほうが結果的に早くて安全です。

• サーバーの移転（契約先そのものを速いものに変える）
• PHPバージョンの変更（サイトを動かす土台のソフトの世代を新しくする）
• テーマの改修（デザインの型そのものに手を入れる）
• CDNの導入（画像などを各地の配信拠点から届けて速くする仕組み）

依頼するときの伝え方

「なんとなく重いので直してください」では、相手も調べ直すところから始まり、見積もりが膨らみます。PageSpeed Insightsで測った結果画面のURLをそのまま共有し、赤やオレンジで出た項目名を文字どおりコピーして伝えるのがいちばん早いです。「次の項目が赤く出ています。改善にいくらかかりますか」と聞けば、作業範囲と金額の話がすぐ始まります。制作会社と連絡が取れない場合は、サーバーの契約情報が手元にあるかだけ先に確認しておくと話が進みます。

正直に書いておきたいこと

表示速度は土台であって、速くしたから問い合わせが増える、とは約束できません。速さは「離脱を減らす」方向には効きますが、そもそも人が来ていなければ減らす離脱もありません。速度を整えたら、同じ熱量でどんな検索語で探されているかとそのページに知りたい答えが書いてあるかを見直してください。その2つが揃って、はじめて速さが活きてきます。

自力対応と相談の切り分け

自分でできる

• 画像の縮小と保存し直し
• 不要なプラグインの停止
• トップページの埋め込み削減
• スライドショーの静止画化

→

相談が早い

• サーバーの移転
• PHPバージョンの変更
• テーマの改修
• CDNの導入

まとめ

表示速度の話は、言葉だけ聞くと専門的に思えますが、やることは「測る」「切り分ける」「手を入れる」の3つだけです。順番を入れ替えないことが大切で、測らないまま手を入れると、何が効いたのか分からなくなってしまいます。

今日やるなら、この順番で

1. 測る：PageSpeed Insightsに自社のURLを入れて実行。所要5分ほど。まずは「モバイル」タブ、つまりスマートフォン側の数字を見ます。問い合わせの多くはスマホから届くので、ここが実態に近い数字です。
2. メモする：画面を下にたどると「改善できる項目」や「診断」という一覧が出ます。そこで赤やオレンジで出ているものを上から3つだけ書き写します。全部を直そうとしないのがコツです。
3. 切り分ける：その3つが画像のことなのか、サーバーの反応の遅さなのか、追加機能（プラグイン）や外部の計測タグなのかを見分けます。項目名に「画像」「サイズ」とあれば画像側、「サーバーの応答時間」とあれば土台側です。
4. 手を入れる：画像の入れ替えや縮小は、多くの場合いちばん費用がかからず、変化も見えやすい部分です。写真をそのまま載せていたページを適切なサイズに差し替えただけで、体感が変わることは珍しくありません。
5. もう一度測る：直したら同じ条件で測り直し、数字と体感の両方を確かめます。

手を尽くしても数字が動かないとき

画像を整え、使っていない機能を減らしても数字がほとんど変わらない場合、原因は土台側にあることが多いです。契約しているサーバーの性能、使っているデザインテンプレート（テーマ）の作り、あるいはサイト全体の構成といった部分です。ここは一部分を直しても効きにくく、入れ替えや作り替えの判断が必要になります。「自分の手が届く範囲はやり切った」と分かること自体が、次の相談を具体的にしてくれます。あわせて、何秒なら遅いと言えるのかの目安を知っておくと、数字の読み方が落ち着きます。

なお、シロツメWebを運営するSHIROTSUME GRASS株式会社は、もともと法人向けの中古スマートフォン・パソコンの買い取りと販売を本業としている会社です。その集客のために自分たちでSEO記事を書き、結果が出たので、同じやり方を他のお店や会社にも提供しています。だから、机上の話ではなく「実際にやってみてどうだったか」の側からお伝えできます。

測ってはみたものの、どの数字をどう直せばいいか分からない――そういう段階でのご相談を、無料のホームページ診断としてお受けしています。お申し込みに必要なのはサイトのURLとメールアドレスだけで、費用はかかりませんし、営業のお電話もいたしません。表示速度まわりで気になっている点（スマホだと読み込みが長い、特定のページだけ重い、など）を一言添えていただけると、見る場所を絞ってお返事できます。順位や問い合わせ数をお約束するものではありませんが、いまの状態と優先順位を整理するところからご一緒します。お気軽にお問い合わせフォームからどうぞ。