この記事の目次
表示速度の確認方法とは
表示速度は、見る人の使いやすさに直結します。ページがなかなか表示されない、読み込み中に画面がずれて押し間違える、といった体験は、内容が良くても離脱の原因になります。
表示速度は、Google が無料で提供する PageSpeed Insights（PSI） で測るのが手軽です。URL を入れるだけで、スマホとパソコンの両方の結果と、改善のヒントが表示されます。この記事では、測り方と、結果の読み方、初心者がまず直すべき所を整理します。
基本（Core Web Vitals の3つの指標）
Google は、ページの使いやすさを測る指標として Core Web Vitals を示しています。Google 検索セントラルが示す「良好」の目安は次のとおりです（2026年10月時点。最新は公式で確認してください）。
| 指標 | 何を測るか | 良好の目安 |
|---|---|---|
| LCP（Largest Contentful Paint） | 一番大きな画像や文章のかたまりが表示されるまでの時間 | 2.5秒以内 |
| INP（Interaction to Next Paint） | クリックやタップなどの操作への反応の速さ | 200ミリ秒（0.2秒）未満 |
| CLS（Cumulative Layout Shift） | 読み込み中に画面の要素がずれる量。単位の無い点数で、小さいほど良い | 0.1未満 |
PSI の結果には、2種類のデータが出ます。
| データ | 中身 | 特徴 |
|---|---|---|
| フィールドデータ | Chrome の実際の利用者のデータ（CrUX）。過去28日間 | 本当の体験に近い。アクセスが少ないページは表示されないことがある |
| ラボデータ | Lighthouse が決まった条件でまねして測った結果 | 毎回すぐ測れて、原因探しに向く。実際の体験とずれることがある |
具体例（結果の読み方）
公開したばかりの小さなサイトでは、フィールドデータが「十分なデータがない」と表示されることがよくあります。PSI の説明でも、最近公開されたページや利用者が少ないページは、データが足りない場合があるとされています。この場合は、ラボデータ（Lighthouse の結果）を見て改善します。
ラボデータの「診断」や「改善できる項目」に、次のような項目が出ていれば、まず直す候補です。
| 出やすい項目 | 意味 | 直し方の例 |
|---|---|---|
| 画像のサイズが大きい | 表示サイズより大きな画像を読み込んでいる | 表示サイズに合わせて縮小・圧縮する |
| 画像の幅と高さが無い | 読み込み後に画面がずれる（CLS） | <img> に width と height を書く |
| 使っていない CSS・JavaScript | 不要なファイルを読み込んでいる | 使わない読み込みを外す |
表示速度の確認の実践ステップ
- 公開 URL を、PageSpeed Insights の入力欄に入れて「分析」を押します。
- 「携帯電話」と「デスクトップ」のタブを切り替え、両方の結果を見ます。スマホの結果を先に見るのがおすすめです。
- フィールドデータがあれば、LCP・INP・CLS が「良好」かを見ます。無ければラボデータを見ます。
- 「改善できる項目」を上から読み、画像の縮小など、すぐ直せるものから直します。
- 直したらアップロードし、もう一度測って変化を確かめます。開発中のページは、ブラウザの開発者ツールに入っている Lighthouse でも同じように測れます。
表示速度の確認方法の注意点
- 点数は毎回少し変わります。 ラボデータは、測るたびにネットワークなどの条件で揺れます。1回の点数で一喜一憂せず、何度か測って傾向を見ます。
- 満点が目的ではありません。 小さなサイトなら、画像を適切な大きさにするだけで十分に速いことが多いです。実際のスマホで「待たされる」「ずれる」と感じないかを確かめるのが先です。
- 速度だけで検索順位が決まるわけではありません。 Google は、Core Web Vitals を、ほかのページエクスペリエンスの要素とともにランキングを決めるときに考慮する要素の一つと説明しています。ただし、あくまで要素の一つなので、先に見直すのは内容の役立ち度です。
表示速度の確認方法でよくあるミス
- スマホで撮った大きな写真を、そのまま縮小表示している。
<img>にwidthとheightを書かず、読み込み後に文章が下にずれる。- パソコンの結果だけ見て、スマホの結果を見ていない。
表示速度の確認方法のチェックリスト
- [ ] PageSpeed Insights で、スマホとパソコンの両方を測った
- [ ] LCP・INP・CLS の目安を知っている
- [ ] 大きすぎる画像を縮小した
- [ ]
<img>に幅と高さを書いた - [ ] 直したあと、もう一度測った
表示速度の確認方法のFAQ（よくある質問）
Q. 何点以上を目指せばいいですか？
A. 点数より、Core Web Vitals の3つが「良好」に入っているか、実機で待たされないかを目安にします。
Q. フィールドデータが表示されません。
A. 利用者のデータが足りないと表示されません。公開直後のサイトではよくあることなので、ラボデータで改善します。
Q. Lighthouse と PageSpeed Insights は何が違いますか？
A. PageSpeed Insights のラボデータは Lighthouse で測っています。Lighthouse はブラウザの開発者ツールからも使えるので、公開前のページを測るときに便利です。
筆者の見解（表示速度の確認方法）
初心者が速度改善に取り組むとき、私はまず画像だけを見直すことを勧めます。小さな手作りのサイトで重くなる原因の多くは画像で、直し方も分かりやすいからです。数値の細かな最適化は、内容や使いやすさが固まってからで十分だと考えます。速度の数字は、見る人の体験を代わりに表した物差しにすぎない、という視点を忘れないことが大切だと思います。
表示速度の確認方法の関連項目
- ブラウザの開発者ツールの使い方｜要素・Console・スマホ表示
- picture と srcset の使い方｜sizes・レスポンシブ画像の書き方
- SEOの基本と公開前チェックリスト【ホームページ制作入門 第9回】（近日公開）
- Webサイトの公開手順｜SFTPでサーバーにアップロード
- IntersectionObserverとは｜画像の遅延読み込みとスクロール表示の実装（近日公開）
