WebPageTestを使用したパフォーマンス分析

公開: 2021-05-19

高速なウェブサイトは今や絶対に必要です。モバイル時代、そして入院中の消費者にとって、遅いウェブサイトはあなたのビジネスが成功するか失敗するかの違いかもしれません。では、Webサイトの速度をどの程度正確にテストし、速度を低下させる可能性のある問題をどのように特定できるでしょうか。

この記事では、WebPageTestと呼ばれる人気のあるツールを見ていきます。この測定ツールは、パフォーマンスの観点から改善される可能性のあるサイトの領域を特定するために使用できる多数の詳細な統計とデータを提供します。ただし、提供される膨大な量の情報は、少々圧倒される可能性があります。心配しないでください…WebPageTestの使用方法を段階的に説明し、この無料ツールを最大限に活用する方法を明らかにします。

WebPageTest入門

まず最初に、webpagetest.orgにアクセスして開始します。レイアウトは非常に明確で、ウェブサイトのURLを入力できるボックスがすぐに表示されます。

最初に選択することができます…デフォルトの「AdvancedTesting」タブを使用しますか、それとも「SimpleTesting」タブに進みますか？シンプルテスト機能は、サイトの概要をすばやく確認するのに最適ですが、この記事では、[高度なテスト]タブについて説明します。

高度なテスト設定

ページを下にスクロールすると、[テスト場所]ドロップダウンメニューが表示されます。これはかなり自明です。選択したい場所は、ターゲットオーディエンスがいる場所に最も近い場所です。彼らがオーストラリアに拠点を置いている場合、英国のロンドンからのテストはあまり意味がありません。この演習の目的は、当社のWebサイトがユーザーに対してどのように機能するかを調べることです。

たくさんの場所がありますが、いくつかの場所は、テストに使用されるブラウザの形で他の場所よりも多くのテストオプションを提供します。繰り返しになりますが、ターゲットオーディエンスによって使用される可能性が高いものを選択してみてください。ウェブサイトにアクセスしたブラウザの統計を表示するには、GoogleAnalyticsなどのツールを使用できます。

選択できる他の本当にクールな設定は、接続などです。したがって、これはエンドユーザーのデバイスがインターネットに接続される方法になります。 [接続]の横にあるドロップダウンメニューをクリックすると、3G接続（低速または高速）を含むオプションが表示されます。それはあなたの聴衆があなたのサイトをどのように体験するかについてあなたに現実世界の感覚を与えるので、それは本当に素晴らしいです。

非常に便利なもう1つの設定は、[ビューを繰り返す]オプションです。このオプションを有効にすると、最初の読み込み後にサイトが再テストされ、サイトで有効にしたキャッシュの影響を示すことができます。

あなたが探求したいと思うかもしれないさらに高度なオプションがたくさんあります。私たちのほとんどにとって、サイトのテストに深く踏み込んでいない限り、上記の設定で十分です。利用可能な実際の本質的な設定について詳しく知りたい場合は、WebPageTestのドキュメントを確認してください。

変更した設定をメモします。テストとその後の最適化フェーズでは、同じ設定を使用して再テストを続けることが重要です。そうしないと、得られる結果が歪んでしまいます。準備ができたら、[テストの開始]ボタンを押して、座って結果を待ちます（通常は約1分かかります）。

最初の画面

この例では、AppleのWebサイト（apple.com）を使用して、英国のロンドンからの高速3G接続でテストしました。初期の結果を以下に示します。

右上を見ると、ページのパフォーマンスの最初の「ヘッドアップ」概要を提供する7つの色付きのボックスが表示されます。これらのそれぞれが何であるかを調べてみましょう。

ボックス1-セキュリティスコア

これはWebPageTestによって提供された最近の機能であり、実際にはSnykとの統合であり、Webサイトのセキュリティに関する洞察を提供します。色付きのボックスをクリックすると、セキュリティの観点から問題のWebサイトの詳細な分析が含まれているsynk.ioWebサイトに移動します。特に注目すべきは、通信のセキュリティの詳細を定義するためにクライアントとサーバーの間で交換されるHTTPセキュリティヘッダーです。最も重要なのは、Strict-Transport-Security、Content-Security-Policy、X-Frame-Optionsです。

重要なセキュリティヘッダーがサイトにない場合は、SynkWebサイトで通知されます。

ボックス2–最初のバイト時間

2番目のボックスは、最初のバイト時間（別名、最初のバイトまでの時間またはTTFB）を提供します。これは、サーバーがデータの最初のバイトでクライアント要求に応答するまでにかかる時間です。理想的には、300ms未満の数値を目指します。この値はサーバーとの関連性が高く、Webサイトファイルのレンダリングにかかる時間とは無関係です。たとえば、DNSサーバーが遅い、またはキャッシュが不十分な場合に影響を受ける可能性があります。

この時点で、キャッシュを有効にしている場合は、キャッシュされたコンテンツが測定されるようにWebページテストを再実行する必要があることに注意することが重要です。実際、テストを少なくとも3回実行して、結果がサイトにキャッシュされたコンテンツを完全に反映していることを確認することをお勧めします。

First Byte Timeは、次の3つの値の合計です。HTTP要求が送信されるのに必要な時間、サーバーによって処理される時間、およびサーバーが最初のバイトをクライアントに送り返すのに必要な時間。ボックスをクリックすると、これについてさらに詳しく知ることができます。

ご覧のとおり、AppleのWebサイトは、テストのこの特定の部分ではあまりうまくいきませんでした。

この接続が確立されると、リソースの配信を開始できます。 TTFBが遅い最も一般的な理由は、ネットワークの問題、Webサーバーの構成、サーバーのディスクI / Oの可能性、およびRAMの問題です。

