Check out what’s new from Firebase at Google I/O 2022. Learn more

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:

  • cat pertama — 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 menavigasi ke 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 menguraikan 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 kinerja waktu nyata, pastikan aplikasi Anda menggunakan versi SDK Pemantauan Kinerja yang kompatibel dengan pemrosesan data waktu nyata. Pelajari lebih lanjut .

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, buka dasbor Performa di Firebase console, lalu klik tab Dasbor . Klik kartu metrik kosong, lalu pilih metrik yang ada untuk ditambahkan ke papan Anda. Klik pada kartu metrik yang terisi untuk opsi lainnya, seperti mengganti atau menghapus metrik.

Papan metrik menunjukkan data metrik yang dikumpulkan dari waktu ke waktu, baik dalam bentuk grafik maupun sebagai persentase perubahan 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.

Jika Anda mengklik nama jejak di tabel jejak, Anda kemudian dapat mengeklik berbagai layar untuk menjelajahi jejak dan menelusuri metrik yang diminati. Di sebagian besar halaman, Anda dapat menggunakan tombol Filter (kiri atas layar) untuk memfilter data menurut 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.