ナビゲーション全体を読み込み中です。

Elevate 2026へのカウントダウンが始まりました。 今すぐ登録 シカゴ、ロンドン、またはシドニーで私たちと一緒に過ごしませんか。

Partners

ドキュメント

LMアカデミー

LMコミュニティ

価格

Platform
解決策
業種
職種
結果はありません。
無料トライアル

14日間フルアクセス LogicMonitor プラットフォーム

ウェブパフォーマンス監視

ウェブサイトのパフォーマンスを測定する方法

Lighthouseスコアからフィルムストリップビューまで、このガイドではウェブサイトのパフォーマンスを測定し、データを改善につなげるためのツールとテクニックを解説します。

11〜16分
デントン千倉

章

    ニュースレター

    最新情報のメール配信を登録

    最新のブログ、ホワイトペーパー、電子ガイドなどを直接受信ボックスにお届けします。

    シェア

    クイックダウンロード:

    ウェブサイトのパフォーマンスを測定するには、単一のスコアを確認するだけでなく、複数のデータタイプを総合的に読み取る必要があります。

    • Lighthouseスコアは、5つの指標を1つの数値にまとめたものです。有用なベンチマークではありますが、それだけで具体的にどこを修正すべきかを教えてくれるわけではありません。

    • ウォーターフォールチャートは、アセットがどのように順番に読み込まれるかを示します。ページレンダリングをブロックする大きなスクリプトは、ウォーターフォールチャートでは明確に表示されますが、生の数値だけでは分かりません。

    • フィルムストリップビューは、実際のユーザーが体験するように、サイトがフレームごとに読み込まれる様子を表示します。これにより、数値だけでは説明できないFirst Contentful Paintなどの指標に、より深い意味合いを加えることができます。

    • 測定値が時間経過とともに比較可能になるよう、一貫したテスト構成（場所、デバイス、接続タイプ）を使用してください。

    ウェブサイトのパフォーマンスを測定するための手法やツールは数多く存在する。しかし、基本的な考え方は変わらない。重要な指標を分析し、それらをさらに最適化するために必要なサイトの変更を行うためのツールを活用する、ということだ。

    この記事では、さまざまな指標とツールについて解説します。また、これらのツールが生成する各種レポートの読み方や、ユーザーエクスペリエンスをさらに最適化する方法についても説明します。

    ウェブサイトのパフォーマンス測定における主要な概念の概要 

    アプローチ 詳細説明
    メトリックウェブサイトの速度、応答性、および全体的なユーザーエクスペリエンスを評価する定量的測定。
    ライトハウスのパフォーマンススコア5つの異なるパフォーマンス指標を統合した0～100のスコア
    ウォーターフォールチャートアセットの読み込み順序と各アセットの読み込みにかかった時間の概要を表示します。また、複数の指標を時系列の折れ線グラフで報告します。
    フィルムストリップビューユーザーがウェブサイトを閲覧する順序をフレームごとに表示することで、多くの一般的な指標に文脈を提供します。
    比較観変更の影響を確認したり、異なるウェブサイトを比較したりするために、2つの異なるサイトテストの比較レポートを並べて表示します。

    ウェブサイトのパフォーマンスを測定する方法 ― 概要

    ウェブサイトのパフォーマンスを測定する方法について議論する前に、まず何を測定すべきかを考えてみましょう。

    ウェブサイトのパフォーマンスを測定する指標

    メトリック測定対象意味
    初回バイト到達時間（TTFB）ユーザーのブラウザがリクエストを送信してから、サーバーから最初のデータバイトを受信するまでにかかる時間。TTFBが短いほど、サーバーの応答時間が速く、ユーザーエクスペリエンスが向上します。理想的には、TTFBは800ミリ秒未満であるべきです。
    レンダリング開始時間（TTSR）ページの読み込みが開始されてから、最初の視覚的な編集内容が画面に表示されるまでの時間。 この指標は、ユーザーがページ上のコンテンツを見始めることができるタイミングを示すものであり、ウェブサイトの品質に対するユーザーの認識に影響を与える要素です。
    スピードインデックスページの読み込み中に、コンテンツが視覚的に表示されるまでの速度を測定します。スピードインデックスが低いほど、ページコンテンツの表示が速くなり、ユーザーエクスペリエンスが向上します。
    First Contentful Paint（FCP）画面上に最初のコンテンツがレンダリングされた時点を示します。これは、テキスト、画像、またはその他の表示可能な要素である可能性があります。これは、ページが読み込みを開始したことをユーザーに知らせ、待ち時間の感覚を軽減します。一般的に、FCPスコアは1.8秒未満が良好です。
    最大のContentful Paint（LCP）画面に表示される最大のコンテンツ要素（画像や大きなテキストブロックなど）が画面に読み込まれるまでにかかる時間を測定します。これは、ページのメインコンテンツが読み込まれたタイミングを示します。一般的に、LCPスコアが良好であれば、2.5秒未満となります。
    満載時間画像、スクリプト、サードパーティコンテンツなど、ページ上のすべてのリソースが完全に読み込まれるまでにかかる時間。この指標は全体の読み込み時間を反映していますが、多くのユーザーがページが完全に読み込まれる前に操作を行うため、ユーザーの認識にとってそれほど重要ではありません。
    ファーストインタラクティブページが最小限のインタラクティブ性を持つ状態、つまりユーザーがページとやり取りできるものの、必ずしも遅延なく操作できるとは限らない状態を測定します。この指標は、ユーザーが大きな遅延なくページとのやり取りを開始できるタイミングを理解する上で重要です。
    次のペイントへの相互作用ブラウザがユーザー操作に対するフィードバックを提供するのにかかる時間を測定します。 INP値が低いほど、ページの応答性が高いことを示すため、優れていると言えます。
    累積レイアウトシフト（CLS）ページのライフサイクル全体を通して発生する、予期せぬレイアウト変更の総数を測定します。 レイアウトシフトとは、表示されている要素がレンダリングされたフレーム間で位置が変わる現象です。CLSスコアが低いほど、コンテンツの読み込みが安定しており、ユーザーが意図しないものをクリックしてしまう可能性が低くなります。

    ウェブサイトのパフォーマンスを測定するためのツール

    GoogleのリソースPageSpeed は、ウェブパフォーマンスを評価するための無料ツールです。主にCore Web Vitalsでレポートを作成し、サイトのパフォーマンスを「悪い」「改善が必要」「良い」のいずれかで報告します。また、モバイル版とデスクトップ版のウェブページの速度改善に関する提案も提供します。

    WebPageTest は、Core Web Vitals を超えるより包括的なレポートを提供するツールです。テストは世界各地の様々な場所と実際のブラウザで実施されます。無料プランでは、ウォーターフォールチャートやフィルムストリップなどの強力な視覚化機能が利用できます（詳細は次のセクションで説明します）。 

    プロ版では、二酸化炭素排出量を測定できます。また、実験を行うことも可能です。これにより、実際のウェブサイトを変更することなく、変更を加えてパフォーマンスへの影響を観察できます。この機能は、ウェブサイト開発に必要な時間と労力を大幅に削減できます。さらに、APIアクセスも利用できるため、ツールを開発者のワークフローに統合できます。

    ウェブサイトのパフォーマンス測定結果を読んでいます

    WebPageTestのようなツールは、さまざまなスコアやグラフを用いてパフォーマンス指標を報告します。以下に、一般的な方法をいくつかご紹介します。

    ライトハウスの得点

    Lighthouse Lighthouseは、基本的なパフォーマンス分析を行うためのオープンソースのChrome開発者ツールです。さまざまなツールがLighthouseを統合し、同じスコアリング方法を使用してパフォーマンスを測定します。

    Lighthouseは、5つの異なるカテゴリーにわたって0から100までのスコアを割り当てます。

    • プログレッシブウェブアプリ（PWA） モバイル最適化、HTTPSセキュリティ、その他の最新機能をチェックします。
    • パフォーマンス FCP、LCP、スピードインデックス、CLS、インタラクティブになるまでの時間、および合計ブロッキング時間を評価します。
    • ユーザー補助 さまざまなウェブサイトデザイン要素を評価します 斧のユーザー影響評価例えば、アクセスしやすいボタンや色のコントラスト比など。
    • ベストプラクティス ウェブサイトが、有効なDOCTYPE宣言、最適化された画像、適切なページタイトルなど、さまざまなベストプラクティスを実装しているかどうかを評価してください。
    • SEO クロール可能なリンク、有効なrobots.txt、メタディスクリプションなど、SEOのベストプラクティスをチェックします。
    ライトハウスのパフォーマンススコア

    Lighthouseのパフォーマンステストは、さまざまなデバイス構成で実行できます。モバイルとデスクトップのデフォルト設定は、画面サイズやデバイス識別に使用されるユーザーエージェントだけでなく、他にも多くの点で異なります。異なるデバイス構成を選択することで、テスト環境の他の要素にも影響を与えることができます。

    • ネットワーク遅延：クライアントとサーバー間でデータが伝送されるのにかかる時間。
    • ネットワーク帯域幅：クライアントとサーバー間で1秒間に交換できるデータ量はどれくらいか？
    • CPU速度：ブラウザがコードを実行したり、ページコンテンツのレンダリングなどのタスクを実行したりするのにどれくらいの速さが必要か？

    高速インターネット接続を備えたPCでテストを実行する場合、テスト構成で指定されたパラメータにネットワーク速度を制限できます。Lighthouseのモバイルスコアと指標は、シミュレーションされたテスト環境がモバイル端末では非常に遅く動作するため、大幅に低くなります。

    では、Lighthouseテストのパフォーマンススコアは実際にはどのように計算されるのでしょうか？以下の表にまとめました。

    メトリック得点貢献度測定対象
    合計ブロッキング時間30%ページ上で大量のCPU処理が発生すると、ユーザー操作が遅くなる可能性はありますか？
    最大の満足のいくペイント25%メインページのコンテンツはどれくらいの速さで表示されますか？
    累積レイアウトシフト25%ページコンテンツが表示された後、移動してユーザーを混乱させることはありませんか？
    最初の満足のいくペイント10%ページの最初のコンテンツが表示されるまでの時間はどれくらいですか？
    速度指数10%ページコンテンツの大部分が表示されるまで、どれくらい時間がかかりますか？

    ウォーターフォールチャート

    ウォーターフォールチャートは、ウェブページ上のすべてのリソースをマッピングし、コンテンツの読み込みにかかる時間と読み込みタイミングに基づいてコンテンツを整理します。

    JavaScriptがサイトの表示速度を低下させていませんか？大きな画像が帯域幅を消費しすぎていませんか？リソースが正しくキャッシュされているか、そしてそれがページパフォーマンスにどのような影響を与えているかも確認したいですよね。そんな時にウォーターフォールチャートが役立ちます。

    WebPageTestのウォーターフォールチャート

    ウォーターフォールチャートの重要な要素は次のとおりです。

    キー

    凡例は3種類の情報を示しています。

    • 接続状態に関する情報（DNSルックアップ、接続確立）
    • 要求されたリソースの種類（例：HTML、画像など）
    • その他のイベント（待機、JavaScriptの実行）

    薄い色は、ユーザーのブラウザがリソースを要求した時点を示します。濃い色は、リソースの実際のダウンロード時点を示します。

    リクエストリスト

    ブラウザがウェブページ上で識別したリソースの一覧と、それらが要求された順序を示します。左側には要求番号が表示され、黄色の鍵アイコンは、要求が安全な接続（HTTPS）経由で行われたかどうかを示します。

    リクエストのタイムライン

    タイムラインは、横軸（x軸）に時間を、縦軸（y軸）に各リクエストを表示します。これには、検出（待機）フェーズ、リクエスト送信のタイミング、および最終的なリソースのダウンロードが含まれます。 

    CPU使用率

    これは、任意の時点での現在のウェブページのCPU使用率を0～100%の範囲で表示します。

    帯域幅入力

    これは、データがブラウザに入力されたことを示す信号です。この視覚化機能を使えば、ブラウザが時間を浪費している時と効率的に動作している時を素早く確認できます。ただし、絶対スケールはそれほど正確ではないため、無視しても構いません。 

    ブラウザのメインスレッド

    このグラフは、ブラウザのメインスレッドが特定の時点（x軸）でどのような処理を行っているかを視覚化したものです。y軸は0～100%の割合を示しています。  

    このページはインタラクティブです

    このグラフは、メインスレッドがブロックされているタイミングを示しています。

    縦線

    「ウォーターフォールビュー」ヘッダーの下にある各色の縦線の凡例は、以下に示すように確認できます。

    ウォーターフォールビューのヘッダー例

    下の表は、グラフ内の異なる色の線の意味をまとめたものです。

    線の色メトリック 詳細説明
    グリーンレンダリングを開始ユーザーがページ上にレンダリングされたピクセルを初めて目にする瞬間です。これらのピクセルは、背景色や境界線など、さまざまな要素から生成される可能性があり、必ずしも実際のコンテンツを表しているとは限りません。この時点までは、画面は完全に空白のままです。
    ライトグリーン最初の満足のいくペイント ブラウザがレンダリングするポイント 何でも ナビゲーション前とは視覚的に異なる画面へ。
    濃い緑色の点線最大の満足のいくペイントウェブサイトが最初に読み込まれた時点における、ビューポート内で表示されている最大の画像またはテキストブロックのレンダリング時間を提供します。
    オレンジ色の点線レイアウトシフトテストでは、予期せぬレイアウトのずれをすべて検出します。ユーザーの操作（ボタンを押すなど）なしにレイアウトが変更された場合、それは予期せぬずれと呼ばれます。 
    イエローDOMインタラクティブ ブラウザがすべてのHTMLの解析を終え、DOMの構築が完了した時点。残念ながら、これは信頼できる指標ではありません。
    ピンクDOMコンテンツが読み込まれました HTMLが読み込まれて解析され、ブラウザがドキュメントの末尾に到達した時点。すべてのブロッキングスクリプトが読み込まれて実行された時点。この時点で、DOMは完全に定義されています。 
    ラベンダーロード時ウィンドウの読み込みイベントが発生する時点。すべてのオブジェクトがDOMに存在し、すべての画像とスクリプトの読み込みが完了しています。凡例のこの線の太さに注目してください。これは、この線がウォーターフォール図における単一の時点ではなく、期間を表していることを示しています。
    青書類完了onloadイベントが発生し、すべての静的画像コンテンツが読み込まれた時点。JavaScriptの実行によって発生するコンテンツの変更は含まれない場合があります。

    フィルムストリップビュー

    Lighthouseスコアやウォーターフォールチャートは、ウェブサイトの裏側でのパフォーマンスを示します。しかし、ユーザーの感覚はウェブパフォーマンスの重要な要素であり、数値だけでは理解しにくいものです。ページ読み込み中にユーザーが「感じる」ことを測定したいのですが、ウェブページは読み込みが速すぎるため、人間の目ではそのプロセスを個別のステップに分解することができません。 

    そこでフィルムストリップ表示の出番です。これは、ページの折り目より上の部分のスクリーンショットを定期的に撮影し、それぞれの画像を時系列順に表示します。これにより、1878年にエドワード・マイブリッジが撮影した疾走する馬を捉えた一連の静止写真のように、ユーザーにとってページがどのように展開していくかを視覚的に把握できます。

    ストップモーションフィルムストリップ 動く馬 エドワード・マイブリッジ著

    フィルムストリップは、エンドユーザーのページ読み込み体験を視覚化するのに役立ちます。変化のない画像や空白の画像が長時間続く場合は、ページの読み込み速度が遅すぎることを示しています。また、ユーザーにとって重要なコンテンツが実際に表示されるタイミングも確認できます。このように、フィルムストリップは、コンテキストに依存しない指標とユーザーの認識との間のギャップを埋める役割を果たします。

    画像を左右にドラッグすることで、興味のある場所に位置合わせできます。以下の例では、フィルムストリップとページのレンダリング開始点が位置合わせされています。

    フィルムストリップの例

    比較観

    最終的に、ウェブサイトのパフォーマンスを測定するのは、それを改善するためです。これには、分析結果を収集し、必要なコード変更を実施することが含まれます。

    比較表示では、変更によるパフォーマンスへの影響が一目でわかります。2つのテスト実行結果を並べて比較します。

    例えば、WebPageTestでは、テスト履歴タブで最近のテスト実行結果を確認できます。  

    比較したいテストを選択し、「選択したテストを比較」ボタンをクリックします。すると、前述のフィルムストリップ表示に似たレポートが表示されますが、この表示では2つの結果が並べて表示されます。変更による影響を視覚的に確認できます。

    フィルムストリップの例

    ウォーターフォール図、グラフ、棒グラフも表示され、さまざまな指標を並べて比較できます。

    WebPageTestは、ウェブサイトのパフォーマンスを分析し、最適化のための具体的な推奨事項を提供します。WebPageTest Proでは、ライブサイトに一切変更を加えることなく、提案された変更の影響をテストする実験を実行できます。これにより、ユーザーに影響を与えることなくさまざまな変更を試し、最も効果的な変更のみを展開することが可能になります。

    ウェブサイトのパフォーマンス測定におけるベストプラクティス

    以下のベストプラクティスは、正確で一貫性のある、意義のある結果を確保するのに役立ちます。

    ブラウザキャッシュをクリアする

    キャッシュされたファイルは、その後のアクセス時にページの読み込み時間を大幅に短縮してしまうため、誤った結果を招く可能性があります。初回アクセス時と同様の体験を再現するためには、必ずブラウザのキャッシュをクリアするか、シークレットモードを使用してください。

    ブラウザ拡張機能を無効にする

    ブラウザ拡張機能は、余分なスクリプトを追加したり、ページのレンダリング方法を変更したりすることで、ページの読み込み時間に影響を与える可能性があります。パフォーマンスデータの偏りを避けるため、拡張機能は無効にしてください。

    複数のシステムからのテスト

    デバイスやブラウザによってパフォーマンス特性は異なります。デスクトップ、タブレット、モバイルなどの様々なデバイスと、Chrome、Firefox、Safariなどの様々なブラウザでテストを行い、サイトのパフォーマンスを包括的に把握しましょう。

    すべてのサイトバージョンを分析する

    モバイル版とデスクトップ版のサイトは、画面サイズ、ネットワーク環境、コンテンツ配信戦略の違いにより、動作が異なる場合があります。両方のバージョンが個別に最適化され、テストされていることを確認してください。

    ユーザーの位置情報を考慮する

    地理的な位置は、サーバーやコンテンツ配信ネットワーク（CDN）のエンドポイントからの距離によって、レイテンシや読み込み時間に影響を与えます。地域ごとのパフォーマンスの違いを把握するために、ユーザー層を代表する場所からテストを実施してください。

    重要なページをテストする

    ホームページ、商品ページ、決済プロセス、ランディングページなど、ユーザーエクスペリエンスにとって重要なページに注力しましょう。これらのページはアクセス数が最も多く、ユーザー満足度に最も大きな影響を与えます。

    ドキュメントテストシナリオ

    テスト対象となるシナリオ（例えば、具体的なユーザーフロー、ページ要素、動的コンテンツなど）を継続的に文書化することで、時間の経過に伴う結果の比較や、パフォーマンスに影響を与える可能性のある変更点の特定に役立ちます。

    Core Web Vitals を超える

    WebPageTestは詳細なパフォーマンス分析を提供しますが、包括的なモニタリング手法の構成要素の一つに過ぎません。合成テストに加えて、リアルユーザーモニタリング（RUM）を実施することで、ユーザーの行動や体験に関するリアルタイムの洞察を得ることができ、ウェブサイトのパフォーマンスを包括的に把握できます。

    LMインターネットパフォーマンスモニタリングCatchpointが提供するこのソリューションは、業界最大規模のオブザーバビリティネットワークを活用しており、世界中に3,000以上の監視ポイントを有しています。この広範なネットワークにより、重要な拠点やサービスプロバイダー全体にわたるユーザーエクスペリエンスを測定できるため、パフォーマンスの問題がユーザーに影響を与える前に検知して解決することができます。

    パフォーマンスの問題は、DNS、API、その他のサービスなど、インターネットスタック内のサードパーティに起因する場合があります。インターネットパフォーマンス監視は、こうした盲点を回避し、ウェブサイトのパフォーマンス分析に含めるのに役立ちます。

    ウェブサイトのパフォーマンスをコントロールしよう

    ウェブサイトのパフォーマンスを測定することは第一歩です。インフラストラクチャからエンドユーザーエクスペリエンスまで、インターネットスタック全体にわたってその知見に基づいて行動することで、真の改善が実現します。

    よくあるご質問

    ウェブサイトのパフォーマンスを測定する上で最も重要な指標は何ですか？

    重要な指標には、コアWebバイタル（LCP、INP、CLS）、初回バイト到達時間（TTFB）、レンダリング開始時間（TTSR）、およびページ全体の読み込み時間が含まれます。Lighthouseスコアはこれらの指標を統合的に表示し、ウォーターフォールチャートとフィルムストリップビューは、これらの数値の背後にある意味を理解するのに役立ちます。

    Lighthouseのパフォーマンススコアとは何ですか？

    Lighthouseスコアは、0から100までの複合評価で、First Contentful Paint、Speed Index、Largest Contentful Paint、Total Blocking Time、Cumulative Layout Shiftという5つの加重指標に基づいてページのパフォーマンスを測定します。90以上のスコアは一般的に良好とみなされます。

    ウェブパフォーマンスにおけるウォーターフォールチャートとは何ですか？

    ウォーターフォールチャートは、ブラウザがページを読み込む際に行うネットワークリクエストのシーケンスを示します。各アセットは、読み込み時間を示すバーとして表示されます。これにより、読み込みの遅いスクリプト、大きな画像、遅延しているサードパーティリクエストなど、ボトルネックを特定するのに役立ちます。

    ウェブサイトのパフォーマンステストにおけるフィルムストリップビューとは何ですか？

    フィルムストリップビューは、ウェブページの読み込み状況をフレームごとにスクリーンショットで記録します。これにより、コンテンツがユーザーに表示されるタイミングが正確に分かり、数値だけでは十分に説明できないスピードインデックスなどの指標に視覚的なコンテキストを提供します。

    デントン千倉著

    テクニカルライター

    デントン・チクラは、テクニカルライターであり、長年にわたりオブザーバビリティを推進してきた人物です。彼は、サイト信頼性エンジニアやエンジニアリングチームがインターネットの回復力を強化するツールや機能を発見できるよう支援することに注力しています。監視、パフォーマンス、インフラストラクチャの交差点で活動し、複雑なシステムをより理解しやすく使いやすいものにすることで、高度な技術的詳細と実際の運用とのギャップを埋めています。彼の目標は、チームがより迅速に構築し、問題を早期に発見し、よりスマートに復旧できるよう支援し、最終的にはインターネットをすべての人にとってより良く、より信頼性の高い場所にすることです。

    免責事項: このブログで述べられている見解は著者の見解であり、LogicMonitor またはその関連会社の見解を必ずしも反映するものではありません。

    © LogicMonitor 2026 | 無断複写・転載を禁じます。 | ここで言及されているすべての商標、商号、サービス マーク、およびロゴは、それぞれの会社に帰属します。