Firebase PerformanceMonitoringを使用して読み込み時間と画面レンダリングを測定する

1.はじめに

最終更新日:2021年3月11日

ビューのパフォーマンスを測定する必要があるのはなぜですか?

ビューは、ユーザーエクスペリエンスに直接影響するAndroidアプリケーションの重要な部分です。たとえば、アクティビティまたはフラグメントには、ユーザーが操作するビューコンポーネントを保持するUIが含まれています。ユーザーは、UIが画面に完全に描画されるまで、UIのコンテンツ全体を表示することはできません。画面が遅くフリーズすると、アプリとのユーザーインタラクションが直接損なわれ、ユーザーエクスペリエンスが低下します。

Firebase Performance Monitoringは、これらのパフォーマンス指標をすぐに利用できませんか?

活動のためではなく、自動的に、そのようなアプリの開始時間とアウト・オブ・ボックス、いくつかのパフォーマンスデータをキャプチャする監視Firebaseパフォーマンス(つまり、あなたの最初の唯一の活動のためのロード時間)と、画面のレンダリング性能(すなわち、遅い、冷凍フレームフラグメント)。ただし、業界のアプリには通常、多くのアクティビティはなく、1つのアクティビティと複数のフラグメントがあります。また、多くのアプリは通常、より複雑なユースケース向けに独自のカスタムビューを実装しています。それは、インストルメントにより、両方の活動およびフラグメントのロード時間や画面のレンダリング性能を測定する方法を理解するのに便利ですので、カスタムコードのトレースを自分のアプリで。このコードラボを簡単に拡張して、カスタムビューコンポーネントのパフォーマンスを測定できます。

あなたが学ぶこと

  • AndroidアプリにFirebasePerformanceMonitoringを追加する方法
  • アクティビティまたはフラグメントのロードを理解する
  • カスタムコードトレースをインストルメント化して、アクティビティまたはフラグメントのロード時間を測定する方法
  • 画面のレンダリングとスロー/フリーズフレームとは何かを理解する
  • 遅い/フリーズした画面を記録するために、メトリックを使用してカスタムコードトレースをインストルメント化する方法
  • 収集した指標をFirebaseコンソールで表示する方法

必要なもの

  • Android Studio4.0以降
  • Androidデバイス/エミュレーター
  • Javaバージョン8以降

2.セットアップ

コードを取得する

次のコマンドを実行して、このコードラボのサンプルコードのクローンを作成します。これは、という名前のフォルダが作成されますcodelab-measure-android-view-performanceマシン上:

$ git clone https://github.com/FirebaseExtended/codelab-measure-android-view-performance.git
$ cd codelab-measure-android-view-performance

マシンにgitがない場合は、GitHubから直接コードをダウンロードすることもできます。

インポートmeasure-view-performance-startのAndroid Studioにプロジェクトを。おそらく、おそらくいくつかのコンパイルエラーまたは欠落に関する警告が表示されますgoogle-services.jsonファイルを。これは、このステップの次のセクションで修正します。

このコードラボでは、我々は、使用しますFirebaseアシスタントのAndroid Studio内からのすべて- Firebaseのプロジェクトで私たちのAndroidアプリを登録して、私のAndroidプロジェクトに必要なFirebase設定ファイル、プラグイン、および依存関係を追加するプラグインを!

アプリをFirebaseに接続します

  1. 更新は、あなたは、Android StudioとFirebaseアシスタントの最新バージョンを使用していることを確認するためにチェック> Androidのメーカー/ヘルプに移動します。
  2. [ツール]> [Firebaseは、アシスタントのペインを開きます。

e791bed0999db1e0.png

  1. あなたのアプリに追加するパフォーマンスの監視を選択し、クリックがパフォーマンス監視を使ってみましょう
  2. Firebase(これはブラウザでFirebaseコンソールを開きます)とあなたのAndroidプロジェクトを接続するためにFirebaseに接続]クリックします。
  3. Firebaseコンソールで、クリックFirebaseプロジェクト名を入力します(すでにFirebaseプロジェクトを持っている場合、あなたが代わりにその既存のプロジェクトを選択することができます)、その後、プロジェクトを追加します。クリックして続行しFirebaseプロジェクトと新しいFirebaseアプリケーションを作成するために、条件を受け入れます。
  4. あなたは、次のあなたのAndroid Studioプロジェクトに新しいFirebaseアプリケーションを接続するためのダイアログが表示されます。

