無料の表示速度ツール

サイト表示速度テスト

ミドルレンジのスマートフォンと低速4G回線の条件でページを読み込み、メインコンテンツが表示されるまでの速さと、ページのずれの大きさを計測し、ページを重くしている原因を示します。Googleがサイトの実ユーザーデータを持っている場合は、それも表示します。

無料。通常1分以内に完了します。

このツールで確認する項目

  • 低速4Gのスマートフォン

    Moto G Powerクラスのスマートフォン（412 × 823）として、150 msのレイテンシ、下り約1.6 Mbps、上り750 Kbps、4倍遅いCPUの条件で、Chromiumでページを読み込みます。これはLighthouseがモバイルテストに使うプロファイルです。

  • Largest Contentful Paint（LCP）

    最初の画面内で最も大きな画像またはテキストブロックの描画が完了した時点と、それがどの要素だったかです。

  • Cumulative Layout Shift（CLS）

    ページの読み込み中に、表示中のコンテンツが予期せずどれだけ動いたかです。

  • Total Blocking Time（TBT）

    スクリプトがブラウザを占有し、タップに応答できなかった時間です。50 msを超える長いタスクそれぞれの超過分を合計したもので、Interaction to Next Paintのラボでの代替指標です。

  • ページがダウンロードするもの

    合計のバイト数とリクエスト数を、画像、スクリプト、CSS、フォントに分けて示し、サードパーティからの割合も表示します。

  • 重い画像とレンダリングを妨げるファイル

    150 KBを超える画像や、表示領域よりはるかに幅の広い画像、そして最初の描画を遅らせるCSSファイルとスクリプトファイルです。

  • Chromeの実ユーザーデータ

    GoogleのChrome UX Reportから、オリジン全体のスマートフォンでの75パーセンタイル値（LCP、INP、CLS）を表示します。Googleがそのサイトについて十分なトラフィックを持っている場合に限ります。

確認できないこと

  • 毎回同じ数値を出すことはできません。ラボの結果はネットワーク、サーバー負荷、サードパーティのスクリプトによって変動するため、1回ごとの結果ではなく傾向で比較してください。
  • PageSpeed Insightsの結果と完全に一致させることはできません。どちらも同様のスマートフォンのプロファイルを使いますが、異なるマシンとネットワークで実行されます。
  • ラボではINPを計測できません。INPには実際の操作が必要なため、ラボテストではTBTを、フィールドデータがある場合はINPを表示します。
  • すべてのサイトのフィールドデータを表示することはできません。Chrome UX Reportは過去28日間を対象とし、Chromeのトラフィックが十分なオリジンだけを含みます。
  • 入力した1ページ以外はテストできません。有料の表示速度改善レポートでは、主要ページ3件をテストし、原因を重要度順に並べて修正方法を示します。

なぜ重要なのか

オフィスのWi-Fiと高速なノートパソコンでは一瞬で開くページも、電波の弱いミドルレンジのスマートフォンでは数秒かかることがあります。このテストはその状況を再現します。重い画像やスクリプトが最も大きな影響を与えるのが、まさにその環境だからです。

Core Web Vitalsは、そうした体験を測るGoogleの指標で、読み込み（LCP）、応答性（INP）、視覚的な安定性（CLS）からなります。Googleはこれらをランキングに使用していますが、優れたページエクスペリエンスが関連性の高いコンテンツに勝るわけではないとしています。より大きな影響は人に対するものです。遅いページや表示がずれるページでは、訪問者が何かを読む前に離れてしまいます。

原因はたいてい具体的です。数メガバイトもある未圧縮のメイン画像、コンテンツより先に読み込まれるチャットウィジェット、テキストを隠してしまうウェブフォント、表示後にページ上部へ挿入されるバナーなどです。このテストはLCP要素と最も重いファイルを示すので、どれが当てはまるかがわかります。

結果の読み方

