WebPageTestの使い方【サイト表示高速化の計測ツール】

更新日: by Heysho

SEO対策とは?

Webサイトの表示速度は、ユーザーエクスペリエンスとSEOの両面で極めて重要な要素です。サイトのパフォーマンスを正確に測定し、改善するためには、信頼性の高いツールが不可欠です。

WebPageTestは、オープンソースで提供される無料のWebパフォーマンス測定ツールで、世界中の開発者やWebマーケティングチームによって幅広く活用されています。

本記事の内容

  • WebPageTestの概要と特徴
  • 企業での活用メリット
  • パフォーマンス指標の詳細解説
  • 自動化テンプレートの無料提供

本記事は、Webサイトのパフォーマンス改善プロジェクトに携わるチームメンバー、特に結果を定量的に測定・レポートする必要がある方々にとって必須の情報を提供します。

WebPageTestの公式サイトは以下からアクセスできます。

参考 https://www.webpagetest.org

WebPageTestとは

WebPageTestは、Webサイトのパフォーマンスを包括的に測定・分析するためのオープンソースツールです。世界各地のデータセンターに設置されたサーバーから、実際のユーザー環境をシミュレートしたWebページの読み込みテストを実行できます。

ツールの最大の特徴は、無料でありながらも企業レベルの詳細な測定結果と分析情報を提供することです。Fortune 500企業の多くが、社内のWebパフォーマンス最適化プロジェクトで活用しています。

参考 Akamai Japanブログ | Akamai公式

WebPageTestの主要特徴

精密な環境指定と再現性の高いテスト

テスト環境を細かく指定できるため、一貫した条件でのパフォーマンス測定が可能です。デバイスタイプ(iPhone、Androidなど)、ブラウザ(Chrome、Firefoxなど)、通信速度(4G、3Gなど)を組み合わせて、実際のユーザー環境を再現した測定が実行できます。

包括的なレポート機能とチーム共有

各テスト結果には固有のURLが発行され、チームメンバーやステークホルダーと簡単に共有できます。測定結果は詳細なウォーターフォールチャート、フィルムストリップ、最適化推奨事項など、包括的なレポートとして表示されます。

高度な自動化機能とAPI連携

充実したREST APIを提供しており、継続的インテグレーション・継続的デリバリー(CI/CD)パイプラインへの組み込みが可能です。Google Sheets、Slack、モニタリングツールなどと連携させ、定期的なパフォーマンス監視やアラートシステムの構築が実現できます。

WebPageTestをおすすめする理由

Webサイトのパフォーマンス測定は、一般的に難しい課題です。企業のマーケティングチームにとって、サイト高速化の成果を定量的に報告することは重要な業務ですが、測定条件や環境の違いにより、正確な効果測定が困難なケースが多く見られます。

Webサイトの表示速度は、ユーザーのデバイス性能、ネットワーク環境、地理的位置など、様々な要因によって大きく左右されるため、一貫した測定基準の確立が不可欠です。

Google Analyticsのページロードスピードを指標にしてはいけない理由

Google Analyticsのサイト速度レポートは、実際のユーザーの体験データ(Real User Monitoring - RUM)を収集します。しかし、この測定方法には以下の制約があります:

  • サンプリングベースの測定:すべてのユーザーセッションではなく、ランダムに選択されたサンプルからデータを収集
  • 環境依存性:ユーザーのデバイス性能、ネットワーク速度、地理的位置に大きく影響される
  • 変更効果の測定困難:パフォーマンス改善施策の効果が、ユーザー環境の変動に埋もれてしまう

このため、「サイト高速化の施策を実装したにも関わらず、Google Analyticsの数値に変化が見られない」という現象が頻繁に発生します。これは施策が無効だったのではなく、測定方法の特性による問題です。

WebPageTestによる標準化されたパフォーマンス測定

WebPageTestは仮想環境での統制されたテスト条件により、一貫性のあるパフォーマンス測定を実現します。主な利点は以下の通りです:

  • 環境の標準化:同一のデバイス仕様、ネットワーク条件でのテスト実行
  • 再現性の確保:同じ条件でのテストを繰り返し実行可能
  • Before/After比較:施策の効果を定量的に測定

ただし、測定タイミング(時間帯、曜日)やサーバー負荷状況により結果にばらつきが生じる場合があります。この課題への対処法については、後述のテスト実行のベストプラクティスで詳しく解説します。

実際のレポートを見てみる

WebPageTestの使用方法は非常にシンプルです。webpagetest.orgにアクセスし、測定したいページのURLを入力して「Start Test」ボタンをクリックするだけで測定が開始されます。