42c498d28ead2b77.png

  1. 戻るのAndroid Studioで、アシスタントペインで、あなたのアプリがFirebaseに接続されていることを確認が表示されるはずです。

dda8bdd9488167a0.png

アプリにパフォーマンスモニタリングを追加する

アンドロイドStudioのアシスタントペインで、あなたのアプリケーションにパフォーマンスの監視を追加]をクリックします。

あなたはすべての必要な依存関係が追加されていることを確認するには、Android Studioのアプリを同期する必要があり、その後、変更を受け入れ、ダイアログが表示されるはずです。

9b58145acc4be030.png

最後に、あなたはすべての依存関係が正しく設定されていることのAndroid Studioのアシスタントペインに成功メッセージが表示されるはずです。

aa0d46fc944e0c0b.png

追加のステップとして、「(オプション)デバッグログを有効にする」ステップの指示に従うことによって、デバッグログを有効にします。同じ命令もで利用可能なパブリックのドキュメント

3.アプリを実行します

アプリをPerformanceMonitoring SDKと正常に統合すると、プロジェクトがコンパイルされます。 Androidのメーカーでは、お使いの接続のAndroidデバイス/エミュレータでアプリをビルドして実行するファイル名を指定して実行>実行「アプリ」をクリックしてください。

アプリには、次のように、対応するアクティビティとフラグメントに移動する2つのボタンがあります。

410d8686b4f45c33.png

このコードラボの次の手順では、アクティビティまたはフラグメントの読み込み時間と画面レンダリングのパフォーマンスを測定する方法を学習します。

4.アクティビティまたはフラグメントのロードを理解する

このステップでは、アクティビティまたはフラグメントのロード中にシステムが何を行っているかを学習します。

アクティビティの読み込みを理解する

活動のために、ロード時間は、最初のフレームが完全に(あなたのユーザーは最初の活動のための完全なUIが表示されますとき、これは、画面上に描画されるまで、Activityオブジェクトはすべての方法を作成したときから開始時間として定義されます時間)。アプリが完全に描画された場合に測定するには、使用することができますreportFullyDrawn()アプリケーションの起動およびすべてのリソースやビュー階層の完全な表示の間の経過時間を計測する方法を。

あなたのアプリが呼び出したときにハイレベルで、 startActivity(Intent) 、システムが自動的に次の処理を行います。各プロセスの完了には時間がかかります。これにより、アクティビティが作成されてから、ユーザーが画面にアクティビティのUIが表示されるまでの時間が長くなります。

c20d14b151549937.png

フラグメントのロードを理解する

フラグメントのためのロード時間が断片はすべての道フラグメントビューの最初のフレームまで、そのホストのアクティビティに接続があったときから開始時間として定義されている活動と同様に、完全に、画面上に描画されます。

5.アクティビティの読み込み時間を測定します

最初のフレームでの遅延はユーザーエクスペリエンスの低下につながる可能性があるため、ユーザーが経験している初期ロード遅延の量を理解することが重要です。あなたは楽器できるカスタムコードのトレースは、このロード時間を測定します:

  1. (という名前のカスタムコードのトレース開始TestActivity-LoadTime Activityオブジェクトが作成されるとすぐにActivityクラスに)。

TestActivity.java

public class TestActivity extends AppCompatActivity {   
    // TODO (1): Start trace recording as soon as the Activity object is created.
    private final Trace viewLoadTrace = FirebasePerformance.startTrace("TestActivity-LoadTime");

    // ...

}
  1. オーバーライドonCreate()コールバックを、そしてによって追加ビューを取得setContentView()メソッドを。
