@angular/fire 5.2 で Firebase Performance Monitoring を使ってみた

5552 ワード
AngularFire2 Angular Firebase Angular8 Angular テキストリンク

はじめに

先月行われた Google I/O で Firebase Performance Monitoring for Web Apps が発表されました。

これが何なのかを大雑把に説明すると、最近重要視されている FP や FCP といった Web パフォーマンスに関する指標や、ボトルネックとなっているネットワークを検出してダッシュボードにまとめてくれるサービスになります。

また、つい先日 SDK 本体に追いつくように @angular/fire にもこの機能が実装されたので実際にある程度使ってみた結果をまとめようと思います。

実装方法

実装方法は @angular/fire 及び firebase SDK 本体を最新版にアップデートして @angular/[email protected] で追加された AngularFirePerformanceModule を import するだけです。

import { AngularFireModule } from '@angular/fire';
+import { AngularFirePerformanceModule } from '@angular/fire/performance';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
+   AngularFirePerformanceModule,
    ...
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

留意点

反映に時間がかかる

最大 ~時間かかります という表記はそれよりもだいぶ早く終わることが多いですが、Firebase Performance Monitoring の場合は本当にドキュメント通り 12 時間程度かかります。
実際に計測したわけではないですが、お昼にリリースして翌日確認できるレベルです。そわそわしますが気長に待ちましょう...

Performance Monitoring の結果が表示されていることを確認します。
結果は通常 12 時間以内に表示されます。

デフォルトで閲覧できる指標

今回はひとまず追加設定を何もせずに利用し、下記の指標が測定できました。

  • 地域ごとのネットワークレスポンスのレイテンシ
  • ページごとの初回ペイント、コンテンツの初回ペイント（FP, FCP）
  • isStable

@angular/fire 経由で Firebase Performance Monitoring を利用するとデフォルトで isStable が計測できます。ちょっとお得ですね。
isStable はその名の通り Angular アプリケーションが非同期処理を行うことなく安定している状態のことです。逆にアプリケーション起動時から非同期タスクを継続的に繰り返していると isStable にはなりません。

  • domContentLoadedEventEnd

ナビゲーション後に、最初の HTML ドキュメントが完全に読み込まれて解析された直後のタイムスタンプ（DOMContentLoaded）。ただしこれは、スタイルシート、画像、サブフレームの読み込みが完了したことを意味するものではありません。

  • domInteractive

ナビゲーション後に、ユーザー エージェントが現在のドキュメントの準備状態を「インタラクティブ」に設定する直前のタイムスタンプ。

  • loadEventEnd

ナビゲーション後に、現在のドキュメントの読み込みイベントが完了したときのタイムスタンプ。

ユーザーが最初にサイトで操作を行った時点から、ブラウザがその操作に応答できた時点までの経過時間。

  • ブラウザごとの速度
  • アクセスのあった地域
  • 回線の種類（4g, 3g, ...etc）
  • ServiceWorker 実行可能環境の割合
  • 表示状態
  • 各数値のフィルタング
  • 通信先ごとの応答時間
    • example.com/*.js と example.com/*.css は自動で別々に測定される

おわりに

@angular/fire を利用すると、たった 2 行を追加するだけでパフォーマンスの劣化なしに上記の指標が計測できるようになります。
今回は紹介しませんでしたが、提供されている API を利用することで各サービス用のオリジナル指標も簡単に作成できるので @angular/fire を利用している方はぜひ導入してみてください！

参考