COLUMN

ホームページの表示が遅いかを、自分で確かめる方法|自分のスマホと PageSpeed Insights と Search Console で見る

公開日 / 公式の説明を確認した日

ホームページが遅い? 自分で確かめる方法。読み込み中のスマホとメモ帳の水彩イラスト

お客さんに「ホームページがなかなか開かないよ」と言われた。自分のパソコンでは普通に開くので、本当に遅いのかが分からない。そんな方のための記事です。

遅いかどうかは、3つの方法で、手軽なほうから順に確かめられます。自分のスマホで試す、PageSpeed Insights(Googleの無料の測定ページ)で測る、Search Consoleで見る、です。Googleの公式の説明で確かめられることは出典を付け、それ以外は「私の考え」と分けて書きました。

この記事は、速くすると検索の順位が上がる、問い合わせが増える、と約束するものではありません。見る指標は3つだけに絞りました。

先に結論

  • いちばん手軽で、いちばん大事なのは、自分のスマホで、モバイルデータにして、外で開いてみることです(私の考えです)。
  • 次に、PageSpeed Insights に、ホームページのアドレスを入れて「分析」を押します。見るのは、表示の速さ・反応の速さ・見た目のずれの3つだけです。
  • 実際のお客さんのデータが出ないことは、小さなホームページではふつうです。出なくても、故障ではありません。
  • 点数だけを目標にしないでください。Google自身が、満点を取ろうとするのは有効な時間の使い方とは言えない、と書いています。[出典7]

① まず、自分のスマホで試す

お店の外の木のテーブルに、ホームページを開いたスマホとメモ帳・ペンを置いた、人物のいない水彩イラスト
お店の外でスマホの回線を使い、開いたときの様子をメモする

機械で測る前に、お客さんと同じ状況で、自分で開いてみます。機械の数字より、お客さんの感じ方に近いと私は考えています。

やましなWeb

私の考え

お店のWi-Fiではなく、モバイルデータ(スマホの回線)で、できればお店の外で試してください。次の5つを、紙にメモします。

  • 場所と回線

    お店の外や、Wi-Fiのない場所で、モバイルデータ(スマホの電話会社の回線)に切り替えて試します。お店のWi-Fiでは、速く見えすぎることがあります。

  • タップしてから、文字が読めるようになるまで

    ホームページのアドレスを開いてから、文字が読めるようになるまでを、ストップウォッチで測るか、「何秒くらいか」をメモします。

  • 電話やフォームのボタンを押せるようになるまで

    文字が見えても、押してもすぐに反応しないことがあります。最初に押せたのは、何秒後かもメモします。

  • 途中で、画面が動いてしまわないか

    読んでいる途中で、文字やボタンが急にずれて、違うところを押しそうにならなかったかを見ます。

  • トップページと、よく見られるページの2つ

    トップページだけでなく、料金・メニュー・問い合わせフォームなど、お客さんが必ず見るページも同じように試します。

スマホで電話番号を押してかけられるかも、このときに一緒に見られます。

② PageSpeed Insights で測る

PageSpeed Insights(PSI)は、Googleが出している無料の測定ページです。公式サイトには、「あらゆるデバイスでウェブページの読み込み時間を短くしましょう」とあります。[出典1]ヘルプには、モバイルとパソコンの両方のデバイスで、ページのユーザー エクスペリエンスに関するレポートを出し、そのページを改善する方法の最適化案も出す、とあります。[出典2]

