Ukur waktu muat dan rendering layar dengan Firebase Performance Monitoring

1. Perkenalan

Terakhir Diperbarui: 11-03-2021

Mengapa kita perlu mengukur kinerja Tampilan?

Tampilan adalah bagian penting dari aplikasi Android yang secara langsung memengaruhi pengalaman pengguna. Misalnya, Aktivitas atau Fragmen Anda berisi UI yang menampung komponen Tampilan yang berinteraksi dengan pengguna. Pengguna tidak dapat melihat seluruh konten UI hingga seluruhnya tergambar di layar. Layar yang lambat dan terhenti akan secara langsung mengganggu interaksi pengguna dengan aplikasi Anda dan menciptakan pengalaman pengguna yang buruk.

Bukankah Firebase Performance Monitoring menyediakan metrik kinerja ini secara langsung?

Firebase Performance Monitoring secara otomatis menangkap beberapa data kinerja secara langsung, seperti waktu mulai aplikasi Anda (yaitu, waktu muat untuk Aktivitas pertama saja) dan kinerja rendering layar (yaitu, frame yang lambat dan terhenti untuk Aktivitas tetapi tidak untuk Fragmen). Namun, aplikasi industri biasanya tidak memiliki banyak Aktivitas melainkan satu Aktivitas dan beberapa Fragmen. Selain itu, banyak aplikasi biasanya menerapkan Tampilan Kustomnya sendiri untuk kasus penggunaan yang lebih kompleks. Jadi memahami cara mengukur waktu muat dan performa rendering layar dari Aktivitas dan Fragmen sering kali berguna dengan melengkapi jejak kode khusus di aplikasi Anda. Anda dapat dengan mudah memperluas codelab ini untuk mengukur performa komponen Tampilan Kustom.

Apa yang akan Anda pelajari

  • Bagaimana cara menambahkan Firebase Performance Monitoring ke aplikasi Android
  • Memahami pemuatan Aktivitas atau Fragmen
  • Cara melengkapi jejak kode khusus untuk mengukur waktu muat suatu Aktivitas atau Fragmen
  • Pengertian Screen Rendering dan apa itu frame Lambat/Frozen
  • Cara melengkapi jejak kode khusus dengan metrik untuk merekam layar Lambat/Beku
  • Cara melihat metrik yang dikumpulkan di Firebase console

Apa yang Anda perlukan

  • Android Studio 4.0 atau lebih tinggi
  • Perangkat/emulator Android
  • Java versi 8 atau lebih tinggi

2. Persiapan

Dapatkan kodenya

Jalankan perintah berikut untuk mengkloning kode contoh untuk codelab ini. Ini akan membuat folder bernama codelab-measure-android-view-performance di mesin Anda:

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

Jika Anda tidak memiliki git di mesin Anda, Anda juga dapat mengunduh kodenya langsung dari GitHub.

Impor proyek measure-view-performance-start ke Android Studio. Anda mungkin akan melihat beberapa kesalahan kompilasi atau mungkin peringatan tentang file google-services.json yang hilang. Kami akan memperbaikinya di bagian selanjutnya dari langkah ini.

Dalam codelab ini, kita akan menggunakan plugin Firebase Assistant untuk mendaftarkan aplikasi Android kita ke proyek Firebase dan menambahkan file konfigurasi, plugin, dan dependensi Firebase yang diperlukan ke proyek Android kita — semuanya dari dalam Android Studio !

Hubungkan aplikasi Anda ke Firebase

  1. Buka Android Studio / Bantuan > Periksa pembaruan untuk memastikan Anda menggunakan Android Studio dan Firebase Assistant versi terbaru.
  2. Pilih Alat > Firebase untuk membuka panel Asisten .

e791bed0999db1e0.png

  1. Pilih Performance Monitoring untuk ditambahkan ke aplikasi Anda, lalu klik Mulai dengan Performance Monitoring .
  2. Klik Hubungkan ke Firebase untuk menghubungkan proyek Android Anda dengan Firebase (ini akan membuka konsol Firebase di browser Anda) .
  3. Di Firebase console, klik Tambahkan proyek , lalu masukkan nama proyek Firebase (jika Anda sudah memiliki proyek Firebase, Anda dapat memilih proyek yang sudah ada tersebut) . Klik Lanjutkan dan terima persyaratan untuk membuat proyek Firebase dan Aplikasi Firebase baru.
  4. Selanjutnya Anda akan melihat dialog untuk Menghubungkan Aplikasi Firebase baru Anda ke proyek Android Studio Anda.

42c498d28ead2b77.png

  1. Kembali ke Android Studio, di panel Asisten , Anda akan melihat konfirmasi bahwa aplikasi Anda terhubung ke Firebase.

