ウェブサイトの速度をミスなく計測する方法（Webページスピードテストのコツ）

ウェブサイトにおいて、表示や読み込みにかかるスピードは命です。サイト速度は、Googleのアルゴリズムにおける重要な要素です。高速なウェブサイトは、SERPでより上位に表示され、アクセス数の増加が期待でき、ユーザー体験にも大きな影響を与えます。サイトが素早く表示されれば、訪問者はより長い時間サイトに滞在し、コンテンツを目に通してくれる確率も上がり、ひいてはコンバージョンにもつながります。高速サイトはいいこと尽くめ。

今回は、サイトを高速化する方法ではなく、WordPressユーザーであれば経験する速度テストの課題について取り上げます。WordPressサイトの高速化とページの表示速度に関しては、それぞれのリンクよりご覧ください。実は多くの方が、誤った方法で速度を測定していることをご存知でしょうか？

スピードの計測方法は、それほど大きな問題ではないように思えますが、改善点を分析する際には非常に重要になります。誤った方法で測定を行えば、実際の速度よりも低速という結果が出る可能性があります。

そこでこの記事では、サイト速度の正しい測定方法、そして速度を測定し、改善点を追跡するのに便利なツールを見ていきます。

サイト速度を計測する前に

速度テストを実行する前に、以下2つがWordPressサイトで有効になっているかを確認してください。

1. キャッシュ
2. コンテンツデリバリネットワーク

不明な場合、ウェブ開発者またはご利用のホスティング会社に確認してください。また、サイトをこれから立ち上げる場合には、上記2つの設定を行った上で、テストを実行してください。

1. キャッシュを設定する

Kinstaをご利用の場合は、サーバーレベルのページキャッシュがすでに有効になっているため、特別な設定は不要です。ただし、ステージング環境では、開発やデバッグの目的でデフォルトでキャッシュが無効になっています。ステージング環境でキャッシュを有効にするには、MyKinstaのサイトの「ツール」画面で、「サイトキャッシュ」セクションの「利用する」をクリックしてください。

Kinsta以外をご利用の場合は、その会社のドキュメントを確認し、キャッシュが設定されているかを確認してください。共用サーバーまたはVPSを使用している場合は、WordPressのキャッシュプラグインをインストールする必要があるかもしれません。

2. コンテンツデリバリネットワーク（CDN）を使用する

コンテンツデリバリネットワークに馴染みがない方は、まず『WordPress CDN─読み込み速度を最大72%アップ』をご覧ください。CDNを使用すると、ほぼ確実にサイト速度が高速化されます。サイトがホストされているデータセンターの場所や訪問者がどこからアクセスしているかにもよりますが、CDNによって読み込み時間が50%以上短縮されることが明らかになっています。

Kinstaのすべてのホスティングプランでは、CDNを無料でご利用いただけます。また、CDNの有効化はとてもシンプル。

ステップ1

MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「キャッシュ」を選択し「CDN」をクリックします。

ステップ2

表示されるポップアップウィンドウで「CDNを利用する」をクリックすれば完了です。

Cloudflareのアカウントをお持ちの場合、また利用を検討している場合は、WordPressサイトにCloudflareをインストールする方法と設定方法をご覧ください。また、KinstaのCDNについて、CloudFlareの自動プラットフォーム最適化などのリソースも参照してみてください。

サードパーティのCDNサービスを利用する場合、WordPressサイトでのセットアップ方法に関するドキュメントを確認してください。CDN Enablerなどの無料プラグインで設定可能です。

ウェブサイトの速度を正しく計測する方法

キャッシュとCDNの設定を終えたら、早速WordPressサイトの速度を計測していきましょう。

測定に便利なおすすめツールはこちらでご紹介しています。今回は、一般的に使用されているPingdomを使用した例を見ていきます。

速度テストの実施場所

ほぼすべての速度計測ツールでは、テストを実施する場所を世界中から選択することができるようになっています。テストの実施場所は、WordPressサイトが運営されているデータセンターとの相対的な関係があるため、非常に重要です。TTFB、ネットワークレイテンシなどが関係してきます。Kinstaのお客様は、世界37箇所から、任意の場所を利用することができます。

また、データセンターに近い場所と遠い場所の両方から測定することが重要です。これによって、CDNの効果も確認することができ、さらにCDNを一時的に無効にしてテストを行えば、その違いも明確に分かります。

