ホームページの表示の速さを確かめる方法を比較｜PageSpeed Insights・Search Console・Lighthouse・実際のスマホ

なぜ表示の速さを確かめるのか

ホームページの表示が遅いと、お客さまは内容を読む前に帰ってしまいます。とくにスマホで、外出先の電波があまり良くない場所から見る人は、数秒待たされるだけで、別のお店のページに移ってしまうこともあります。

また、Googleは、ページの読み込みの速さや、操作したときの反応、表示が途中でずれないか、といったお客さまの体験を「ウェブに関する主な指標（Core Web Vitals）」としてまとめていて、検索の評価のひとつとしても案内しています。ただし、検索の順位は内容の良さが中心で、速さだけで順位が大きく上がるわけではありません。速さは「お客さまに読んでもらうための土台」と考えるとよいでしょう。

ウェブに関する主な指標（Core Web Vitals）とは

表示の速さの確かめ方を比べる前に、どの方法でも出てくる3つの指標を、かんたんに押さえておきましょう。

PageSpeed Insightsの公式の説明では、この3つのほかに、最初に何かが表示されるまでの時間（FCP）なども見られると案内されています。それぞれ「良好」「改善が必要」「不良」の3段階で表示されます。

4つの確かめ方の比較

PageSpeed Insights：URLを入れるだけで、いちばん手軽

PageSpeed Insightsは、調べたいページのURLを入れるだけで、表示の速さを調べられるGoogleの無料の道具です。公式の説明によると、結果は大きく2つに分かれています。

ひとつは、実際の利用者のデータ（フィールドデータ）です。Chromeを使っている実際の利用者の、過去28日間の体験をもとにしています。もうひとつは、診断のデータ（ラボデータ）です。Lighthouseを使って、決まった端末と通信の条件で、ページの読み込みを再現して測ったものです。

公開したばかりのページや、まだ訪問が少ないページでは、実際の利用者のデータが足りず、表示されないこともあります。その場合は、サイト全体のデータが表示されるか、診断のデータだけが表示されます。

Search Console：サイト全体のどこが遅いかをまとめて見る

Search Consoleは、Googleの検索でホームページがどう見られているかを確かめる、無料の道具です。この中の「ウェブに関する主な指標」のレポートでは、実際の利用者のデータをもとに、サイトの中で「良好」「改善が必要」「不良」のページがどれくらいあるかを、スマホとパソコンに分けて見られます。

1ページずつ調べるPageSpeed Insightsと違い、似たような問題を持つページをまとめて見つけられるのが強みです。たとえば「ブログの記事のページが全体的に遅い」といったことがわかれば、記事のページの作りを見直す、という手が打てます。ただし、訪問の少ない小さなサイトでは、データが足りず、何も表示されないこともあります。

Lighthouse：公開前のページや、直したあとの確認に

Lighthouseは、パソコンのChromeに最初から入っている診断の道具です。Chromeでページを開き、右クリックの「検証」から開ける開発者用の画面の中の「Lighthouse」というタブから使えます。PageSpeed Insightsの診断のデータと同じしくみで測ります。

PageSpeed Insightsはインターネットに公開されたページしか調べられませんが、Lighthouseは、自分のパソコンで開けるページならなんでも調べられます。公開前の作りかけのページや、パスワードをかけたページを確かめたいときに便利です。また、表示の速さのほかに、使いやすさ（アクセシビリティ）、SEOの基本などの点数も出してくれます。

ただし、自分のパソコンの性能や、そのときの通信の状態によって、結果が変わりやすいという面もあります。1回の結果で判断せず、何回か測って傾向を見るのがおすすめです。

実際のスマホで開いてみる：数字ではわからないことを確かめる

最後は、いちばん原始的ですが、とても大切な方法です。自分のスマホや、家族の少し古いスマホで、Wi-Fiを切って、モバイルの通信でホームページを開いてみましょう。

数字では「良好」でも、実際に開いてみると「最初の画面に大きな画像が出るまで、少し白い画面が続く」「読み込みの途中で、ボタンの位置がずれて押し間違えた」といったことに気づくことがあります。お客さまが体験するのは、点数ではなく、この「待たされている感じ」です。

点数の読み方

PageSpeed Insightsで出てくる0〜100の点数は、診断のデータ（ラボデータ）をもとにした点数です。公式の説明では、90以上が「良好」、50〜89が「改善が必要」、50未満が「不良」とされています。

ここで知っておきたいのは、点数と、実際の利用者のデータは、ずれることがあるということです。公式の説明でも、診断のデータは決まった端末と通信の条件での再現、実際の利用者のデータはさまざまな端末と通信の状況での記録なので、値が異なる場合があると案内されています。