dda8bdd9488167a0.png

Tambahkan Pemantauan Kinerja ke aplikasi Anda

Di panel Asisten di Android Studio, klik Tambahkan Performance Monitoring ke aplikasi Anda .

Anda akan melihat dialog Terima Perubahan setelah itu Android Studio harus menyinkronkan aplikasi Anda untuk memastikan bahwa semua dependensi yang diperlukan telah ditambahkan.

9b58145acc4be030.png

Terakhir, Anda akan melihat pesan sukses di panel Asisten di Android Studio bahwa semua dependensi telah disiapkan dengan benar.

aa0d46fc944e0c0b.png

Sebagai langkah tambahan, aktifkan logging debug dengan mengikuti petunjuk di langkah "(Opsional) Aktifkan logging debug". Instruksi yang sama juga tersedia di dokumentasi publik .

3. Jalankan aplikasinya

Jika Anda telah berhasil mengintegrasikan aplikasi Anda dengan Performance Monitoring SDK, proyek sekarang harus dikompilasi. Di Android Studio, klik Jalankan > Jalankan 'aplikasi' untuk membangun dan menjalankan aplikasi pada perangkat/emulator Android Anda yang terhubung.

Aplikasi ini memiliki dua tombol yang membawa Anda ke Aktivitas dan Fragmen yang sesuai, seperti ini:

410d8686b4f45c33.png

Dalam langkah-langkah codelab berikut ini, Anda akan mempelajari cara mengukur waktu muat dan performa rendering layar Aktivitas atau Fragmen Anda.

4. Memahami pemuatan suatu Aktivitas atau Fragmen

Pada langkah ini, kita akan mempelajari apa yang dilakukan sistem selama memuat suatu Aktivitas atau Fragmen.

Memahami pemuatan suatu Aktivitas

Untuk suatu Aktivitas, waktu buka didefinisikan sebagai waktu yang dimulai dari saat objek Aktivitas dibuat hingga Frame Pertama tergambar seluruhnya di layar ( inilah saat pengguna Anda akan melihat UI lengkap untuk Aktivitas tersebut untuk pertama kalinya waktu ). Untuk mengukur apakah aplikasi Anda sudah digambar sepenuhnya, Anda dapat menggunakan metode reportFullyDrawn() untuk mengukur waktu yang berlalu antara peluncuran aplikasi dan tampilan lengkap semua sumber daya serta hierarki tampilan.

Pada tingkat tinggi, saat aplikasi Anda memanggil startActivity(Intent) , sistem secara otomatis melakukan proses berikut. Setiap proses membutuhkan waktu untuk diselesaikan, yang menambah durasi waktu antara pembuatan Aktivitas dan saat pengguna melihat UI Aktivitas di layar mereka.

c20d14b151549937.png

Memahami pemuatan Fragmen

Mirip dengan Aktivitas, waktu muat untuk Fragmen didefinisikan sebagai waktu mulai dari saat Fragmen tersebut melekat pada Aktivitas hostnya hingga Bingkai Pertama untuk Tampilan Fragmen digambar seluruhnya di layar.

5. Ukur waktu buka suatu Kegiatan

Penundaan pada frame pertama dapat menyebabkan pengalaman pengguna yang buruk, jadi penting untuk memahami seberapa besar penundaan pemuatan awal yang dialami pengguna Anda. Anda dapat melengkapi pelacakan kode khusus untuk mengukur waktu muat ini:

  1. Mulai pelacakan kode khusus (bernama TestActivity-LoadTime ) di kelas Activity segera setelah objek Activity dibuat.

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. Ganti callback onCreate() , dan tambahkan View dengan metode 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. Kami telah menyertakan implementasi FistDrawListener , yang memiliki dua callback: onDrawingStart() dan onDrawingFinish() (lihat bagian selanjutnya di bawah untuk detail selengkapnya tentang FirstDrawListener dan apa yang dapat memengaruhi kinerjanya) . Daftarkan FirstDrawListener di akhir callback onCreate() Aktivitas. Anda harus menghentikan viewLoadTrace di callback 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. Jalankan kembali aplikasi. Lalu, filter logcat dengan " Logging trace metric ". Ketuk tombol LOAD ACTIVITY , dan cari log seperti di bawah ini:
I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

🎉 Selamat! Anda telah berhasil mengukur waktu pemuatan suatu Aktivitas dan melaporkan data tersebut ke Firebase Performance Monitoring. Kita akan melihat metrik yang direkam di Firebase console nanti dalam codelab ini.

Tujuan FirstDrawListener

Pada bagian di atas, kami mendaftarkan FirstDrawListener . Tujuan FirstDrawListener adalah untuk mengukur kapan frame pertama telah dimulai dan selesai menggambar.