テスト結果の読み方

WebPageTestのレポートは、以下の主要なスコアでサイトのパフォーマンスを評価します:

  • パフォーマンススコア:サイトの総合的な表示速度
  • セキュリティスコア:HTTPS、セキュリティヘッダーなどの安全性評価
  • Core Web Vitals:Googleが重視するユーザー体験指標

スコアはA~Fの6段階で評価され、Aが最高評価、Fが最低評価となります。特にセキュリティスコアが低い場合は、HTTPS化やセキュリティヘッダーの実装を検討することをおすすめします。

各メトリックスの指標

  • First Byte ... 最初の1バイトが到着するまでの時間
  • Start Render... 空白ページからコンテンツが初めて表示されるまでの時間
  • Speed Index... ファーストビューが見えるまでにかかった時間
  • Document Complete Time... 静的コンテンツの読み込みが終わった速度。画像やHTMLコードなどが該当します。
  • Document Complete Requests ... 静的コンテンツをリクエストする数
  • Document Complete Bytes In ... 静的コンテンツを読み込み始めた時間
  • Fully Loaded Time...静的コンテンツ+動的コンテンツの読み込みが終わった速度。JavaScriptなどでダイナミックにコンテンツを読み込んでいる場合は遅くなります。
  • Fully Loaded Requests ...静的コンテンツ+動的コンテンツを含めたすべてのファイルをリクエストする数
  • Fully Loaded Bytes In ... 静的コンテンツ+動的コンテンツを含めたすべてのファイルを読み込み始めた時間
参考 Webpagetestから始める継続的パフォーマンス改善ページロードタイム編 | azu.github.io

他のパフォーマンス測定ツールでよく使われる指標

他のパフォーマンス測定ツールでも重要な指標として以下があります:

  • First Contentful Paint... ブラウザーが DOM からコンテンツの最初のビットをレンダリングし、ページが実際読み込み中というユーザーへの最初のフィードバックがなされる時間
  • Largest Content Paint... 重要なコンテンツがいつ表示されたか
  • Cumulative Layout Shift... 表示されるページ コンテンツにおける予期しないレイアウトのずれの量

自動化されたパフォーマンスレポートの作成

企業の継続的なパフォーマンス監視には、手動での測定ではなく自動化されたシステムが不可欠です。WebPageTestは充実したAPIを提供しており、様々なツールと連携した自動化ソリューションの構築が可能です。

Google Apps ScriptとGoogle Data Studioを使った自動化

gas-webpagetestは、Google Apps Scriptを使用してWebPageTestの測定を自動化し、結果をGoogle Data Studioで可視化するソリューションです。この手法により、定期的なパフォーマンスモニタリングとダッシュボード作成が実現できます。

参考 gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する | Web Scratch

複数ページ一括測定テンプレートの無料提供

企業のパフォーマンス管理を効率化するため、WebPageTestを使用した複数ページの一括測定テンプレートを無料で提供しています。

参考 Web Page Test - Bulk Test Template | Googleスプレッドシート

テンプレートの特徴

  • 一括測定機能:複数URLの同時測定が可能
  • 継続監視:12回分の測定データを保存、月次モニタリングに最適
  • 簡単操作:URL入力とボタンクリックだけで測定完了
  • レポート機能:自動グラフ作成とトレンド分析

テンプレートの使用手順

手順1:WebPageTest APIキーの取得

API key - WebPageTestのページにアクセスし、無料のAPIキーを取得します。電子メールアドレスを登録するだけで、すぐにAPIキーが発行されます。

手順2:APIをスプレッドシートに入力

  •  テンプレートの「Config」タブを開きます
  • 取得したAPIキーを指定の項目に入力します
  • 必要に応じてテスト設定をカスタマイズします

手順3:測定を実行

  • 測定したいページのURLを入力します
  • 「Run」ボタンをクリックして測定を開始します
  • システムが自動的に各URLのパフォーマンステストを実行します

手順4:結果を確認・分析

  • 少し待つと各メトリックスに測定結果が表示されます
  • 複数回測定を行うことでデータの精度が向上します
  • 「Report」タブでグラフ形式の詳細レポートを確認できます
  • 時系列データでパフォーマンスの変化を追跡できます

まとめ

本記事では、WebPageTestの基本的な使用方法から高度な自動化ソリューションまでを紹介しました。継続的なパフォーマンス監視と改善により、優れたユーザー体験とSEO効果の向上を実現してください。