ページ ロード エクスペリエンスの測定

このページでは、ページ ロード エクスペリエンスを測定するのに役立つ次のメトリックを有効にする方法について説明します。

Enable Speed Index

Speed Index (SI) is a measure to determine the page load performance by calculating how quickly the page contents are visibly populated. Speed Index is dependent on size of the Viewport and it is expressed in milliseconds. Lower page load time improves the Speed Index score.

In Splunk AppDynamics On-Premises, you can enable Speed Index while configuring the JavaScript Agent. Analyze the Speed Index scores and improve the page performance.

To view the Speed Index metrics, enable Speed Index while configuring the JavaScript Agent and inject the adrum.js script.

<head>
    <script type='text/javascript' charset='UTF-8'>
        (function(config){
            config.enableSpeedIndex = true;
            })(config.xhr || (config.xhr = {}));
        })(window["adrum-config"] || (window["adrum-config"] = {}));
    </script>
    <script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
    ...
</head>

Core Web Vitals の有効化

Google Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視覚的な安定性に関する実際のユーザーエクスペリエンスを測定する一連のメトリックです。Splunk AppDynamics On-Premises では、Core Web Vitals に次のメトリックが含まれます。
最大コンテンツの描画（LCP）
ページ上の最大の画像またはテキストブロックのレンダリング時間を報告します。
初回入力遅延（FID）
ユーザーインタラクションのページ応答時間を報告します。
累積レイアウトシフト（CLS）
ページのライフスパン全体で発生する予期しないレイアウトシフトごとに、レイアウトシフトスコアの最大バーストを報告します。

Google では、Web ページをランク付けするためのシグナルの 1 つとして Core Web Vitals を参照しています。そのため、SEO ランク付けを向上させユーザートラフィックを増やす Web サイトの健全性メトリックを維持する必要があります。詳細については、「 Core Web Vitals」を参照してください。

注: Core Web Vitals を有効にするには、ADRUM バージョンが 23.10.0 以上であることを確認します

Splunk AppDynamics On-Premises で、JavaScript エージェントの設定時に Core Web Vitals を有効にし、エージェントが Google の Core Web Vitals ライブラリと互換性のあるブラウザのメトリックを収集できるようにします。クエリ言語を使用して、Core Web Vitals のスコアを分析できます。詳細については、「Analytics ブラウザ Core Web Vitals レコードデータ」を参照してください。

Core Web Vitals メトリックを表示するには、JavaScript エージェントの設定時に Core Web Vitals を有効にし、adrum.js スクリプトを挿入します。

  1. ブラウザアプリケーションに移動します。

  2. 左側のパネルで、[Configuration] > [Configure the JavaScript Agent] に移動します。

  3. [Inject the instrumentation script] で、適切な詳細を含むスクリプトを指定します。

    <script charset="UTF-8" type="text/javascript">
window["adrum-start-time"] = new Date().getTime();
(function(config){
config.appKey = "SM-AFF-ACX";
config.adrumExtUrlHttp = "http://cdn.appdynamics.com";
config.adrumExtUrlHttps = "https://cdn.appdynamics.com";
config.beaconUrlHttp = "http://eum-shadow-master-col.saas.appd-test.com";
config.beaconUrlHttps = "https://eum-shadow-master-col.saas.appd-test.com";
config.useHTTPSAlways = true;
config.resTiming = {"bufSize":200,"clearResTimingOnBeaconSend":true};
config.maxUrlLength = 512;
config.enableCoreWebVitals = true;
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-23.10.0.4353.js"></script>

  4. Save をクリックします。

Core Web Vitals を有効にした後、ADQL によって作成されたメトリックを使用してカスタムダッシュボードを作成します。詳細については、「カスタムダッシュボード」を参照してください。