Ini mengimplementasikan ViewTreeObserver.OnDrawListener dan mengganti callback onDraw() yang dipanggil ketika pohon View akan digambar. Kemudian membungkus hasilnya untuk menyediakan dua callback utilitas onDrawingStart() dan onDrawingFinish() .

Kode lengkap untuk FirstDrawListener dapat ditemukan di kode sumber codelab ini .

6. Ukur waktu buka Fragmen

Mengukur waktu muat Fragmen mirip dengan cara kami mengukurnya untuk suatu Aktivitas tetapi dengan beberapa perbedaan kecil. Sekali lagi, kami akan melengkapi pelacakan kode khusus :

  1. Ganti callback onAttach() dan mulailah merekam fragmentLoadTrace Anda. Kami akan memberi nama jejak ini Test-Fragment-LoadTime .

Seperti yang dijelaskan pada langkah sebelumnya, objek Fragmen dapat dibuat kapan saja, namun objek tersebut menjadi aktif hanya jika objek tersebut melekat pada Aktivitas hostnya.

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. Daftarkan FirstDrawListener di callback onViewCreated() . Kemudian, serupa dengan contoh Aktivitas, hentikan pelacakan di 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. Jalankan kembali aplikasi. Lalu, filter logcat dengan " Logging trace metric ". Ketuk tombol LOAD FRAGMENT , dan cari log seperti di bawah ini:
I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

🎉 Selamat! Anda telah berhasil mengukur waktu pemuatan Fragmen dan melaporkan data tersebut ke Firebase Performance Monitoring. Kita akan melihat metrik yang direkam di Firebase console nanti dalam codelab ini.

7. Pengertian Screen Rendering dan apa itu frame Lambat/Frozen

Rendering UI adalah tindakan menghasilkan bingkai dari aplikasi Anda dan menampilkannya di layar. Untuk memastikan interaksi pengguna dengan aplikasi Anda lancar, aplikasi Anda harus merender frame dalam waktu kurang dari 16 md untuk mencapai 60 frame per detik ( mengapa 60fps? ). Jika aplikasi Anda mengalami rendering UI yang lambat, sistem terpaksa melewati frame, dan pengguna akan merasakan kegagapan di aplikasi Anda. Kami menyebutnya omong kosong .

Demikian pula, bingkai beku adalah bingkai UI yang membutuhkan waktu lebih dari 700 md untuk dirender. Penundaan ini merupakan masalah karena aplikasi Anda tampak terhenti dan tidak responsif terhadap masukan pengguna selama hampir satu detik penuh saat bingkai sedang dirender.

8. Ukur frame Lambat/Beku dari sebuah Fragmen

Firebase Performance Monitoring secara otomatis menangkap frame yang lambat/berhenti untuk suatu Aktivitas ( tetapi hanya jika itu adalah Hardware Accelerated ). Namun, fitur ini saat ini tidak tersedia untuk Fragmen. Frame lambat/beku dari Fragmen didefinisikan sebagai frame lambat/beku untuk seluruh Aktivitas antara callback onFragmentAttached() dan onFragmentDetached() dalam siklus hidup Fragmen.

Mengambil motivasi dari kelas AppStateMonitor ( yang merupakan bagian dari Performance Monitoring SDK yang bertanggung jawab untuk merekam jejak layar untuk Aktivitas ), kami menerapkan kelas ScreenTrace ( yang merupakan bagian dari repo kode sumber codelab ini ). Kelas ScreenTrace dapat dihubungkan ke callback siklus hidup FragmentManager Aktivitas untuk menangkap frame yang lambat/beku. Kelas ini menyediakan dua API publik:

  • recordScreenTrace() : Mulai merekam jejak layar
  • sendScreenTrace() : Menghentikan perekaman jejak layar dan melampirkan metrik khusus untuk mencatat jumlah bingkai Total, Lambat, dan Beku

Dengan melampirkan metrik khusus ini, pelacakan layar untuk Fragmen dapat ditangani dengan cara yang sama seperti pelacakan layar untuk suatu Aktivitas dan dapat ditampilkan bersama dengan pelacakan rendering layar lainnya di dasbor Performa Firebase console.

Berikut cara mencatat jejak layar untuk Fragmen Anda:

  1. Inisialisasi kelas ScreenTrace di Aktivitas Anda yang menghosting Fragmen.

Aktivitas Utama.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. Saat Anda memuat Fragmen, daftarkan ke FragmentLifecycleCallbacks dan ganti callback onFragmentAttached() dan onFragmentDetached() . Kami telah melakukan ini untuk Anda. Anda harus mulai merekam jejak layar di callback onFragmentAttached() dan berhenti merekam di callback onFragmentDetached() .