使い方(6つの手順)

  1. PageSpeed Insights を開く

    ブラウザで「pagespeed.web.dev」を開きます。Googleが出している、無料の測定ページです。

  2. 欄に、自分のホームページのアドレスを入れる

    「https://」から始まる、ホームページのアドレスを入れます。トップページと、フォームのページなど、1ページずつ試します。

  3. 「分析」を押して、結果が出るまで待つ

    少し時間がかかります。そのまま待ちます。

  4. 結果の画面で、「モバイル」を見る

    ヘルプでは、結果はモバイルとパソコンの両方のデバイスで出る、とあります。お客さんがスマホで見ることが多いお店は、モバイルの結果を先に見ます(私の考え)。

  5. 「実際のユーザー エクスペリエンス」の部分があるかを見る

    お客さんの実際のデータが出ているかを見ます。出ていなければ、小さなホームページではふつうです(下に書きます)。

  6. その下の、点数や指標を見る

    点数は、ヘルプで「緑色のスコア(90 以上)は良好」とされる、点検用の数字です。この記事では、点数よりも、下の3つの指標を見るのをおすすめします(私の考え)。

画面の名前や並びは、Googleが変えることがあります。ここでは、ヘルプの見出しの呼び方を使いました。

「実際のお客さんのデータ」と「ラボデータ」の違い

左は異なる場所や回線で同じページを開く複数のスマホ、右は条件をそろえた机で測る1台のスマホ。実際の利用データとラボデータの違いを表す水彩イラスト
実際のお客さんのデータさまざまな端末・回線での利用ラボデータ決まった条件での測定

結果には、2種類のデータが出ます。ヘルプでは、次のように説明されています。

  • 実際のお客さんのデータ(フィールド データ):さまざまなデバイスとネットワーク状況で、実際のユーザーから集められた、匿名のデータです。[出典2]実際のユーザー エクスペリエンスをそのまま把握するのに役立ちますが、使える指標が限られる、とあります。[出典2]
  • ラボデータ:決まった条件で、1台の端末でページの読み込みをまねして出したデータです。[出典2]問題を調べるのに役立ちますが、実際に起きている遅さを捕らえていないことがある、とあります。[出典2]
  • そのため、この2つは、値が異なる場合がある、とヘルプにあります。[出典2]

実際のお客さんのデータは、ヘルプによると、Chromeユーザー エクスペリエンス レポート(CrUX)に基づいています。[出典2]ページが最近公開された場合や、実際のユーザーのサンプル数が少ない場合は、十分なデータがない場合もある、とあります。[出典2]

やましなWeb

私の考え

お客さんの数が少ない小さなお店のホームページでは、実際のデータが出ないことがよくあると思います。出ないときは、①の自分のスマホで試した結果と、ラボデータを、合わせて見てください。

③ 見るのは、3つの指標だけ

PSIにはたくさんの数字が出ます。全部は見なくて大丈夫です。Googleは、ユーザー エクスペリエンスの3つの側面(読み込み、インタラクティビティ、視覚的な安定性)に焦点を当てた指標を使っています。[出典3]この記事では、次のように平たく呼びます(言い換えは私の言葉です)。

表示の速さLCPは大きな写真が表示されるまで、反応の速さINPは押してから画面が反応するまで、見た目のずれCLSは文字や写真がずれて動くことを表す3場面の水彩図
判定の目安を数字で見る(良好・改善が必要・低速)

表示の速さ

LCP(Largest Contentful Paint)

ページのいちばん大きなもの(大きな写真や文字のかたまり)が、表示されるまでの時間

良好2.5 秒以下

改善が必要4 秒以下

低速4 秒を超える

反応の速さ

INP(Interaction to Next Paint)

押したり、タップしたりしてから、画面が反応するまでの時間

良好200 ミリ秒以下

改善が必要500 ミリ秒以下

低速500 ミリ秒を超える

見た目のずれ

CLS(Cumulative Layout Shift)

読んでいる途中で、文字や写真がずれて動いてしまう度合い

良好0.1 以下

改善が必要0.25 以下

低速0.25 を超える

