Webページ分析

概要

Webページ分析では、Webページのパフォーマンスを監視します。
HTML、CSS、JavaScript、画像など、ページの個別コンポーネントすべてを分析するのに有用です。Webページ分析は、PageSpeed Insightsのルールと提言をもとに、サイトのパフォーマンス最適化を支援します。

Webページ分析監視の新規作成

Webページ分析監視の前提条件こちら

REST APIを使用した、Webページ分析監視新規作成方法こちら

以下の手順でWebページ分析監視を作成します。

  1. [新規監視]→[新規監視の追加]をクリック
  2. Webサーバー/サービスカテゴリの[Webページ分析]を選択
  3. Webページ分析の[表示名]を指定
  4. 監視する[WebページURL]を入力
  5. [ページ読み込みタイムアウト]欄にページ読み込みの最長待機時間を入力(単位:秒)
  6. [読み込み後の待機]欄に、ページ読み込み後の待機時間を入力(単位:秒)
  7. Webサイトへの接続に使う[HTTPメソッド]を指定
    POSTメソッドを選ぶ場合は、リクエストペイロードを入力してください。
    パラメーター名と値は、_sep_で区切ります。
    複数パラメーターを指定するには、#で区切ります。
    例:username_sep_admin#password_sep_admin
  8. リクエストヘッダーを修正するには、[カスタムHTTPヘッダー]を指定
    ヘッダー名と値は、_sep_で区切ります。
    複数ヘッダーを指定する場合、#で区切ります。
    例:User-Agent_sep_Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.172 Safari/537.36 Vivaldi/2.5.1525.48#Accept-Charset_sep_utf-8>
  9. 必要に応じて、認証用[ユーザー名]と[パスワード]を入力(Basic認証)
  10. 監視から[ブロックするドメイン]を指定
    区切りは「|」で区切ります。
    例:adshost2.com|ad.turn.com
  11. ページレスポンスでコンテンツチェックを行う場合は、[レスポンスにコンテンツ チェックを追加]を選択
    • コンテンツチェックに使用する文字列は、URLのページソースに存在するものを設定してください。
    • コンテンツ検索では大文字・小文字を区別します。複数単語を指定すると、コンテンツマッチはそれぞれの単語に別途実行されます。空白文字は区切り記号として扱います。
    • 例えば、applications managerは、applicationsmanager別個にマッチを行います。双方を含むテキスト全体にマッチさせる場合は、"applications manager"を指定してください。
  12. WebページでSSL証明書を監視するには、[SSL証明書監視]を有効に設定
    この項目を有効にした場合、次の詳細も指定してください。
    • SSL証明書を監視する[ドメイン名]を入力
      ドメイン名はHTTPなどプロトコルなしで指定してください。
      :www.zoho.com
    • サーバーを実行している[ポート]を入力
    • サイト接続に使用する[SSLのバージョン]を選択
      デフォルトの[自動]オプションでは、あらゆるバージョンで接続をトライします。
    • サーバーがプロキシ経由で接続されている場合は、[ドメイン接続にプロキシを必要とする]を選択
      [設定]タブからプロキシの設定が必要です。
    • SSL証明書名のミスマッチエラーを無視することもできます。
    • 無効なroot証明書や中間証明書を無視する<の選択も可能です。
    • 最後に[タイムアウト]値を入力してください(秒)。
  13. ポーリング間隔を分単位で指定
  14. Webページ分析監視を関連付ける監視グループを検索欄のドロップダウンから選択(任意項目)
    監視は複数のグループに関連付けることができます。
  15. [監視の追加]をクリック ネットワークからWebページ分析が検出され、監視が開始されます。

監視パラメーター

