Web フロントエンドパフォーマンス - CDN - Alibaba Cloud ドキュメントセンター

Web フロントエンドパフォーマンスは、Web ページにモニタリングコードを導入することで、ユーザーアクセスデータをモニタリングします。これにより、ページの読み込み、ページの安定性、外部サービスへの呼び出しの成功率など、Webサイトのパフォーマンスを監視できます。

一般的なシナリオ

Webサイトへのアクセスの問題がパフォーマンスによるものか、その他の理由によるものかを確認します。
Webサイト内には多数の非同期データ呼び出しがありますが、呼び出しのパフォーマンスと成功率は不明です。
リージョンによってユーザーアクセスには違いがあります。アクセス品質の悪いリージョンを監視し、改善する必要があります。

前提条件

ARMS が有効化されていること。詳しくは、「ARMS の有効化」をご参照ください。

説明

ARMSを有効にした後、Web Frontend Performanceの15日間の無料トライアルがあります。無料トライアルの有効期限が切れた後、この機能を引き続き使用するには、Web Frontend PerformanceのBasic EditionまたはPro Editionを有効化する必要があります。

課金の例

Web Frontend PerformanceはAlibaba Cloud CDNおよびARMSによって実装され、ARMSによって課金されます。
ARMSを有効にした後、Web Frontend Performanceの15日間の無料トライアルがあります。無料トライアル中、無料クォータは1日あたり20,000回のデータレポートです。クォータが使い果たされると、サービスは自動的に停止され、翌日に再開されます。
試用期間が終了すると、ARMSブラウザモニタリングのBasic EditionまたはPro Editionを有効化できます。従量課金の課金方法が利用可能です。詳細については、「概要」をご参照ください。

手順

Web Frontendパフォーマンスでのモニタリングタスクの作成

Alibaba Cloud CDN コンソールにログインします。
左側のナビゲーションウィンドウで、[アプリケーションセンター] をクリックします。
[アプリケーションセンター] ページで、[Webフロントエンドパフォーマンス] セクションの [今すぐ試す] をクリックします。

[Webフロントエンドパフォーマンス] ページで、[タスクの作成] をクリックし、次のパラメーターを設定します。

パラメーター

説明

アプリケーションタイプ

フロントエンド監視をサポートするアプリケーション。有効な値：

ウェブ&H5
DingTalkミニプログラム
Alipayミニプログラム
WeChat miniプログラム

ドメイン名

監視するwebアプリケーションの高速化ドメイン名。

表示される次のダイアログボックスで、[今すぐ設定] をクリックします。

webアプリケーションのARMSブラウザ監視エージェントのインストール
詳細については、「ブラウザーモニタリングエージェントのインストール」をご参照ください。
1. ARMS設定ページの [SDK Extension Configuration] セクションで、必要なオプションを選択します。ページに貼り付けるBIプローブのコードは、選択したオプションに基づいて生成されます。
2. [BIプローブのコピー /貼り付け] セクションで、ブラウザー監視エージェントのインストール方法を選択します。
  - 非同期読み込みまたは同期読み込み: 提供されたコードをコピーし、HTMLページの <body> 要素の最初の行に貼り付けてから、アプリケーションを再起動します。
  - NPMパッケージ:
    1. 次のコマンドを実行してnpmパッケージをインストールします。
```
npm install alife-logger --save
```
    2. コンソールから次のコマンドをコピーして実行し、npmパッケージを初期化します。
```
const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});
```

webパフォーマンスデータの表示

Alibaba Cloud CDNコンソールのWebフロントエンドパフォーマンスページで、[データの表示] をクリックします。

查看数据

Web Frontendパフォーマンスの概要ページでは、すべての重要なモニタリングデータをリアルタイムで表示できます。詳細については、「コンソール機能」をご参照ください。

监控总览

データフィールド

項目	説明
JSエラー	JSエラー率: JSエラー率。昨日の平均と比較: 前日の平均JSエラー率と比較した平均JSエラー率の増加または減少率。統計チャート: 過去1時間のJSエラー率の曲線。エラー率でランク付けされたページ: JSエラー率ランキング。
過去24時間のアラート	アラーム: アラートの数。最近の3つのアラーム: 過去24時間のブラウザ監視からのアラート。
PV/UV	今日のPV: 当日の監視対象アプリケーションのページビュー (PV) の数。今日のUV: 当日の監視対象アプリケーションのユニークビジター (UV) の数。昨日と比較: 前日のPVおよびUVと比較したPVおよびUVの増減率。統計チャート: 過去1時間のPVまたはUVの曲線。統計表: 最も多くのPVおよびUVならびにそれらの対応するPVおよびUVを有する上位5つの領域。ハイページビューTOP5: 最も多くのPVを持つ上位5つのサービス。
APIリクエスト成功率	APIリクエスト成功率: APIリクエストの成功率。昨日の平均と比較: 前日のAPIリクエスト成功率と比較したAPIリクエスト成功率の増減率。統計チャート: 過去1時間のAPIリクエスト成功率の曲線。 API成功率によるサービスランキング: APIリクエスト成功率ランキング。
ページの読み込み速度	ページ速度: 最初のペイント時間 (FPT) 。単位：ミリ秒。昨日の平均と比較: 前日の平均ページ速度と比較したページ速度の増減率。統計チャート: 過去1時間のページ速度の曲線。低ページ速度トップ5: ページ速度が最も低い上位5つのサービス。

フロントエンドのパフォーマンス警告の設定

Alibaba Cloud CDNコンソールのWebフロントエンドパフォーマンスページで、[フロントエンドパフォーマンスアラートの設定] をクリックします。

设置前端性能告警

最初のペイント時間 (FPT) 、最初の意味のあるペイント (FMP) 、ページ、リージョンなど、複数のアラートメトリックを選択して、アラートとアラートルールを設定できます。アラートがトリガーされると、指定された通知方法に基づいて、アラート通知が連絡先またはDingTalkグループチャットに送信されます。このトピックでは、RUMアラートで動的しきい値を設定する方法について説明します。詳細については、「ブラウザーモニタリングアラートルールの作成と管理」をご参照ください。