数字は、Search Console のヘルプにある「ステータスの定義」の表のとおりです。[出典4]色だけでなく、文字でも分かるようにしています。
  • 表示の速さ(LCP):ヘルプでは、ユーザーがページを開いてから、ビューポート(画面に見える範囲)に表示される最大のコンテンツ要素が表示されるまでの時間、とあります。通常、最大の要素となるのは、画像、動画、大きなブロックレベルのテキスト要素です。[出典4]
  • 反応の速さ(INP):ページへのアクセスの間に起きる、すべてのクリック、タップ、キーボード操作に、ページが応答するのに要する時間を見て、全体的な応答性を評価する指標です。[出典4]
  • 見た目のずれ(CLS):予期しないレイアウトの変化は、テキストが突然移動して読み進めにくくなったり、間違ったリンクやボタンをクリックしたりするなど、さまざまな方法でユーザー エクスペリエンスを損なう可能性がある、とあります。[出典5]
やましなWeb

私の考え

お店の人が、まず見るなら、「表示の速さ」です。①で測った「文字が読めるまでの秒数」に、いちばん近い数字だと思います。「良好」でなくても、すぐに慌てる必要はありません。お客さんが「開かない」と感じているかを、先に考えてください。

④ Search Console で、サイト全体を見る

Search Console は、Googleが出している無料の道具です。「Core Web Vitals レポート」(ヘルプでは「ウェブに関する主な指標レポート」とも書かれています)では、実際の使用状況データに基づく、ページのパフォーマンスを確認できます。[出典4]

このレポートは、特定の URL のステータスを検出するためではなく、サイトの全体的なパフォーマンスを確認して、複数のページに影響を与える問題のトラブルシューティングを行うために設計されている、とヘルプにあります。[出典4]

「データがありません」という画面が出た場合は、Search Console のプロパティがまだ新しいか、CrUX レポートで利用できるデータが不足している、とヘルプにあります。[出典4]小さなホームページでは、出ないことがあります。

Search Console にまだ登録していない、または、自分が見られるように人を追加したいときは、ホームページが検索に出てこないときにまとめています。

遅いときに、考えられること

遅いと分かったときに、ホームページのどこが原因なのかを、web.dev(Googleのウェブ開発の情報サイト)の説明から、3つ紹介します。お店のホームページで、どれが当てはまるかは、作った人でないと分かりません。

  • 大きな写真:LCP(表示の速さ)は、ビューポート内に表示される最大の画像、テキスト ブロック、または動画のレンダリング時間を測る、とあります。[出典6]画面でいちばん大きく出る要素が写真なら、その写真の重さが、表示の速さに関わりそうです(私の考えです)。
  • サーバー:web.dev には、LCP の問題として、サーバーの応答時間の遅延やレンダリングをブロックするリソースなどがある、とあります。[出典3]
  • 見た目のずれの原因:レイアウトのずれの原因としては、サイズが不明な画像や動画、初期のフォールバックよりも大きくまたは小さくレンダリングされるフォント、サイズを動的に変更するサードパーティの広告やウィジェットなどがある、とあります。[出典5]「サードパーティ」は、ほかの会社が出している部品(地図・予約・SNSの表示など)のことです。

写真を載せるときの大きさなどの条件は、料理・商品の写真をスマホで撮るコツにまとめています。

作った人・サーバーの会社に頼むこと

やましなWeb

私の考え

測った結果の画面を、作った人に見せて、次の5つを頼んでみてください。どれが原因かは、見てもらわないと分かりません。

  • 写真を、表示する大きさに合わせて小さくしてください

    スマホで撮ったままの大きな写真を、そのまま載せていないかを聞きます。写真は、画面に出る大きさに合わせて、ファイルを軽くします。

  • ほかの会社の部品が、いくつ入っているか教えてください

    地図・予約・SNSの表示・チャット・アクセスの計測などです。必要のないものは、外してもらいます。

  • 写真や動画に、表示する大きさの指定が入っているか確かめてください

    大きさの指定がないと、読み込まれたあとで、文字がずれて動くことがあります。

  • サーバーの応答が遅くなっていないか、確かめてください

    サーバーは、ホームページを置いている場所です。アクセスが増えたときや、契約のプランによって、遅くなることがあります。

  • 測った結果の画面を見せて、どこから直すか聞いてください

    「全部直す」ではなく、どれを直せば体感が変わりそうか、順番をつけてもらいます。