[監視]タブをクリックして、 [監視]カテゴリビューに移動します 。「>Webサーバー/サービス」セクションで 「Webページ分析」をクリックします。
Webページ分析監視の一括設定ビューが3つのタブに表示されます。

  • [可用性]タブ:最新24時間または30日間の可用性履歴がわかります。
  • [パフォーマンス]タブ:最新24時間または30日間のステータスとイベントを確認可能です。
  • [リストビュー]タブ:一括管理設定を実行できます。

リストされている個々の監視をクリックすると、次の情報が表示されます。Webページ分析監視で監視されるメトリクスのリストは次のとおりです。

概要

パラメーター 説明
Webページ サマリ
WebページURL 監視するWebページのURLです。
ページ読み込み時間 Webページのコンテンツすべてを読み込み、ブラウザーのウィンドウに表示するまでかかる時間を指します(ミリ秒)。
総リクエスト Webページ読み込みのため送信されたリクエストの総数を示します。
ページ サイズ Webページの合計サイズを指します(KB)。
SSL証明書期限切れまでの日数 SSL証明書が失効するまでの残り日数を表します。
ページ スコア ページ読み込み時間、総リクエスト数、ページ サイズにもとづき決定する、PageSpeed Insightsのスコアを示します。
応答時間サマリ
DNS時間 ドメイン名のリクエストを解決するのにかかる時間を指します(ミリ秒)。
接続時間 サーバーとのTCP接続確立にかかる時間を表します(ミリ秒)。TCPハンドシェイクやリトライも、SSL関連の時間も含みます。
先頭バイト到達時間(First Byte Time) サーバーへの接続が確立してから、ベースページの最初の応答が到達し始めるまでにかかる時間を表します(ミリ秒)。
レンダリング開始 ブラウザー画面に最初の目に見える変化が現れるまでの時間を指します(ミリ秒)。
Document Complete ページのリソースすべてがダウンロードされるまでにかかる時間を示します(ミリ秒)。
ページ読み込み時間 Webページのコンテンツすべてを読み込み、ブラウザーのウィンドウに表示するまでかかる時間を指します(ミリ秒)。
ドメイン サマリ
ドメイン名 リクエスト送信対象のドメインの名前です
IPアドレス ドメインごとのIPアドレスです。
リクエスト数 ドメインごとの送信リクエスト総数です。
サイズ 各ドメインからのデータ転送量を指します(KB)。
平均応答時間 ドメインごとに、1リクエストに対してレスポンスを完全に送るまでかかる平均時間を示します(ミリ秒)。
平均スループット 応答時間中のドメインからのデータ転送速度を指します(KB/秒)。

ネットワーク ログ

このタブでは、HTML、JavaScript、CSS、画像などのWebコンポーネントすべてにわたり、通信時間の詳細を滝グラフで表示します。

パラメーター 説明
リソース名 リソースの名前です。
ステータス コード リソースのHTTPレスポンス ステータス コードを指します。
サイズ リソースのサイズを表します(KB)。
コンテンツ タイプ 各リソースで利用できるコンテンツのタイプを示します。
総リクエスト Webページ読み込みのため送信されたリクエストの総数を示します。
ページ サイズ Webページの合計サイズを指します(KB)。
ページ読み込み時間 Webページのコンテンツすべてを読み込み、ブラウザーのウィンドウに表示するまでかかる時間を指します(ミリ秒)。

SSL証明書詳細

このタブではSSL証明書詳細を、発行者側と購買者側の双方にわたり表示します。

パラメーター 説明
発行先
一般名(CN) SSL証明書発行先のホストやドメインの名前です
組織(O) SSL証明書発行先の組織の名前です
組織単位(OU) リクエストを行う組織単位の名前です
発行者
一般名(CN) SSL証明書を発行するホストやドメインの名前です
組織(O) SSL証明書を発行する組織の名前です
組織単位(OU) リクエストを行う組織単位の名前です
有効性
発行日 SSL証明書が発行された日付を指します。
失効日 SSL証明書が期限切れとなる日付を指します。
SSL証明書期限切れまでの日数 SSL証明書が失効するまでの残り日数を表します。