迷ったときは、実際の利用者のデータを優先して考えましょう。点数が70点でも、実際の利用者のデータが「良好」なら、お客さまは困っていない可能性が高いからです。反対に、点数が90点でも、実際の利用者のデータが「不良」なら、見直す価値があります。

3つのケースで考える

ケース1：PageSpeed Insightsの点数が45点だったカフェ

ホームページを作ってもらったカフェのオーナーが、PageSpeed Insightsで調べてみたら、スマホの点数が45点でした。

改善のヒントを見ると、「画像のサイズを適切に設定する」「次世代のフォーマットで画像を配信する」と出ていました。トップページに、スマホで撮ったままの大きな写真が何枚も使われていたのが原因です。写真を小さくして、軽い形式に変えると、点数も実際の表示も速くなります。お店のホームページで遅くなる原因として、もっとも多いのが、この「画像が重すぎる」ことです。

ケース2：Search Consoleで「改善が必要」なページが多かった工務店

Search Consoleの「ウェブに関する主な指標」のレポートで、施工事例のページの多くが「改善が必要」になっていました。

調べてみると、施工事例のページに、写真のスライドショーが入っていて、読み込みの途中で、下の文章の位置が大きくずれていました（CLSの問題）。スライドショーの場所の高さを先に決めておく、写真の縦横の大きさを指定しておくといった直し方で、ずれを減らせます。

ケース3：点数は良いのに、実際に開くと遅く感じたサロン

サロンのホームページは、PageSpeed Insightsの点数は85点で、それほど悪くありませんでした。でも、オーナーが外出先でスマホから開くと、予約のボタンが出るまで時間がかかるように感じました。

実際に開いてみると、予約のボタンが、外部の予約システムの読み込みを待って表示される作りになっていました。予約のボタンだけは先に表示されるようにして、ボタンを押したら予約システムのページに移る形に変えると、待たされている感じがなくなります。数字だけでは見えない問題を、実際のスマホで確かめる大切さがわかる例です。

表示が遅いときに見直すところ

確かめた結果、表示が遅かったときに見直すところを、よくある順に並べます。

画像の大きさと形式

いちばん効果が大きいのが画像です。スマホやデジカメで撮った写真は、そのままだと1枚で数MBあることもあります。ホームページに載せる前に、横幅を表示に必要な大きさ（たとえば1,600ピクセル程度）まで小さくし、WebPなどの軽い形式に変えると、それだけで大きく速くなることがあります。

読み込むものの数

SNSの埋め込み、地図、チャット、アクセス解析のタグ、WordPressのプラグインなど、外部から読み込むものが増えるほど、表示は遅くなります。使っていないものは外し、本当に必要なものだけを残しましょう。

動画やスライドショー

最初の画面に大きな動画やスライドショーを置くと、見た目は華やかになりますが、表示は遅くなりがちです。最初の画面には、1枚の写真と、短い言葉と、ボタンがあれば十分なことも多いです。

サーバーの速さ

WordPressのように、自分でサーバーを借りてホームページを動かしている場合は、サーバーの速さも影響します。PageSpeed Insightsの改善のヒントに「サーバーの応答時間を短縮する」と出ているときは、サーバーの見直しも考えてみましょう。

確かめるときの注意

小さな会社やお店での使い分け

おすすめは、まずPageSpeed Insightsで今の状態を知り、実際のスマホで開いて体験を確かめることです。ページが増えてきたら、Search Consoleで全体を見るようにすると、見落としが減ります。

速さの見直しまで任せたいときは

画像を小さくしたり、読み込むものを減らしたりするのは、慣れていないと手間がかかります。表示の速さも含めて、ホームページの作りから任せたい場合は、制作と管理をまとめて頼めるサービスもあります。CRAFT WEBは、月額3,000円（税別）で、オリジナルのデザインのホームページを、スマホでの見やすさや表示の軽さに気を配って作り、公開後の管理まで任せられるサービスです。

まとめ

ホームページの表示の速さを確かめる方法は、手軽に1ページを調べるならPageSpeed Insights、サイト全体を見るならSearch Console、公開前や直したあとの確認ならLighthouse、お客さまの体験を知るなら実際のスマホ、と使い分けるのがおすすめです。

点数は目安で、大切なのは、お客さまが待たずに読める状態かどうかです。遅いときは、まず画像の大きさと形式を見直し、次に読み込むものの数、動画やスライドショー、サーバーの順に確かめていきましょう。