いずれにしても、実施場所には一貫性を持たせてください。

複数回テストを実施すること

今回は、キャッシュについてあまり掘り下げませんが、WordPressホスティングやプラグイン、そしてCDNの両方のキャッシュがサイトの高速化に必要であることを覚えておいてください。

よくある誤解として、多くの人が速度テストを一度しか行わない傾向にあります。速度を一度測定しただけでは、コンテンツがWordPressホスティングやCDNにまだキャッシュされていないため、高速化される前の速度が結果に出てしまう可能性があります。また、WordPressサイトやCDNのキャッシュをクリアしたばかりの状態でも同様のことが起こり得ます。

コンテンツやメディアがキャッシュから配信されているかどうか、確認する方法があります。

速度測定ツールでは、HTTPヘッダー（レスポンスヘッダーとも）が表示され、各リクエストに関する詳細を確認することができます。

KinstaのCDNを有効化した開発サイトをセットアップし、Pingdomでテストを実施したところ、以下のような結果になりました。

下のスクリーンショットを見ると、最初のリクエストはプライマリドメインへのもので、つまりKinstaのサーバーから読み込まれています。その下には、残りのリクエストがKinstaのCDN（xxxx.kinstacdn.com）から読み込まれていることが分かります。

Kinstaのサーバーのリクエストには、x-kinsta-cacheヘッダーが表示されています。キャッシュから配信されていない場合は、MISSが表示されます。このヘッダー名はホスティング会社によって若干異なることがあります。

その下のCDNのリクエストの場合は、x-cacheというヘッダーです。まだキャッシュから配信されていない場合は、MISSが表示されます。このヘッダー名もCDNサービスによって異なることがあります（Cloudflareを利用している場合のヘッダー名はcf-cache-status）。

適切に速度を計測するには、利用しているWordPressサーバーとCDNの両方のキャッシュから読み込まれていなければなりません。キャッシュから配信されている場合は、x-kinsta-cacheとx-cache両方のヘッダーにHITが表示されます（以下スクリーンショット参照）。「HIT」を示すには、通常数回テストを実行する必要があります。具体的には、3回実施するのが確実です。

PingdomのようなWebページ/サイト速度計測ツールでは、一度テストを行うと、少し間隔を空けなければならないため（通常は数分）、少し時間を置きながら複数回実行してください。

また、WordPressサーバーがCDNの前にキャッシュでHITを返すことがあります。その場合は、テストの結果ページを下にスクロールして、黄色のバーを確認してみてください。このバーは、TTFB（ページ表示までの待ち時間）を示しており、ページやアセットがキャッシュから配信されていない場合に大きく上昇します。

この確認が重要になる理由は、実際にこのテストを行った結果、キャッシュから読み込んだサイトの方が50%高速になったためです。今回テストに使用したのは小規模な開発サイト。大規模なサイトでは、この割合はさらに大きくなることが予想されます。このように、サイト速度の正しい計測方法を理解しておくことが大切です。

また、ホスティングサーバーやCDNへのリクエストのほかにも、Facebook、Google アナリティクス、Google Fontsなど、外部リクエストもありますが、これはまた別の記事で掘り下げていきます。併せて、WordPressサイトの外部サービスを特定し分析する方法、Pingdomの使用方法、WordPressでフォントを変更する方法などもご覧ください。

【2024年版】おすすめのサイト速度計測ツール

ここからは、選りすぐりのサイトの速度測定ツールをご紹介していきます。なお、見識者の間では、理想のWebページ読み込み速度は2秒以内と言われています。また、知覚的なパフォーマンスと実際のパフォーマンスには差異があることも念頭に置いてください。

サイトスピードのテストを行うにあたってのルールとして、使用する計測ツールは1つに絞ることをお勧めします。各スピード計測ツールで指標が異なり、テスト結果を他のツールのそれと比較することは不可能です。ツール選びに正解・不正解はありません。使用しやすいものを1つ選択して、テストを実施してください。

Googleのウェブマスター・トレンド・アナリストであるGary Illyes氏は、以下のようにつぶやいています。

各ツールはそれぞれに違う指標を持っていても、各指標はそのツールにおいて正確なデータ。完璧なツールはないから、単に好きなものを選べば問題ない。（和訳）