リソース詳細

パラメーター 説明
リクエスト サマリ
リクエスト タイプ リソースが送信するリクエストのタイプです。
リクエスト数 リソースがタイプごとに送信するリクエストの数を示します。
サイズ リソースにあるタイプごとのデータ転送量です(KB)。
スクリーンショット:Webページのスクリーンショットを、ページに存在する各種コンポーネントのサイズや数の円グラフなどとあわせて示します。
リソース サイズ(%) リソースの合計サイズを示します(%)。
リソース数(%) リソースの総数を示します(%)。

PageSpeed Insights

PageSpeed InsightsはWebページ コンテンツを分析し、高速化の提言を行います。分析はルールにもとづき行い、Webページのパフォーマンスに応じてスコアを示します。

このタブでは、PageSpeed Insights情報を、スコアとあわせて表示します。

パラメーター 説明
PageSpeedスコア
ルール PageSpeedのルールを示します。詳細は、該当セクションで確認できます。
スコア Webページが各ルールで取得したスコアを示します。
グレード 各ルールのスコアで取得したグレードを示します。

PageSpeed Insightsのルール

Webページ パフォーマンスの分析でApplications Managerが使うPageSpeed Insightsルールは次のとおりです。

  • 不良リクエストを避ける:リンク切れや応答しないコンテンツを削除すると、404/410エラーと無駄なリクエストを回避できます。
  • CSS @importを避ける:外部スタイルシートのインポートでCSS @importを避けると、読み込み時の追加遅延が減ります。
  • JavaScriptの解析を遅らせる:JavaScriptの量を最小限にしたり、遅延実行を利用したりすると、読み込み時の追加遅延を減らせます。
  • 圧縮を有効にする:転送するファイルをgzipで圧縮すると、ページ全体のサイズの縮小と転送速度向上に役立ちます。
  • キープ アライブを有効にする:HTTP Keep-AliveかHTTP持続的接続(persistent connection)で、同じTCP接続で複数リクエストの送受信を可能にすると、遅延が短くなります。
  • ブラウザーのキャッシュを活用する:ブラウザーのキャッシュの利用で、再訪問時のページ読み込み回数を減らせます。
  • ランディング ページのリダイレクトをキャッシュ可能にする:リダイレクトをブラウザーにキャッシュすれば、再訪問時のページ読み込み回数が減ります。
  • CSSを最低限にする:CSSコードを最小限かつ圧縮すれば、ダウンロード、解析、実行が高速になります。
  • HTMLを最低限にする:HTMLコード(JavaScript・CSSのコードを含む)を最小限かつ圧縮すれば、ダウンロード、解析、実行が高速になります
  • JavaScriptを最低限にする:JavaScriptを最小限かつ圧縮すれば、ダウンロード、解析、実行が高速になります
  • リダイレクトを最低限にする:HTTPリダイレクトを最小限にすれば、追加のRTTと待機時間を減らせます。
  • 画像を最適化する:ページ読み込みの時間を最小限にするには、適切なサイズの画像を使ってください。
  • 静的リソースからのクエリを削除する:静的リソースへの参照からクエリ文字列を削除すると、キャッシュが有効に働きます。
  • 一貫したURLからリソースを提供する:リソースを一意のURLからダウンロードするようにすれば、重複データ量やRTTが減ります。
  • キャッシュ バリデーターを指定する:キャッシュ バリデーター(Last-Modifier、ETagヘッダー)を静的リソースすべてに設定すれば、確実にブラウザーにキャッシュされます。
  • 「Vary: Accept-Encoding」ヘッダーを指定する:HTTPッダー「Vary: Accept-Encoding」の指定で、圧縮前後の双方のデータが保存され、パフォーマンスが向上します。
  • 文字コードを指定する:HTTPレスポンス ヘッダーへの文字コード指定で、ブラウザーの処理が高速になり、読み込み時間が短縮します。