Bergabunglah dengan kami secara langsung dan online di Firebase Summit pada 18 Oktober 2022. Pelajari cara Firebase dapat membantu Anda mempercepat pengembangan aplikasi, merilis aplikasi dengan percaya diri, dan menentukan skala dengan mudah. Daftar sekarang

Pelajari tentang data kinerja pemuatan halaman (aplikasi web)

Performance Monitoring menggunakan pelacakan untuk mengumpulkan data tentang proses yang dipantau di aplikasi Anda. Jejak adalah laporan yang berisi data yang diambil antara dua titik waktu di aplikasi Anda.

Untuk aplikasi web, Performance Monitoring secara otomatis mengumpulkan pelacakan untuk setiap halaman aplikasi Anda yang disebut pelacakan pemuatan halaman . Setiap jejak pemuatan halaman mengumpulkan metrik default berikut:

  • first paint — Metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan saat terjadi perubahan visual

  • first contentful paint — Metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan saat konten yang bermakna ditampilkan, seperti gambar atau teks

  • domInteractive — Metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan saat halaman dianggap interaktif bagi pengguna

  • domContentLoadedEventEnd — Metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan saat dokumen HTML awal dimuat dan diuraikan sepenuhnya

  • loadEventEnd — Metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan saat peristiwa pemuatan dokumen saat ini selesai

  • penundaan input pertama — Metrik yang mengukur waktu antara saat pengguna berinteraksi dengan halaman dan saat browser dapat merespons input tersebut

Anda dapat melihat data dari jejak ini di subtab Pemuatan halaman pada tabel jejak, yang ada di bagian bawah dasbor Performa (pelajari lebih lanjut tentang menggunakan konsol nanti di halaman ini).

Definisi jejak pemuatan halaman

Pelacakan ini mengukur beberapa metrik tentang bagaimana halaman di aplikasi Anda dimuat, khususnya berapa lama waktu yang dibutuhkan untuk mencapai titik pemuatan umum, seperti aplikasi responsif.

Jejak pemuatan halaman membantu Anda melacak vital web inti aplikasi Anda, seperti first contentful paint.

Metrik yang dikumpulkan untuk jejak pemuatan halaman

Jejak ini adalah jejak yang siap pakai, jadi Anda tidak dapat menambahkan metrik khusus atau atribut khusus ke dalamnya.

cat pertama

Metrik ini mengukur waktu antara saat pengguna membuka halaman dan saat terjadi perubahan visual.

Metrik ini berguna karena paint pertama memberi sinyal kepada pengguna Anda bahwa halaman mulai dimuat.

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti ketika terjadi perubahan visual, termasuk perubahan warna latar belakang atau pemuatan header.

Cat puas pertama

Metrik ini mengukur waktu antara saat pengguna menavigasi ke halaman dan saat konten yang bermakna ditampilkan, seperti gambar atau teks.

Metrik ini berguna untuk wawasan tentang seberapa cepat pengguna Anda melihat konten sebenarnya dari aplikasi Anda, bukan hanya warna latar belakang atau header baru.

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti segera setelah browser merender konten pertama dari DOM, termasuk teks, gambar (termasuk gambar latar belakang), kanvas non-putih, atau SVG apa pun.

domInteraktif

Metrik ini mengukur waktu antara saat pengguna menavigasi ke halaman dan saat halaman dianggap interaktif bagi pengguna.

Metrik ini berguna untuk wawasan tentang seberapa cepat pengguna Anda benar-benar dapat berinteraksi dengan elemen di aplikasi Anda, seperti tombol dan hyperlink, daripada hanya melihatnya di layar. Perhatikan bahwa ini tidak berarti bahwa browser akan merespons interaksi (untuk metrik ini, lihat jejak penundaan masukan pertama ).

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti segera sebelum agen pengguna menyetel kesiapan dokumen HTML saat ini ke "interaktif".

domContentLoadedEventEnd

Metrik ini mengukur waktu antara saat pengguna menavigasi ke halaman dan saat dokumen HTML awal dimuat dan diuraikan sepenuhnya.

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti segera setelah dokumen HTML awal dimuat dan diuraikan sepenuhnya ( DOMContentLoaded ), tetapi ini tidak berarti bahwa stylesheet, gambar, dan subframe selesai dimuat.

bebanAcaraEnd

Metrik ini mengukur waktu antara saat pengguna menavigasi ke halaman dan saat peristiwa pemuatan dokumen saat ini selesai.

Metrik ini berguna untuk wawasan tentang berapa lama waktu yang dibutuhkan untuk memuat semua konten Anda, termasuk lembar gaya dan gambar.

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti segera setelah acara pemuatan dokumen HTML saat ini selesai.

Penundaan masukan pertama