Each tool has a set of different metrics but each metric on its own makes perfect sense to improve. No tool is perfect and normally I'd tell you which one is the closest, but in this case is really about picking one that you like.

— Gary 鯨理／경리 Illyes (so official, trust me) (@methode) July 12, 2018

1. Pingdom

Pingdomは業界で広く知られるWebページ監視サービスで、中でも無料の速度テストツールが便利です。サイトのすべてのリクエストがウォーターフォールチャートで表示され、読み込み順、ファイルサイズ、読み込み時間でフィルタリングすることもでき、潜在的な改善点を特定するさまざまな機能があります。また、総リクエスト数や読み込み時間、ページサイズなども確認できるのがメリットです。

類似のWebページ速度テストツールと比較して、圧倒的に使用しやすいのが長年にわたる人気の秘密です。初心者には特におすすめできる選択肢です。

0~100点で表される表示速度パフォーマンススコアも確認でき、全部で12ある基準それぞれに点数が付きます。サイト速度を即座に改善する手がかりを見つけるのにも役立ち、100点満点を目指すことも可能です。ただし、スコアにはあまりこだわりすぎないことが重要です。サイトの速度を改善することが大切です。

また、Pingdomでは、実行したWebページ速度テストの結果が保存されるため、徐々に施策を重ねて速度の向上具合を追跡することもできます。

2. Google PageSpeed Insights

Googleは、2010年にページの表示速度はSEOの重要なランキング要因であると発表しています。Google PageSpeed Insightsは、モバイル端末とPCでのページのパフォーマンスを測定することができるテストツールです。

このツールは、Lighthouseがベースとなっており、パフォーマンスを0〜100点で評価します。点数が高ければ高いほど良く、85点以上は高パフォーマンスと評価されます。レポートページでは、パフォーマンスを向上に役立つヒントが表示され、モバイル端末でのユーザー体験に関する推奨事項も確認できます。これに関連して、『Google PageSpeed Insights—100点満点を獲得することの真実』もぜひご覧ください。

サイトを検索結果の上位に表示させるには、Googleの推奨事項に注目するのが賢明です。また、「ブラウザのキャッシュを活用する」という提案の解決方法についてはこちらを参考にしてみてください。

3. Google アナリティクス

Google アナリティクスには、サイトの速度を計測する機能があります。GA管理画面の「行動」メニューから利用でき、ウェブページに記述したコードスニペットから情報を取得します。

この機能では、以下3つの指標が測定されます。

• サイト上のページビューのサンプルに対するページ読み込み時間
• 追跡したい個別のヒット、イベント、ユーザーインタラクションの実行速度または読み込み時間
• ブラウザがドキュメントを処理し、ユーザーインタラクションが可能になるまでにかかる時間

この結果は、全体的な比較には役立ちますが、データが無作為に抽出されたものであることから、速度測定ツールとして使用することは推奨されません。

Google アナリティクスの速度測定の精度に関する懸念について、Joe Christopher氏が有益な記事を公開しています。また、Tedd Rodman氏も、サイト速度の平均値を大幅に狂わせる頻発するエラーについて報告しており、基本的には、他のツールを使用する方が得策かもしれません。

4. WebPageTest

WebPageTestは、Google ChromeのエンジニアであるPatrick Meenan氏によって開発されました。オープンソースのプロジェクトで、世界中のさまざまな場所から、実際のブラウザ（IE、Chromeなど）を使って、無料で速度テストを行うことができます。速度テストからさらにデータを取得したい上級者向けの画期的なツールです。

WebPageTestでは、マルチステップのトランザクション、動画キャプチャ、コンテンツブロック、ファーストビューとリピートビューの比較、接続速度の変化など、高度な測定を行うことができます。また、ウォーターフォールチャートとリソースの読み込みレポートで、サイト全体の改善に役立つ有益な情報を確認できます。

5. GTmetrix

GTmetrixも人気のあるサイト速度測定ツールで、Pingdomの代わりとなる選択肢としてよく知られています。使いやすく、初心者でもすぐに使いこなすことができるのが魅力です。Google PageSpeed InsightsとYSlowによるパフォーマンス評価と推奨事項を組み合わせ、包括的な分析データを提供してくれるため、速度の最適化に必要なものが全て揃った万能型ソリューションと言えます。

