Core Web Vitals メトリックを収集する JavaScript エージェントの設定

Google Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視覚的な安定性に関する実際のユーザーエクスペリエンスを測定する一連のメトリックです。Google では、Web ページをランク付けするためのシグナルの 1 つとして Core Web Vitals を参照しています。そのため、SEO ランク付けを向上させユーザートラフィックを増やす Web サイトの健全性メトリックを維持する必要があります。詳細については、「Core Web Vitals」を参照してください。

Splunk AppDynamics SaaS で JavaScript エージェントを設定して、次のメトリックを Cisco Cloud Observability に送信します。

Largest Contentful Paint (LCP)：ページ上の最大の画像またはテキストブロックのレンダリング時間を報告します。
First input Delay (FID)：ユーザーインタラクションのページ応答時間を報告します。
Cumulative Layout Shift (CLS)：ページのライフスパン全体で発生する予期しないレイアウトシフトごとに、レイアウトシフトスコアの最大バーストを報告します。

Core Web Vitals を有効にすると、Splunk AppDynamics SaaS のコントローラ UI に Core Web Vitals メトリックが表示されます。「ブラウザアプリケーションダッシュボードでの Core Web Vitals の表示」を参照してください。

前提条件

次の条件が満たされていることを確認します。

Cisco Cloud Observability ライセンスとCisco Observability Platformテナント。
管理コンソールでの eum.coexistence.enabled : true 設定の指定。
Splunk AppDynamics カスタマーサポートでこの設定を有効にします。

Core Web Vitals の有効化

Core Web Vitals を有効にするブラウザアプリケーションの JavaScript エージェントを設定します。

ブラウザアプリケーションに移動します。
左側のパネルで、[Configuration ] > [Configure the JavaScript Agent] に移動します。

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

<script charset="UTF-8" type="text/javascript">
    window["adrum-start-time"] = new Date().getTime();
    (function (config) {
        //...other configs
        config.enableCoreWebVitals = true;
    })(window["adrum-config"] || (window["adrum-config"] = {}));
</script>

XML

Save をクリックします。

Core Web Vitals を有効にすると、JavaScript エージェントがブラウザアプリケーションの Core Web Vitals メトリックの収集を開始します。

ブラウザアプリケーションダッシュボードでの Core Web Vitals の表示

コントローラ UI のブラウザアプリケーションダッシュボードで Core Web Vitals メトリックを表示できます。

Core Web Vitals ウィジェットの追加
[Pages & Ajax Requests] の列の更新
セッション概要の表示

Core Web Vitals ウィジェットの追加

以下の手順を実行して、ブラウザアプリケーションダッシュボードにウィジェットを追加します。

[User Experience] で、ブラウザアプリケーションを選択します。
[add icon.png] をクリックします。
[Core Web Vitals] を選択します。
このウィジェットには、Largest Contentful Paint, First input Delay, と Cumulative Layout Shift が表示されます。

詳細については、「ブラウザアプリダッシュボード」を参照してください。

[Pages & Ajax Requests] の列の更新

[Pages & Ajax Requests] で、[View Options] を更新して、各レコードに次の Core Web Vitals メトリックを追加できます。

Largest Contentful Paint
Cumulative Layout Shift
First Input Display

[Pages & Ajax Requests] でページを選択すると、そのページの Core Web Vitals メトリックが表示されます。また、[Timing Breakdown] チャートに Large Contentful Paint の期間も表示されます。

詳細については、「Pages & Requests」を参照してください。

セッション概要の表示

[Real Users > Sessions] で、ブラウザセッションを選択します。[Session Summary] には、各ページの Core Web Vitals メトリックが表示されます。詳細については、「セッション UI」を参照してください。