アドレスの横に「保護されていない通信」と出ているときは、ホームページに「保護されていない通信」と出たときにまとめています。サーバー代など、費用の確かめ方は、契約の前に確かめる項目にまとめています。

点数だけで決めない

Googleの検索セントラルには、Google 検索でランキングに使用される単一の「ページ エクスペリエンス シグナル」はありません、とあります。Googleのコア ランキング システムでは、全般的なページ エクスペリエンスを示す、さまざまなシグナルが評価される、とも説明されています。[出典7]

また、Search Console の Core Web Vitals レポートのようなレポートやサードパーティのツールで良い結果が得られても、Google 検索の検索結果で上位に表示されることが保証されるわけではない、とあります。優れたページ エクスペリエンスには、Core Web Vitals スコア以外の要素もある、とも書かれています。[出典7]

やましなWeb

私の考え

点数は、遅い原因を探す手がかりです。お店のホームページで大事なのは、お客さんが、読みたいときに読めて、電話やフォームを押せることです。点数が「良好」でも、お客さんが「開かない」と感じるなら、その声を先に大事にします。

私(やましなWeb)がしていること

手厚めプランの月額には、次のものが含まれています。

  • サーバー・ドメイン・SSL込み(ドメインはお客様名義)
  • スマホ対応・表示速度・構造化データ対応

料金は料金プランにまとめています。

よくある質問

点数が低いと、ホームページはだめなのですか?
そうとは限りません。点数は、決まった条件でページ読み込みをまねして出した数字(ラボデータ)で、実際のお客さんの体験とは値が異なる場合がある、とGoogleのヘルプにあります。また、Googleの検索セントラルには、SEO 上の理由のためだけに満点を取ろうとするのは、有効な時間の使い方とは言えないでしょう、とあります。まず、お客さんが「開かない」と感じているかどうかを見るのがよいと私は考えています。
「データがありません」「十分なデータがありません」と出ました。故障ですか?
故障ではありません。PageSpeed Insights のヘルプには、ページが最近公開された場合や、実際のユーザーのサンプル数が少ない場合は、十分なデータがない場合もある、とあります。Search Console にも、データが不足している場合の「データがありません」の説明があります。アクセスの少ない小さなホームページでは、よくあることだと私は考えています。その場合は、自分のスマホで試した結果と、ラボデータを使います。
測るたびに、点数が変わります。
PageSpeed Insights のヘルプには、指標のばらつきの一般的な原因として、ローカル ネットワークの可用性、クライアント ハードウェアの可用性、クライアント リソースの競合などがある、とあります。1回の数字で決めず、何回か測って、だいたいの傾向を見てください(私の考えです)。
表示が速くなると、検索の順位は上がりますか?
上がる、とは言えません。Googleの検索セントラルには、Core Web Vitals のレポートなどで良い結果が得られても、検索結果で上位に表示されることが保証されるわけではない、と書かれています。単一のシグナルもなく、さまざまなシグナルが評価される、とも説明されています。この記事は、順位や問い合わせが増えることを約束するものではありません。
直してもらうのに、いくらかかりますか?
契約や、遅い原因によって違います。写真を軽くするだけで済むこともあれば、ホームページの作りの見直しが必要なこともあります。作った人や会社に、原因・直す内容・費用を、紙で出してもらってください。やましなWebの手厚めプランの月額には、「スマホ対応・表示速度・構造化データ対応」が含まれています。

測ってみたが、数字の読み方が分からない。お客さんに「遅い」と言われた。そんなときは、画面を見ながらお話しします。ご相談は無料です。

070-8456-4032

受付時間 平日 10:00〜18:00

時間外・土日にいただいたお問い合わせは、翌営業日にご連絡します。

24時間受付のフォームで相談する
電話で相談 070-8456-4032 フォーム 24時間受付