GTmetrixは、重要なデータを把握しやすいよう、ページ上部にサマリーを表示し、総ページ読み込み時間、ページサイズ、リクエスト数が一覧表示されます。また、リクエスト一覧をウォーターフォールチャートで表示し、問題点やボトルネックを簡単に特定することができます。ウォーターフォールチャートはオンラインで確認することもダウンロードすることも可能です。

さらに、無料のアカウントを作成すると、過去20回のテスト結果が記録されます。これによって、過去のデータと比較したり、テストの実施場所、ブラウザ、接続速度などの設定を保存したりすることができます。

GTmetrixの詳しい使い方についてはこちらをご覧ください。

6. KeyCDNのWebsite Speed Test

KeyCDNのWebsite Speed Testを使用すると、WordPressサイト全体の速度を驚くほど素早くかつ容易に測定することができます。データはウォーターフォールチャートの内訳とサイトのプレビューが表示されるシンプルな構成。世界各地にある14の場所からテストを実施でき、各地域でのアセットの読み込み時間を正確に計測することができます。

また、テスト結果は公開・非公開から選択することができ、後で他の人に共有したり、今後のためにブックマークしておくことも可能です。内訳レポートでは、リクエストメソッド（GET/POST）、HTTPステータスコード（「200 OK」または「404 Not Found」など）、ファイルタイプ、コンテンツサイズ、待機・受信時間、合計読み込み時間、およびサイト上で発生した総HTTPリクエスト数など、さまざまな指標の概要が表示されます。

KeyCDNは、他にもPingテスト、HTTP/2テスト、HTTPチェック、Tracerouteツールなど、便利なパフォーマンステストツールを無料提供しています。

7. DareBoost

DareBoostは、サイトの速度テスト、ウェブパフォーマンス監視、サイト分析（スピード、SEO、品質、セキュリティ）を実現するオールインワンツール。一部機能の制限はありますが、有料版とは別に、月に最大5回まで無料で速度テストを行うことができます。無料とは言え、取得できるレポートは一流です。

DareBoostの速度テストは、以下のカテゴリにまたがる80以上の指標を分析してくれます。

• キャッシュポリシー
• リクエスト数
• セキュリティ
• アクセシビリティ
• コンプライアンス
• 品質
• jQuery
• ブラウザレンダリング
• データ量
• SEO対策

WordPressサイトのどこに問題があり、改善が必要なのかを一目で確認することができます。また、他のツールとは異なる独自のセキュリティレポートも入手可能です。サイトがクリックジャッキングに晒されているかどうか、コンテンツさらされているかどうか、コンテンツセキュリティポリシー（CSP）ヘッダーが設置されているかどうか、そしてSSL証明書に関する情報などを確認することができます。そしてデザインもなかなか洗練されています。

上司や代行業者への報告が必要な場合には、チェックしておきたい選択肢です。

8. Web Page Analyzer

Web Page Analyzerは、サイトの速度、サイズ、構成を分析するのに役立つ無料ツール。スクリプトが個々の要素のサイズを計算し、ウェブページ構成要素の各タイプを集計。ページ特性に基づき、ページの表示速度を改善するための推奨事項を提示してくれます。

具体的には、接続速度の違いによるサイトの表示速度を測定することができます。詳細なデータが必要な場合は、データを分解し、各要素のサイズと解説を表示可能。分析結果の最後には、パフォーマンスの高いページとともに、パフォーマンスに関する11の項目について解説と推奨事項も表示されます。ただし、このツールはしばらく更新が行われていないため、HTTP/3のサポートなどは期待できなさそうです。

9. YSlow

次にご紹介するのは、Yahoo!のページパフォーマンスツールであるYSlow。これは、ブラウザのアドオンとしてインストールすることになりますが、完全無料で、ほぼすべての主要ブラウザに対応しています。

Yahoo!は、サイトの速度に影響を与える34の要因を特定しており、そのうち測定可能な23の要因を集中的に分析することができます。YSlowの公式サイトには、この23の「ルール」が詳細とともに掲載されているため、目を通してみてください。

分析結果は、各要因がA〜Fのスコアで採点されます。