Metrik ini mengukur waktu antara saat pengguna berinteraksi dengan halaman dan saat browser dapat merespons masukan tersebut.

Metrik ini berguna karena browser yang merespons interaksi pengguna memberikan kesan pertama kepada pengguna tentang responsivitas aplikasi Anda.

  • Dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink.

  • Berhenti segera setelah browser dapat merespons input, artinya browser tidak sibuk memuat atau mengurai konten Anda.

Perhatikan bahwa untuk mengukur metrik penundaan masukan pertama, Anda perlu menambahkan pustaka polyfill untuk metrik ini. Untuk petunjuk penginstalan, lihat dokumentasi perpustakaan .

Lacak, lihat, dan filter data kinerja

Untuk melihat data performa real-time, pastikan aplikasi Anda menggunakan versi Performance Monitoring SDK yang kompatibel dengan pemrosesan data real-time. Pelajari lebih lanjut tentang data kinerja waktu nyata .

Lacak metrik utama di dasbor Anda

Untuk mempelajari tren metrik utama Anda, tambahkan metrik tersebut ke papan metrik Anda di bagian atas dasbor Performa . Anda dapat dengan cepat mengidentifikasi regresi dengan melihat perubahan dari minggu ke minggu atau memverifikasi bahwa perubahan terbaru dalam kode Anda meningkatkan kinerja.

gambar papan metrik di dasbor Firebase Performance Monitoring

Untuk menambahkan metrik ke papan metrik Anda, ikuti langkah-langkah berikut:

  1. Buka dasbor Performa di konsol Firebase.
  2. Klik kartu metrik kosong, lalu pilih metrik yang ada untuk ditambahkan ke papan Anda.
  3. Klik pada kartu metrik yang terisi untuk opsi lainnya, misalnya untuk mengganti atau menghapus metrik.

Papan metrik menunjukkan data metrik yang dikumpulkan dari waktu ke waktu, baik dalam bentuk grafik maupun sebagai perubahan persentase numerik.

Pelajari lebih lanjut tentang menggunakan dasbor .

Lihat jejak dan datanya

Untuk melihat pelacakan Anda, buka dasbor Performa di Firebase console, gulir ke bawah ke tabel pelacakan, lalu klik subtab yang sesuai. Tabel menampilkan beberapa metrik teratas untuk setiap jejak, dan Anda bahkan dapat mengurutkan daftar menurut persentase perubahan untuk metrik tertentu.

Performance Monitoring menyediakan halaman pemecahan masalah di Firebase console yang menyoroti perubahan metrik, sehingga memudahkan untuk mengatasi dan meminimalkan dampak masalah performa pada aplikasi dan pengguna Anda dengan cepat. Anda dapat menggunakan halaman pemecahan masalah saat mempelajari tentang potensi masalah kinerja, misalnya, dalam skenario berikut:

  • Anda memilih metrik yang relevan di dasbor dan Anda melihat delta besar.
  • Di tabel jejak Anda mengurutkan untuk menampilkan delta terbesar di bagian atas, dan Anda melihat perubahan persentase yang signifikan.
  • Anda menerima peringatan email yang memberi tahu Anda tentang masalah kinerja.

Anda dapat mengakses halaman pemecahan masalah dengan cara berikut:

  • Di dasbor metrik, klik tombol Lihat detail metrik .
  • Pada kartu metrik apa pun, pilih => Lihat detail . Halaman pemecahan masalah menampilkan informasi tentang metrik yang Anda pilih.
  • Di tabel pelacakan, klik nama pelacakan atau nilai metrik apa pun di baris yang terkait dengan pelacakan tersebut.
  • Dalam lansiran email, klik Selidiki sekarang .

Saat Anda mengklik nama pelacakan di tabel pelacakan, Anda kemudian dapat menelusuri metrik yang diminati. Klik tombol Filter untuk memfilter data berdasarkan atribut, misalnya:

gambar data Firebase Performance Monitoring yang difilter menurut atribut
  • Filter menurut URL Halaman untuk melihat data halaman tertentu di situs Anda
  • Filter menurut Jenis koneksi efektif untuk mempelajari bagaimana koneksi 3g memengaruhi aplikasi Anda
  • Filter menurut Negara untuk memastikan lokasi basis data Anda tidak memengaruhi wilayah tertentu

Pelajari lebih lanjut tentang melihat data untuk jejak Anda .

Langkah selanjutnya

  • Pelajari lebih lanjut tentang menggunakan atribut untuk memeriksa data kinerja.

  • Pelajari lebih lanjut cara melacak masalah performa di Firebase console.

  • Siapkan lansiran untuk pemuatan halaman yang menurunkan kinerja aplikasi Anda. Misalnya, Anda dapat mengonfigurasi peringatan email untuk tim Anda jika penundaan input pertama untuk halaman tertentu melebihi ambang batas yang Anda tetapkan.