ウェブサイトは、できる限り高速化したいもの。優れたサイトパフォーマンスを実現するには、常に細心の注意が求められます。つまり、サイトのパフォーマンスを監視し、改善するための変更を加え、すべてのページで最高のユーザー体験を提供することが重要です。
そこで役立つのが、WebPageTest。サイトの各ページで速度テストを実行することができる、パフォーマンス測定ツールです。テストレポートには、パフォーマンス向上につながる改善点や、現在の状態を比較することができる過去データなども記載されており、無料で取得できます。
今回は、速度測定ツールのWebPageTestについて取り上げます。テストの実行方法と結果の分析方法、メリットとデメリット、そしてプランなどを詳しく見ていきましょう。
WebPageTestとは
WebPageTestは、サイトのパフォーマンスを監視し、最適化するために設計された高度なオープンソースツール。
読み込み時間、レンダリング速度、ネットワーク使用量などを含む包括的な分析データを取得できます。個々のページ要素の詳細を確認したり、ボトルネックや改善のための領域を特定したりすることができます。
2008年に登場したWebPageTestは、サイトパフォーマンス測定ツールの中では、最も長い歴史を持つものの1つで、当初はAOL（米国の大手インターネットサービス会社）の社内用テストツールとして使われていました。
その後、すぐにオープンソースライセンスでリリースされ、2011年にはウェブ版が登場しました。
それ以降もツールは拡張され続け、現在ではモバイルテストや、テストをプロジェクトに統合するためのAPIも提供しています。
主な機能
- 世界中のさまざまな場所からの模擬テスト
- Chrome、Firefox、Safariを含む様々なブラウザをサポート
- ページのレンダリングや読み込みプロセスの分析（滝グラフやフィルムストリップなど）
- カスタマイズ可能なテスト設定（接続速度や画面解像度など）
- Speed Index、TTFB（Time to First Byte）、FCP（First Contentful Paint）などの高度な指標
WebPageTestは、月に数百のテストを実行して、詳細な結果を無料で取得することができます。
WebPageTestの特徴
サイトパフォーマンス測定ツールは数多く存在します。ほとんどは無料で利用できますが、得られるデータはツールによって大幅に異なります。
WebPageTestの主な特徴は、以下の通りです。
- パフォーマンスに関する問題の特定─潜在的なボトルネックや改善点を検出するのに役立ち、的を絞った最適化を実行できる。
- ユーザー体験の向上─サイトが高速化されると、ユーザー体験の質が高まり、ひいては訪問者のエンゲージメントとコンバージョンも向上される。高速なサイトは気づかれないとしても、低速なサイトは必ず気づかれるもの。
- 検索エンジンの表示順位の向上─サイトの速度は、Googleなどの検索順位に影響を与える要因。高速なサイトは、検索結果でより上位に表示される傾向にある。
- 長期的なパフォーマンスの監視─定期的にテストを行うことで、パフォーマンスの傾向を把握し、大きな問題に発展する前に問題を特定することができる。無料プランではパフォーマンスを1年以上監視することができ、傾向を把握するには十分。
また、WebPageTestのテスト結果は非常にわかりやすく、パフォーマンステストと最適化を初めて行うユーザーでも安心です。
上記のような簡単なサマリーに加え、パフォーマンスに関連する具体的な数値も取得できます。次のセクションでは、この結果をどのように分析するかを見ていきます。
ページのパフォーマンス測定と監視ツールは、サイト運営に欠かせません。デザインや機能の更新、サーバーの乗り換えなど、サイトに大きな変更を加える際には特に重要です。コンテンツデリバリネットワーク（CDN）の使用など、他の最適化対策を実行しながら定期的にテストを行うことで、サイトを最高の状態に保つことができます。
WebPageTestの使用方法
WebPageTestの使用方法は至ってシンプル。まずは、無料アカウントを作成しましょう。
ログイン後はトップページに戻り、「Start a … Test!」のドロップダウンメニューから「Site Performance」を選択して、その下のフィールドにテストしたいページのURLを貼り付けます。
その下の設定については、最も包括的な結果を得るために、モバイルとPCの両方で実行することをおすすめします。また、距離によって結果が偏らないよう、サイトのサーバーに最も近い場所を選択するのが得策です。
デフォルトの項目に適切な場所がない場合は、「Advanced Configuration」を選択すると、デフォルト以外のテストロケーションの選択他、さまざまな詳細設定を変更することができます。
設定を終えたら、「Start Test」をクリック。数秒後に詳細なパフォーマンスレポートが表示されます。
WebPageTestのテスト結果の見方
WebPageTestのようなツールの懸念点としては、テスト結果の情報量の多さ。もちろん、注目すべき指標がわかっていれば問題ありませんが、初めてパフォーマンス測定を行う際には、何を見ればいいのかわからない可能性も。
WebPageTestのテスト結果では、次の3つのセクションに着目してください。まず1つ目は「Performance Summary」で、結果の概要に目を通しましょう。パフォーマンス、ユーザビリティ、耐障害性の観点から、サイトの状態を把握することができます。
各カテゴリの下にあるアイコンをクリックすると、より詳細な情報が展開され、テストされた要素とその結果を確認できます。サイトに問題がある場合は、原因となる要素とその解決方法に関する推奨事項が記載されます。
メインのレポートページに戻ったら、次は「Page Performance Metrics」セクションまで移動しましょう。ここでは、サイトが読み込まれて機能するまでにかかる時間を示す指標を確認することができます。
各指標の意味は、以下の通りです。
- Time To First Byte（TTFB）：「最初の1バイトを受信するまでの時間」を意味する指標で、ブラウザの最初のリクエストにサイトが応答するまでにかかる時間。低速のサーバーは応答するのに時間がかかり、これによってサイト全体の表示速度が遅くなる。
- Start Render：ページが視覚的要素の読み込み開始するまでにかかる時間。サイトの読み込みがバックグラウンドで行われていても、訪問者がコンテンツを目にするまでは、ページが適切に動作しているかどうかわからない。
- First Contentful Paint（FCP）：ブラウザがページ上の最初のコンテンツをレンダリングするのにかかる時間。FCPの数値が低いほど、サイトが高速であることを意味する。
- Speed Index：ページのコンテンツがユーザーにどれだけ早く表示されるかを表す複合スコア。スコアが低いほど優れている。
- Large Contentful Paint（LCP）：ページ上の最も大きな要素をレンダリングするのにかかる時間。ページ全体の表示速度を測る良い指標に。
- Cumulative Layout Shift（CLS）：ページが読み込まれる際に、レイアウトがどれだけずれるかを示す指標。レイアウトのずれが大きいほど、ユーザー体験の質が低下する。CLSの数値は「0」が望ましい。
- Total Blocking Time（TBT）：ページが操作可能になるまでにかかる時間。視覚的にはレンダリングが終わっていても、バックグラウンドでスクリプトがまだ読み込まれていて、訪問者の操作を妨げている可能性も。
次に、「Real-World Usage Metrics」セクションでは、同じ指標の概要を他のユーザーによる最近のテストデータと比較することができます（入手可能な場合のみ）。サイトのパフォーマンスの全体像を把握するために、先ほどの「Page Performance Metrics」で各指標を比較することをおすすめします。
この結果は、同等またはそれ以上であることが理想的です。
最後に、ページ上の各要素の読み込みプロセスを示す、滝グラフも確認してみてください。遅延を引き起こしている特定のリソースや、より良いパフォーマンスのために最適化できるリソースを特定するのに便利です。
改善すべき領域を把握したら、画像の最適化、CSSとJavaScriptファイルの圧縮、キャッシュの実装など、サイトに適切な変更を加えましょう。
WebPageTestを使用するメリット
サイト所有者なら、定期的にパフォーマンステストを実施して、より良いユーザー体験を提供したいとお考えのはず。どのパフォーマンス測定ツールを利用してもOKですが、特にWebPageTestをおすすめしたい理由があります。
メリットに加えて、このツールをより包括的に理解できるよう、デメリットもご紹介します。
WebPageTestのメリット
- 包括的な分析─サイトのパフォーマンスに関する詳細な情報を取得して、改善が必要な要素を簡単に特定できる。
- テスト条件の設定が可能─ブラウザやテスト場所などの設定を変更することができ、実際のユーザー体験を再現することができる。必要に応じて設定を柔軟に変更したり、デフォルトの設定を使用して概要を簡単に把握したりすることも。
- オープンソースで無料─オープンソースソフトウェアで無料で使用できる。有料プランもあるが、ほとんどのウェブサイトには無料プランで十分なデータを取得可能。
- 過去のパフォーマンスデータが保存される─13ヶ月分のテストデータが保存され、パフォーマンス傾向の監視に有用。
- パフォーマンスの改善に有益な推奨事項─サイトで検出された問題に応じて、改善するための推奨事項を確認することができる。また、その変更が重要である理由も説明されており、わかりやすい。
WebPageTestのデメリット
- アカウント登録─無料プランを利用する場合もアカウント登録が必要。ただし、支払い情報の入力は不要。
- 使いやすさ─豊富なデータを取得できる分、パフォーマンスの最適化を初めて行う場合には圧倒される可能性も。とは言え、他の類似ツールを比較すると圧倒的に使用しやすい。
- 自動化の難易度─APIを通じて自動化することができるが、自動化機能が内蔵されている他のツールと比べると、セットアップやコーディングの知識が求められる可能性が高い。
- パフォーマンス改善の実行方法─サイトのパフォーマンスを向上させるための推奨事項は確認できるが、具体的な実行方法は紹介されない（これはWebPageTestだけに限らず、パフォーマンス測定ツールでは一般的）。したがって、レンダリングブロックを引き起こすJavaScriptの除外方法などの高度な操作については、自分で調べる必要あり。
WebPageTestのプラン
WebPageTestには無料プランと有料プランがあり、無料プランでは、月に300のテストを実行可能です。また、無料・有料ともに13ヶ月分のテストデータが保存されます。
有料プランを利用すると、より多くのテストを実行することができます。また、稀ですが、サービス利用者が店員に達している場合には、優先的にテストを実行できます。APIを利用するには、有料プランが必要です。
その他のパフォーマンス測定ツールとの比較
先にも触れましたが、パフォーマンス測定ツールには他にもさまざまな選択肢があります。WebPageTestに加えて、特に人気が高いのは、Google PageSpeed InsightsとPingdomの2つ。
WebPageTestをこの2つのツールと比較すると、以下のような違いがあります。
Google PageSpeed Insights
Google開発のこのツールは、パフォーマンススコアと特定の最適化の勧告を取得することができ、結果はWebPageTest同様に詳細です。
WebPageTestでは、テスト中に各ページを複数回測定され、テスト条件の設定を変更できるのに対し、PageSpeed Insightsにこの機能はありません。
Pingdom
Pingdomは、サーバを選択して即座にテストを実行する場合には良い選択肢です。PageSpeed InsightsやWebPageTestとは異なり、サイトの改善点や問題の詳細情報は確認できませんが、サイトパフォーマンスの概要を数値で取得できます。状況によっては、この数値だけで十分ということもあり得ます。
さまざまなツールを併用して定期的にテストを実施することが、より良いパフォーマンス測定結果を取得するベストプラクティスと言えますが、1つのツールに絞るなら、WebPageTestは、PageSpeed InsightsとPingdomなどの類似ツールと比較しても、最も包括的な結果を提供してくれる優れものです。
まとめ
ウェブサイトを最高の状態に保つには、パフォーマンスの監視は不可欠。パフォーマンステストを定期的に実施して、速度を改善する対策を講じましょう。
パフォーマンス監視に便利なツールは多数ありますが、中でもWebPageTestがおすすめです。無料で利用できて、詳細なレポートを取得可能。さらに、テストデータは最大13ヶ月間保存されるため、パフォーマンスを長期的に把握することができます。
Kinstaはスピード重視。他社からKinstaのホスティングサービスに乗り換えたお客様のサイトは、最大20％の高速化されています。世界37箇所のデータセンター、CDN、世界各地260+のPoPから、サイトを高速配信しませんか？まずはお気軽にお問合せください。
コメントを残す