以前は最も人気の高い速度テストツールでしたが、現在ではこのプロジェクトも失速しており、最後の更新は数年前。GitHubのページには、100以上の未解決の課題が残ったままです。有益なデータを取得できるアドオンではありますが、より新しく、定期的にサポートや更新が行われているテストツールを選択する方が賢明かもしれません。

10. Google Chrome デベロッパー ツール

Google Chrome デベロッパー ツールのネットワークパネルは、Chromeや他のChromiumベースのブラウザの一部として提供されています。簡単に使用でき、ローカルでのデバッグやテストに適しているため、開発者の間で支持を集めています。ネットワークパネルは、Command+Option+I（Mac）またはControl+Shift+I（Windows、Linux）で簡単に起動することができます。起動するとサイトのウォーターフォールチャート分析が生成され、各アセットのパフォーマンスを掘り下げることができます。

Chrome 60に追加されたもう1つの素晴らしい機能として、リクエストをブロックすることができます。これは、サードパーティのサービスやスクリプトがサイトに与えるオーバーヘッドを調べるのに非常に便利です。

デベロッパー ツールには、Lighthouseが統合されています。Lighthouseとは、ウェブページの質を向上させるための自動オープンソースツール。パフォーマンス、アクセシビリティ、PWA（プログレッシブウェブアプリ）などの監査が可能です。分析は、「Lighthouse」タブから実行可能です。0〜100点のスコアで、リクエストを解析し、レンダリングブロックを引き起こす可能性のあるスクリプトを検出したり、画像の圧縮率を測定したりすることができます。取得した結果は、他のユーザーとの共有も簡単です。

デベロッパー ツールのその他の機能には、キャッシュの無効化、ネットワーク接続のスロットル、ページレンダリングのスクリーンショット、TTFB診断などがあります。

11. Site Relic

Site Relicは、最近リリースされた無料の速度テストツールです。9つの地域で、モバイルとPCの両方でサイトの表示速度を簡単に測定することができます。また、全地域のTTFBを一度に確認することも。

各地域のレポートでは、全体の読み込み時間、ページサイズ、TTFB、リクエスト総数、タイプ別リクエスト数、レスポンスコード別リクエスト数を容易に確認することができ、ツール内にあるウォーターフォールチャートのレポートもよくできています。

12. dotcom-monitor

dotcom-monitorには、無料の便利機能が多数搭載されていますが、その1つが速度テストツール。世界25箇所から、サイトの速度を即座に測定することができます。Firefox、Chrome、iOS、Androidなど、さまざまなブラウザにも対応しています。

テスト結果のレポートでは、以下のような情報を確認できます。

• 場所別サマリー
• 最も高速な要素（上位10%）
• 最も低速な要素（上位10%）
• 包括的なウォーターフォールチャート
• DNS、接続、SSL、リクエスト、TTFB、ダウンロードなど、サーバー側の要素別内訳
• エラー検出と診断

13. New Relic

New Relicは、アプリケーションパフォーマンス監視、サーバー監視から、モバイル監視やリアルタイムのユーザーインサイトまで、あらゆる機能を提供しています。有料サービスですが、その他のツールで取得できる以上のデータが必要であれば、投資の価値ありです。

Kinstaでは、稼働率とパフォーマンスの監視に、New Relicの2つの製品（アプリケーションパフォーマンスモニタリングとSyntheticsモニタリング）を使用しています。

特に便利なのは、WordPressのプラグインセクション。どのプラグインやテーマが最も応答時間が長いかを瞬時に確認することができます。

サイトが遅くなったと感じたら、New Relicを使用すれば、すぐにその原因を検出可能です。通知を受け取り、すぐに対処することができます。これには、速度を低下させている可能性のある外部サービスや広告ネットワークも含まれます。Kinstaではお客様に最高のサポートを提供するため、高性能なNew Relicを利用しています。

まとめ

正しくWordPressサイト等のウェブサイト/ページ速度を測定する方法を理解することで、パフォーマンスを的確に確認することができます。例えば、Kinstaに移行した後のサイトの速度の違いを確認するのにも役立ちます。

サイトの表示速度は、ビジネス成功の鍵を握る要素。速ければ速いほど、成功する可能性が高まります。超高速なサイトを目指すなら、速度最適化に役立つ速度測定ツールを活用してみてください。

あなたはサイト速度の測定にどのようなツールを使用していますか？以下のコメント欄でぜひお聞かせください。