@Override     
public void onCreate(Bundle savedInstanceState) {    
    super.onCreate(savedInstanceState);          

    // Current Activity's main View (as defined in the layout xml file) is inflated after this            
    setContentView(R.layout.activity_test);          

    // ...

    // TODO (2): Get the View added by Activity's setContentView() method.         
    View mainView = findViewById(android.R.id.content);     

    // ...
}
  1. 私たちは、の実装含めましたFistDrawListener :2つのコールバックを持って、 onDrawingStart()onDrawingFinish()より詳細については次のセクションを参照FirstDrawListener 、何その性能に影響を与える可能性が)。登録FirstDrawListener活動年代の終わりonCreate()コールバック。あなたは止めるべきviewLoadTraceしてonDrawingFinish()コールバック。

TestActivity.java

    // TODO (3): Register the callback to listen for first frame rendering (see
    //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when View drawing is
    //  finished.
    FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {              
        @Override             
        public void onDrawingStart() {       
          // In practice you can also record this event separately
        }

        @Override             
        public void onDrawingFinish() {
            // This is when the Activity UI is completely drawn on the screen
            viewLoadTrace.stop();             
        }         
    });
  1. アプリを再実行します。続いて、「メトリックログのトレース」でlogcatをフィルタリングします。タップLOAD ACTIVITYボタンを押すと、以下のようなログを探します。
I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

🎉おめでとうございます!アクティビティの読み込み時間を正常に測定し、そのデータをFirebase PerformanceMonitoringに報告しました。記録された指標は、このコードラボの後半でFirebaseコンソールに表示されます。

FirstDrawListenerの目的

ただ上のセクションでは、登録されたFirstDrawListener 。目的FirstDrawListener最初のフレームが始まっおよび描画が完了したときに測定することです。

これは、実装ViewTreeObserver.OnDrawListenerして上書きしますonDraw()ビューツリーが描かれようとしているときに呼び出されるコールバックを。これは、2つのユーティリティのコールバックを提供するために、結果をラップonDrawingStart()onDrawingFinish()

完全なコードFirstDrawListener 、この中に見つけることができるコードラボのソースコード

6.フラグメントのロード時間を測定します

フラグメントのロード時間の測定は、アクティビティのロード時間を測定する方法と似ていますが、若干の違いがあります。ここでも、私たちは楽器よカスタムコードのトレースを

  1. オーバーライドonAttach()コールバックをし、自分の記録を開始fragmentLoadTrace 。私たちは、このトレース名前を付けTest-Fragment-LoadTime

前の手順で説明したように、Fragmentオブジェクトはいつでも作成できますが、ホストアクティビティにアタッチされている場合にのみアクティブになります。

TestFragment.java

public class TestFragment extends Fragment {

   // TODO (1): Declare the Trace variable.
   private Trace fragmentLoadTrace;

