【Flutter】Firebase Performanceで各画面の初回描画時間を計測するシンプル手法〜備忘録〜

はじめに

Firebase Performance Monitoring は、アプリ起動時間やネットワークリクエストなどを自動で計測してくれる便利なツールです。
ただし公式ドキュメントにある通り、画面レンダリング（画面単位）の自動計測はできません。

Flutter では、自動画面レンダリングのパフォーマンス モニタリングを、個別の Flutter 画面で行うことはできません。1 つのビュー コントローラがネイティブで Flutter アプリケーション全体をカプセル化するため、基盤となるネイティブの Firebase SDK は画面の遷移を認識しません。

Flutter は単一の FlutterActivity（または FlutterViewController）内で全画面を描画する仕組みなので、Firebase Performance Monitoring のSDK からは個々の Flutter 画面遷移を検知できません。

それでも計測したいケースとして

ユーザー体感で重要なのものの一つとして、操作してから「コンテンツが表示されるまでの待ち時間」です。

そのため今回は、ルート遷移が発生してから Flutter フレームワークが描画処理を完了した直後までの時間（この記事ではこれを「初回描画時間」と呼ぶ）を計測してみました。

厳密な意味での「レンダリング時間」ではありませんが、画面ごとの初回表示にかかった時間を把握することで、UI が重い画面や初期化処理に時間がかかっている箇所を見つけやすくなります。

※なお「初回表示から API のレスポンス完了まで」といった計測も可能ですが、本記事では扱いません。

前提

本記事は 備忘録のため、参考程度にご覧いただきたいのと、他により良い方法や間違いなどあればご教授いただけますと嬉しいです。

なお、実際のプロジェクトではアーキテクチャや責務分離の方針に沿って実装する必要があります。ここで示しているサンプルコードはあくまで最小限のコード例であり、エラーハンドリングなどは省略していますので、その点はご留意ください。

また、Performance Monitoring の基本的な使い方は公式ドキュメントを参照してください。

カスタムトレースでの実装

Firebase Performance の カスタムコードトレースを利用すれば、任意の処理区間の所要時間を記録できます。

今回は AutoRouteObserver を使って画面遷移を検知し、以下のように計測します。

① didPush で新しい画面への遷移を検知 → トレース開始

didPush: 新しい画面がナビゲーションスタックに追加された（＝画面遷移が始まった）直後に呼ばれるメソッドです。ここでトレースを開始します。

②addPostFrameCallbackで初回フレーム描画完了を検知 → トレース停止

addPostFrameCallback: Flutterのフレームワークが描画処理を完了した「直後」に一度だけコールバックを登録できる仕組みです。

実際にユーザーの目に見える瞬間と完全に一致するわけではありませんが、最も近いタイミングとして扱えます。

サンプルコード

import 'package:auto_route/auto_route.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:firebase_performance/firebase_performance.dart';

class PerformanceObserver extends AutoRouteObserver {
  void _startTrace(Route route) {
    final routeName = route.settings.name;

    final trace =
        FirebasePerformance.instance.newTrace('${routeName}_first_paint');
    trace.start();

    // 初回フレーム描画完了後にストップ
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await trace.stop();
    });
  }

  @override
  void didPush(Route route, Route? previousRoute) {
    _startTrace(route);
    super.didPush(route, previousRoute);
  }
}

MaterialApp.router の navigatorObservers にこの PerformanceObserver を追加すれば、画面遷移ごとに初回描画時間が Firebase コンソールに記録されます。

参考