Webサイトの速度テストを実施する方法

Webサイトのパフォーマンステストは、Webサイトの開発・維持において重要な要素です。サイトの速度テストは、Webサイトのパフォーマンスを低下させている資産またはリソースを開発者が特定するのに役立ちます。

学習目的

この記事を読み終えると、以下のことができるようになります。

  • Webサイトのパフォーマンスをテストが実施できる場所を知る
  • サイトの速度テストが必要な理由を理解する
  • 速度テストの結果の解釈方法を理解する

関連コンテンツ


さらに詳しく知りたいとお考えですか?

是非、Cloudflareが毎月お届けする「theNET」を購読して、インターネットで最も人気のある洞察をまとめた情報を入手してください!

当社がお客様の個人データをどのように収集し処理するかについては、Cloudflareのプライバシーポリシーをご確認ください。

記事のリンクをコピーする

Cloudflare Proと高速化ツールのアドオンでWebサイトのパフォーマンスを向上させる

サイトの速度テストを行う理由は?

自動車メーカーが新型車を開発する場合、書面上では優れた加速度と、滑らかな走行が実現できていても、その車の実際の走行性能は、テストドライバーが試乗してみないことにはわかりません。同様に、あるサイトのローカルテスト環境でのパフォーマンスは、さまざまなネットワーク条件と様々な場所にまたがる広範なインターネット上でのパフォーマンスを示す適切な指標であるとは限りません。

サイト速度のテスト

Webサイト速度テストの目的は、現実世界の条件をシミュレートして、Webサイトの実際のパフォーマンスに関するデータを提供することです。Webサイトの速度テストは、サイトやアプリケーションの速度だけでなく、ページ上で速度低下を引き起こしている要因を開発者に知らせるものである必要があります。

サイトの速度が重要な理由とは?

パフォーマンスの悪いWebサイトは、ユーザーをイラつかせ、遠ざけてしまう可能性があります。サイトパフォーマンスの低下は、検索ランキング(SEO)コンバージョン率、全体的なユーザーエクスペリエンスにマイナスの影響を及ぼします。

開発者がWebサイトの速度テストを実施する方法は?

Cloudflareを含む多くの組織が、Webサイトの速度テストを提供しています。多くのスピードテストは、パフォーマンス指標を提供するだけでなく、ページの速度を低下させているウェブページの個々の要素を特定することができます。

スピードテスト以外にも、Cloudflareは無料でCDNサービスを提供し、Webサイトのパフォーマンスを向上させ、遅延を低減させることができます。

サイトの速度テストで得られるパフォーマンス指標は?

Cloudflareの速度テストの基本的な測定内容は次のようなものです。

  • 読み込み時間:WebブラウザがWebページのダウンロードと表示を完了するのに要する時間(ミリ秒単位で計測)。
  • 最初のバイトまでの時間(TTFB):Webサーバーからの最初のバイトをブラウザが受信するまでの時間(ミリ秒単位で計測)
  • リクエスト:ブラウザがページを完全に読み込むまでに行うHTTPリクエストの数。

すべての速度テストの提供者が同じパフォーマンス指標を使用してサイト速度の分解を行うわけではありません。その他のパフォーマンス指標には次のようなものがあります。

  • DOMContentLoaded(DCL):ページのHTMLコード(画像、CSSファイル、その他のアセットを除く)をすべて読み込むまでに要する時間。
  • Above the foldの読み込み時間:「Above the fold」とは、スクロールダウンせずにブラウザウィンドウに収まるWebページ領域を意味します。
  • First Contentful Paint(FCP):ブラウザによるコンテンツ「描画」、もしくは、レンダリングがはじまる時間のこと。テキスト、画像、白以外の背景色など、ページのあらゆる要素が該当します。
  • ページサイズ:ページに表示されるすべてのコンテンツおよびアセットの合計サイズ。
  • ラウンドトリップ:Webページの読み込みに必要なラウンドトリップ回数です。HTTPリクエストがブラウザから配信元サーバーまで移動し、サーバーのHTTPレスポンスが逆方向へ移動していくことをラウンドトリップと言います。
  • レンダリングブロックのラウンドトリップ:ラウンドトリップのサブカテゴリー。「レンダリングブロック」とは、他のリソースを読み込む前に読み込んでおく必要があるリソースを意味します。
  • ラウンドトリップタイム(RTT)ラウンドトリップにかかる時間。
  • レンダリングブロックリソース:CSSファイルなど特定のリソースは、その読み込みが終わるまでページ内の他部分の読み込みがブロックされます。このレンダリングブロックリソースが多いほどブラウザがWebページ読み込みに失敗する可能性が高くなります。