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

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

速度インデックスの有効化

速度インデックス（SI）は、ページのコンテンツが目に見える形で入力される速さを計算することで、ページのロードパフォーマンスを判断するための指標です。速度インデックスはビューポートのサイズに依存し、ミリ秒単位で表されます。ページのロード時間が短くなると、速度インデックスのスコアが向上します。

Splunk AppDynamics オンプレミスでは、JavaScript エージェントの設定時に速度インデックスを有効にできます。速度インデックスのスコアを分析して、ページのパフォーマンスを向上させることができます。

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

CODE 
<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 オンプレミス では、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 オンプレミス で、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] で、適切な詳細を含むスクリプトを指定します。

    JSON 
    <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 によって作成されたメトリックを使用してカスタムダッシュボードを作成します。詳細については、「カスタムダッシュボード」を参照してください。