   @Override
   public void onAttach(@NonNull Context context) {
       super.onAttach(context);

       // TODO (2): Start trace recording as soon as the Fragment is attached to its host Activity.
       fragmentLoadTrace = FirebasePerformance.startTrace("TestFragment-LoadTime");
   }
  1. 登録FirstDrawListeneronViewCreated()コールバックを。次に、アクティビティ例と同様、トレースを停止onDrawingFinish()

TestFragment.java

@Override
public void onViewCreated(@NonNull View mainView, Bundle savedInstanceState) {
   super.onViewCreated(mainView, savedInstanceState);

   // ...

   // TODO (3): Register the callback to listen for first frame rendering (see
   //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when view drawing is
   //  finished.
   FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {

       @Override
       public void onDrawingStart() {
           // In practice you can also record this event separately
       }

       @Override
       public void onDrawingFinish() {
           // This is when the Fragment UI is completely drawn on the screen
           fragmentLoadTrace.stop();
       }
   });
  1. アプリを再実行します。続いて、「メトリックログのトレース」でlogcatをフィルタリングします。タップLOAD FRAGMENTボタンを押すと、以下のようなログを探します。
I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

🎉おめでとうございます!フラグメントの読み込み時間を正常に測定し、そのデータをFirebase PerformanceMonitoringに報告しました。記録された指標は、このコードラボの後半でFirebaseコンソールに表示されます。

7.画面のレンダリングとスロー/フリーズフレームとは何かを理解する

UIレンダリングは、アプリからフレームを生成し、それを画面に表示する行為です。あなたのアプリとのユーザの対話がスムーズであることを確認するために、あなたのアプリケーションは、毎秒60個のフレームを実現するために16msの下(のフレームをレンダリングしなければならない理由を60fpsのか? )。アプリのUIレンダリングが遅い場合、システムはフレームをスキップすることを余儀なくされ、ユーザーはアプリの途切れを認識します。私たちは、このjankを呼び出します。

同様に、凍結されたフレームは、レンダリングに時間700ms以上かかりUIフレームがあります。フレームのレンダリング中、アプリがスタックしているように見え、ユーザー入力にほぼ1秒間応答しないため、この遅延は問題です。

8.フラグメントの低速/凍結フレームを測定します

Firebaseパフォーマンスが自動的に活動のために遅い/凍結されたフレームをキャプチャ監視(それはハードウェアが加速されている場合のみ)。ただし、この機能は現在フラグメントでは使用できません。フラグメントの遅い/凍結フレームが間の全活性の遅い/凍結フレームとして定義されるonFragmentAttached()及びonFragmentDetached()断片のライフサイクルのコールバック。

モチベーションを取るAppStateMonitorアクティビティ画面トレースを記録する責任パフォーマンスモニタリングSDKの一部である)クラス、我々が実装ScreenTraceこのコードラボソースコードリポジトリの一部である)クラス。 ScreenTraceクラスは、アクティビティのにフックアップすることができますFragmentManager遅い/凍結されたフレームキャプチャにのライフサイクル・コールバック。このクラスは、2つのパブリックAPIを提供します。

  • recordScreenTrace()画面のトレースの記録を開始
  • sendScreenTrace()画面のトレースの記録を停止し、添付カスタム指標を合計を記録するために、低速、および冷凍フレーム数

これらのカスタム指標を装着することにより、フラグメントの画面トレースは、活動のためのスクリーン・トレースと同じように取り扱うことができ、他のと一緒に表示することができますトレースをレンダリング画面Firebaseコンソールのパフォーマンスダッシュボードに。

フラグメントの画面トレースをログに記録する方法は次のとおりです。

  1. 初期化ScreenTraceホストフラグメントというあなたの活動にクラスを。

MainActivity.java

// Declare the Fragment tag
private static final String FRAGMENT_TAG = TestFragment.class.getSimpleName();

// TODO (1): Declare the ScreenTrace variable.
private ScreenTrace screenTrace;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // TODO (2): Initialize the ScreenTrace variable.
    screenTrace = new ScreenTrace(this, FRAGMENT_TAG);

    // ...
}
  1. あなたのフラグメントをロードすると、登録のためにFragmentLifecycleCallbacksと上書きonFragmentAttached()し、 onFragmentDetached()コールバック。私たちはあなたのためにこれを行いました。あなたには、画面のトレースの記録を開始する必要がありますonFragmentAttached()でコールバックとストップ記録onFragmentDetached()コールバック。

MainActivity.java

private final FragmentManager.FragmentLifecycleCallbacks fragmentLifecycleCallbacks =
       new FragmentManager.FragmentLifecycleCallbacks() {

           @Override
           public void onFragmentAttached(@NonNull FragmentManager fm, @NonNull Fragment f, @NonNull Context context) {
               super.onFragmentAttached(fm, f, context);

               // TODO (3): Start recording the screen traces as soon as the Fragment is
               //  attached to its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.recordScreenTrace();
               }
           }

           @Override
           public void onFragmentDetached(@NonNull FragmentManager fm, @NonNull Fragment f) {
               super.onFragmentDetached(fm, f);

               // TODO (4): Stop recording the screen traces as soon as the Fragment is
               //  detached from its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.sendScreenTrace();
               }

               // Unregister Fragment lifecycle callbacks after the Fragment is detached
               fm.unregisterFragmentLifecycleCallbacks(fragmentLifecycleCallbacks);
           }
       };
  1. アプリを再実行します。次に、をタップLOAD FRAGMENTボタン。クリックし、数秒間待ってback button下のナビゲーションバーに。