Aktivitas Utama.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. Jalankan kembali aplikasi. Kemudian, ketuk tombol LOAD FRAGMENT . Tunggu beberapa detik, lalu klik back button di bilah navigasi bawah.

Filter logcat dengan " Logging trace metric ", lalu cari log seperti di bawah ini:

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

Filter logcat dengan " FireperfViews ", lalu cari log seperti di bawah ini:

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

🎉 Selamat! Anda telah berhasil mengukur frame Lambat/Beku untuk Fragmen dan melaporkan data tersebut ke Firebase Performance Monitoring. Kita akan melihat metrik yang direkam di Firebase console nanti dalam codelab ini.

9. Periksa metrik di Firebase console

  1. Di logcat, klik URL Firebase console untuk mengunjungi halaman detail pelacakan. ceb9d5ba51bb6e89.jpeg

Alternatifnya, di Firebase console , pilih proyek yang memiliki aplikasi Anda. Di panel kiri, cari bagian Rilis & Monitor , lalu klik Kinerja .

  • Di tab Dasbor utama, gulir ke bawah ke tabel jejak, lalu klik tab Jejak khusus . Dalam tabel ini, Anda akan melihat jejak kode khusus yang kami tambahkan sebelumnya ditambah beberapa jejak siap pakai , seperti jejak _app_start .
  • Temukan dua jejak kode khusus Anda, TestActivity-LoadTime dan TestFragment-LoadTime . Klik Durasi salah satunya untuk melihat detail lebih lanjut tentang data yang dikumpulkan.

a0d8455c5269a590.png

  1. Halaman detail untuk pelacakan kode khusus memperlihatkan kepada Anda informasi tentang durasi pelacakan (yaitu, waktu muat yang diukur).

5e92a307b7410d8b.png

  1. Anda juga dapat melihat data kinerja untuk pelacakan layar khusus Anda.
  • Kembali ke tab Dashboard utama, gulir ke bawah ke tabel jejak, lalu klik tab Render layar . Dalam tabel ini, Anda akan melihat jejak layar khusus yang kami tambahkan sebelumnya ditambah jejak layar bawaan , seperti jejak MainActivity .
  • Temukan jejak layar khusus Anda, MainActivity-TestFragment . Klik nama jejak untuk melihat data gabungan dari rendering lambat dan frame yang terhenti.

ee7890c7e2c28740.png

10. Selamat

Selamat! Anda telah berhasil mengukur waktu muat dan performa rendering layar suatu Aktivitas dan Fragmen dengan menggunakan Firebase Performance Monitoring!

Apa yang telah Anda capai

  • Anda mengintegrasikan Firebase Performance Monitoring ke dalam aplikasi contoh
  • Anda sekarang memahami siklus hidup pemuatan View
  • Anda mengukur waktu muat Aktivitas dan Fragmen dengan menambahkan jejak kode khusus
  • Anda merekam bingkai lambat/beku dengan menambahkan jejak layar khusus dengan metrik khusus

Apa berikutnya

Firebase Performance menyediakan lebih banyak cara untuk mengukur performa aplikasi Anda selain pelacakan kustom. Secara otomatis mengukur waktu startup aplikasi, data kinerja aplikasi di latar depan, dan aplikasi di latar belakang . Saatnya Anda memeriksa metrik ini di Firebase Console .

Selain itu, Firebase Performance menawarkan pemantauan permintaan jaringan HTTP/S otomatis . Dengan itu Anda dapat dengan mudah melengkapi permintaan jaringan tanpa menulis satu baris kode pun. Bisakah Anda mencoba mengirimkan beberapa permintaan jaringan dari aplikasi Anda dan menemukan metriknya di Firebase console ?

Bonusnya

Sekarang setelah Anda mengetahui cara mengukur waktu muat dan kinerja rendering layar Aktivitas/Fragmen Anda dengan menggunakan jejak kode khusus, dapatkah Anda menjelajahi basis kode sumber terbuka kami untuk melihat apakah Anda dapat langsung menangkap metrik tersebut untuk Aktivitas/Fragmen apa pun itu bagian dari aplikasi? Jangan ragu untuk mengirimkan PR jika Anda mau :-)

11. Bonus Pembelajaran

Memahami apa yang terjadi selama pemuatan suatu Aktivitas akan membantu Anda lebih memahami karakteristik kinerja aplikasi Anda. Pada langkah sebelumnya, kami menjelaskan secara rinci apa yang terjadi selama pemuatan suatu Aktivitas, namun diagram berikut menjelaskan setiap fase dengan lebih detail.

cd61c1495fad7961.png