ボックス3–生き続ける

[キープアライブを有効にする]ボックスには、キープアライブHTTPヘッダーの状態が表示されます。このヘッダーが有効になっている場合、データは同じ接続を使用して転送されます。そうでない場合は、転送する必要のあるファイルごとに新しい接続を作成する必要があります。ほとんどの場合、キープアライブはデフォルトで有効になっており、通常はサーバー側の設定です。自分で有効にする必要がある場合は、 .htaccessファイルを編集して、以下のコードを挿入できます。

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

ボックス4–圧縮転送

Compress Transferの値は、Gzip圧縮のステータスを表します。これは、静的ファイルをリアルタイムで圧縮および後で解凍するために使用される手法です。このように、ファイルサイズが減少するため、転送時間が短縮されます。サーバープロバイダーがデフォルトでこのテクノロジーを適用しない場合は、次のようにファイルの種類ごとに対応するルールを指定することで、自分で適用できます。

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

繰り返しになりますが、関連する色付きのボックスをクリックすると、詳細な概要セクションに移動し、Webサイトで何が起こっているかを正確に確認できます。

ボックス5–画像を圧縮する

[画像の圧縮]ボックスはかなり自明です。それをクリックすると、どの画像をより適切に圧縮できるかが表示されます。

この場合、WebPageTestは、正常に圧縮できると思われる3つの画像を識別し、転送する必要のないデータを54kb節約しました。これはあまり聞こえないかもしれませんが、モバイルでは、節約できるすべてのkbが違いを生みます。

画像は、静的コンテンツの中で最もスペースを消費する側面です。それらを圧縮することは絶対に必要です。 WebPageTest分析により、サイトの速度が低下している可能性があり、注意が必要な画像を簡単に特定できます。

ボックス6–静的コンテンツをキャッシュする

「静的コンテンツをキャッシュする」ボックスを押すと、「静的アセットのブラウザキャッシュを活用する」という詳細なセクションが表示されます。

ブラウザーのキャッシュは、リソースをキャッシュするタイミング、キャッシュしないタイミング、および正しいHTTPヘッダーを使用する期間をWebブラウザーに指示することにより、開発者または管理者が活用できます。ブラウザのキャッシュに関する詳細については、記事「ブラウザのキャッシュはどのように機能しますか？」を参照してください。 Pressidiumがブラウザキャッシュを実装する方法については、こちらをご覧ください。

ボックス7–CDNの効果的な使用

CDN（またはコンテンツ配信ネットワーク）は、地理的に分散したユーザーベースがある場合に使用する価値があります。たとえば、すべての顧客がロンドンに拠点を置き、ホストサーバーもロンドンにある場合、CDNを使用する意味はあまりありません。ただし、ユーザーが地理的に多様である場合、CDNは、ユーザーの近くにあるサーバーにWebサイトのコピーを配置することで、それらのユーザーのサイトのパフォーマンスに大きな違いをもたらすことができます。

CDNを使用している場合、WebPageTestはこれがどれほど効果的に機能しているかを調べます。

パフォーマンス結果

[概要]タブの上部に表示されるパフォーマンス結果から始めて、さらにいくつかのデータを調べてみましょう。

パフォーマンス結果では、First Byte Time、ページの表示部分が表示される平均時間であるSpeed Index、視覚的な安定性を測定するための累積レイアウトシフト（CLS）、消費時間などの最も重要な概要を確認できます。ドキュメントが完全に読み込まれるまで。

ウォーターフォールビュー

パフォーマンス結果のすぐ下に、各実行のウォーターフォールビューが表示されます。それらのいずれかをクリックすると、ウォーターフォール形式の実行の完全な詳細を含むページに移動します。

Webサイトの個々のアセットごとにすべてのパフォーマンス統計が提供されます。これらは異なる色であるため、区別しやすくなっています。これらのいずれかをクリックすると、ポップアップが開き、さらに詳細が表示されます。

ウォーターフォールビューは、ページとリーチコンポーネントの負荷を視覚的に表したものです。これにより、速度を低下させる可能性のあるコンポーネントを簡単に特定できます。ボトルネックがどこにあるかを確認できることは非常に役立ちます。つまり、推測するのではなく、正確に問題を修正できるということです。

接続ビュー

接続ビューボードは、ブラウザとサーバー間の接続の測定値を視覚的に要約することにより、Webパフォーマンスの問題を非常に簡単に特定できるため、非常に便利な機能でもあります。

DNS、初期接続、SSLネゴシエーションからビデオリソースなどに至るまで、接続ステータスを確認できます。この下には、WebサイトをロードしているデバイスのCPU使用率を示すグラフもあります。データレンダリング中に使用されるレベルを示す帯域幅インジケーターもあります。

リクエストの詳細

最後に、接続ビューの下に、リクエストの詳細とリクエストヘッダーの2つの分析ボードがあります。

リクエストの詳細ボードは非常に役立ち、コンテンツタイプ、リクエストの開始時間、ダウンロードされたバイト数など、そのリクエストに関連するデータとともに、リクエストされたすべてのリソースを一覧表示します。このテーブルは実際には並べ替え可能です…列ヘッダーをクリックするだけで、その特定の列で並べ替えることができます。

リクエストヘッダーボードは、ヘッダー情報とともにリクエストリソースのリストを提供します（そうです、あなたは推測しました）。詳細については、それぞれをクリックしてください。

結論

Webサイトのアクティビティを詳細に分析する必要がある場合、WebPageTestは使用するのに最適なツールです。提供される情報を深く掘り下げなくても、サイトが正常に機能しているかどうか、およびサイトのパフォーマンスを詳しく調べる必要があるかどうかをすばやく確認できます。そして何よりも、それは無料です！