ログトレースメトリック」とlogcatをフィルタリングし、その後、以下のようなログを探します。

I/FirebasePerformance: Logging trace metric: _st_MainActivity-TestFragment (duration: XXXms)

その後、以下のようなログを見て、「FireperfViews」でlogcatをフィルタします:

D/FireperfViews: sendScreenTrace MainActivity-TestFragment, name: _st_MainActivity-TestFragment, total_frames: XX, slow_frames: XX, frozen_frames: XX

🎉おめでとうございます!フラグメントのSlow / Frozenフレームの測定に成功し、そのデータをFirebase PerformanceMonitoringに報告しました。記録された指標は、このコードラボの後半でFirebaseコンソールに表示されます。

9.Firebaseコンソールで指標を確認します

  1. logcatで、FirebaseコンソールのURLをクリックして、トレースの詳細ページにアクセスします。 ceb9d5ba51bb6e89.jpeg

また、中にFirebaseコンソール、あなたのアプリを持っているプロジェクトを選択します。左側のパネルで、リリース&モニターセクションを見つけ、[パフォーマンス]クリックします。

  • メインダッシュボード]タブで、[、トレーステーブルにスクロールダウンカスタムトレース]タブをクリックします。この表では、あなたは私たちが前に追加したカスタムコードのトレースに加えて、いくつか表示されますすぐにトレースなど、 _app_startトレースを。
  • あなたの2つのカスタムコードのトレース、検索TestActivity-LoadTimeTestFragment-LoadTime 。収集したデータの詳細を表示するためにいずれかのための期間をクリックします。

a0d8455c5269a590.png

  1. カスタムコードトレースの詳細ページには、トレースの期間(つまり、測定されたロード時間)に関する情報が表示されます。

5e92a307b7410d8b.png

  1. カスタム画面トレースのパフォーマンスデータを表示することもできます。
  • 、メインダッシュボード]タブに戻るトレーステーブルにスクロールダウンし、その後、画面のレンダリング]タブをクリックします。この表では、あなたは私たちが以前に追加したカスタム画面トレースに加えて任意の表示されますすぐに画面の痕跡など、 MainActivityトレースを。
  • カスタム画面トレース、検索MainActivity-TestFragment 。トレース名をクリックして、遅いレンダリングとフリーズしたフレームの集約データを表示します。

ee7890c7e2c28740.png

10.おめでとうございます

おめでとう! Firebase Performance Monitoringを使用して、アクティビティとフラグメントの読み込み時間と画面レンダリングのパフォーマンスを正常に測定しました。

あなたが成し遂げたこと

次は何ですか

Firebase Performanceは、カスタムトレース以外に、アプリのパフォーマンス測定のさまざまな方法を提供します。これは、自動的に測定し、アプリ起動時、アプリ・イン・フォアグラウンド、およびアプリケーション・イン・バックグラウンドのパフォーマンスデータを。それはあなたがこれらの指標を確認するための時間ですFirebaseコンソール

また、Firebaseパフォーマンスを提供しています自動HTTP / Sネットワーク要求の監視を。これにより、コードを1行も記述せずに、ネットワーク要求を簡単に計測できます。あなたのアプリからいくつかのネットワーク要求を送信しようとする中で指標を見つけることができますFirebaseコンソール

ボーナス

今、あなたは、カスタムコードのトレースを使用して、アクティビティ/フラグメントのパフォーマンスをレンダリングロード時間や画面を測定する方法を知っている、あなたが探索することができ、当社のオープンソースコードベースを使用すると、任意のアクティビティ/フラグメントのために箱から出して、それらの指標を捉えることができるかどうかを確認しますそれはアプリの一部ですか?よろしければPRを送ってください:-)

11.ボーナスラーニング

アクティビティの読み込み中に何が起こっているかを理解すると、アプリのパフォーマンス特性をよりよく理解するのに役立ちます。前のステップでは、アクティビティのロード中に何が発生するかを大まかに説明しましたが、次の図では、各フェーズについてさらに詳しく説明しています。

cd61c1495fad7961.png