Largest Contentful Paint（LCP）
2.5秒未満なら良好、4秒を超えると不良です。LCP要素が画像の場合は、そのサイズと読み込みの優先度が最も重要です。テキストの場合は、ウェブフォントとレンダリングを妨げるCSSを確認してください。
Cumulative Layout Shift（CLS）
0.1未満なら良好、0.25を超えると不良です。画面のどれだけの部分が、どれだけの距離を動いたかを組み合わせた、単位のないスコアです。
Total Blocking Time（TBT）
200 ms未満なら良好、600 msを超えると不良です。TBTが高い場合、実際のユーザーのタップに対する応答が遅くなることが予想されます。
バイト数とリクエスト数
公式の上限はありません。どの種類が大半を占めているかを見てください。通常は画像が最も大きな割合を占め、サードパーティの割合が高い場合はアプリ、タグ、ウィジェットが原因です。
重い画像
150 KBを超える画像、または表示サイズよりはるかに大きな幅でダウンロードされる画像を、ファイルサイズと寸法とともに示します。
レンダリングを妨げるファイル
ブラウザが何かを表示する前にダウンロードしなければならないCSSと同期スクリプトです。
フィールドデータ（75パーセンタイル）
過去28日間の、スマートフォンでの実際のChromeユーザーのデータです。75パーセンタイルとは、ページ読み込みの4回に3回が少なくともこの速さだったことを意味します。INPは200 ms未満なら良好、500 msを超えると不良です。
フィールドデータなし
このオリジンについて、Googleが十分なChromeのトラフィックを持っていません。これは速度について何も示していないので、ラボの結果を参考にしてください。

よくある問題の修正方法

  • LCP画像が遅い

    メイン画像は、srcsetを使って表示サイズに合わせ、WebPまたはAVIF形式で配信します。遅延読み込みはせず、fetchpriority="high"を追加し、スクリプトやCSSの背景画像で読み込むのではなく、img要素としてHTMLに記述します。

  • 読み込み中にコンテンツがずれる

    画像、動画、埋め込みにwidth属性とheight属性、またはCSSのaspect-ratioを指定します。バナー、Cookieの通知、広告にはあらかじめスペースを確保するか、コンテンツを押し下げないオーバーレイとして表示します。ウェブフォントには、font-display: optionalを使うか、サイズを合わせた代替フォントを使います。

  • Total Blocking Timeが長い

    まず、もう使っていないアプリ、タグ、プラグインを削除します。使用をやめた後もスクリプトが残っていることがよくあります。チャット、レビュー、アクセス解析は、deferを付けるか、ページが操作可能になった後に読み込みます。Shopifyでは「オンラインストア」›「テーマ」›「カスタマイズ」›「アプリ埋め込み」を確認してください。

  • レンダリングを妨げるCSSとスクリプト

    最初の描画前に実行する必要のないスクリプトにdeferを付け、最初の画面に必要な少量のCSSをインライン化し、ページで使っていない機能のスタイルシートを削除します。

  • 重すぎる画像

    画像はアップロード前にリサイズし（全幅バナーでも幅2000 px程度あれば十分です）、圧縮します。ShopifyとWordPressは、テーマが要求すれば小さいサイズの画像を自動で配信できるので、テーマがレスポンシブな画像サイズを使っているか確認してください。

このツールに関するご質問

PageSpeed Insightsと結果が異なるのはなぜですか？

ラボテストの結果は、マシン、ネットワーク、そのときの状況に左右されます。PageSpeed InsightsはGoogleのサーバー上でLighthouseを実行して低速回線をシミュレートしますが、このツールは実際のブラウザで通信速度の制限（スロットリング）を適用します。同じ数値ではなく、近い範囲の結果になると考えてください。

LCPはどれくらいなら良好ですか？

web.devによると、ページ読み込みの75%以上で2.5秒以下であれば良好です。4秒を超えると不良です。

サイトの実ユーザーデータがないのはなぜですか？

Chrome UX Reportに含まれるのは、一般に公開されていて発見可能であり、使用統計の送信を有効にしているChromeユーザーから十分なアクセスがあるオリジンだけです。多くの小規模サイトはその水準に達しませんが、ラボテストで修正すべき点は確認できます。

パソコンではなく低速のスマートフォンでテストするのはなぜですか？

問題が最初に現れるのがスマートフォンだからです。高速なノートパソコンでは、ミドルレンジのスマートフォンで数秒の遅れを生む重い画像やスクリプトが目立たなくなってしまいます。また、Lighthouseもモバイルテストに同じスマートフォンのプロファイルを使っています。

First Input Delayはどうなりましたか？

2024年3月に、Interaction to Next Paint（INP）がFirst Input Delayに代わってCore Web Vitalsの指標になりました。INPは最初の操作だけでなく、訪問全体を通じた操作の遅延を評価します。

出典

関連ツール

表示速度改善レポート（$55、1回払い）は、無料スキャン全体を出発点に、追加のページ、すべての指摘に対する変更内容、PDF、修正を検証する再テストを加えます。

表示速度改善レポートについて