Pelacakan durasi otomatis untuk aplikasi web

Pelacakan adalah laporan berisi data performa yang dicatat selama aplikasi Anda digunakan. Untuk aplikasi web, Performance Monitoring otomatis menampilkan pelacakan untuk pemuatan halaman.

Pelacakan pemuatan halaman dipecah ke dalam metrik default berikut:

  • Metrik first paint — Mengukur waktu antara saat pengguna membuka halaman dan saat terjadi perubahan visual apa pun

  • Metrik first contentful paint — Mengukur waktu antara saat pengguna membuka halaman dan saat konten bermakna ditampilkan, seperti gambar atau teks

  • Metrik domInteractive — Mengukur waktu antara saat pengguna membuka halaman dan saat halaman dianggap interaktif bagi pengguna

  • Metrik domContentLoadedEventEnd — Mengukur waktu antara saat pengguna membuka halaman dan saat dokumen HTML awal dimuat dan diuraikan sepenuhnya

  • Metrik loadEventEnd — Mengukur waktu antara saat pengguna membuka halaman dan saat peristiwa pemuatan dokumen saat ini selesai

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

Definisi untuk metrik pemuatan halaman

First paint

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

Metrik ini berguna karena first paint memberi sinyal kepada pengguna Anda bahwa halaman mulai memuat.

  • Dimulai ketika pengguna membuka halaman.

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

First contentful paint

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

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

  • Dimulai ketika pengguna membuka halaman.

  • Berhenti tepat setelah browser merender konten pertama dari DOM, termasuk teks, gambar (termasuk gambar latar belakang), kanvas selain putih, atau SVG.

domInteractive

Metrik ini mengukur waktu antara saat pengguna membuka halaman dan saat halaman dianggap interaktif untuk pengguna.

Metrik ini berguna untuk mengetahui seberapa cepat pengguna Anda benar-benar dapat berinteraksi dengan elemen di aplikasi Anda, seperti tombol dan hyperlink, bukan hanya melihatnya di layar. Perhatikan bahwa ini tidak berarti browser akan merespons interaksi (untuk metrik ini, baca pelacakan penundaan input pertama).

  • Dimulai ketika pengguna membuka halaman.

  • Berhenti tepat sebelum agen pengguna menetapkan kesiapan dokumen HTML saat ini menjadi "interaktif".

domContentLoadedEventEnd

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

  • Dimulai ketika pengguna membuka halaman.

  • Berhenti tepat setelah dokumen HTML awal dimuat dan terurai sepenuhnya (DOMContentLoaded), namun ini tidak berarti bahwa stylesheet, gambar, dan subframe selesai dimuat.

loadEventEnd

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

Metrik ini berguna untuk mengetahui berapa lama waktu yang diperlukan untuk memuat semua konten Anda, termasuk stylesheet dan gambar.

  • Dimulai ketika pengguna membuka halaman.

  • Berhenti tepat setelah peristiwa pemuatan dokumen HTML saat ini selesai.

First input delay

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

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

  • Mulai ketika pengguna pertama kali berinteraksi dengan elemen pada halaman, seperti mengklik tombol atau hyperlink.

  • Berhenti tepat setelah browser dapat merespons input, yang berarti bahwa browser tidak sibuk memuat atau menguraikan konten Anda.

Perhatikan bahwa untuk mengukur metrik penundaan input pertama, Anda perlu menambahkan library polyfill untuk metrik ini. Untuk petunjuk penginstalan, buka dokumentasi library ini.

Memantau pelacakan durasi pemuatan halaman otomatis di konsol

  1. Di Firebase console, buka dasbor Performa.

  2. Klik tab Di perangkat, lalu Anda dapat:

    • Melihat laporan cepat dari data yang dikumpulkan untuk semua pelacakan pemuatan halaman (dan setiap pelacakan kustom yang telah Anda tambahkan).

    • Mengklik pelacakan tertentu untuk meninjau data pelacakan secara lebih mendetail.

    • Gunakan tombol Filter di sisi kiri atas dasbor untuk melakukan pemfilteran dasar data berdasarkan atributnya.

  3. Jika Anda mengklik pelacakan tertentu, console akan menampilkan ringkasan data yang dikumpulkan pada kartu metrik.

    • Gunakan opsi di kanan atas dasbor untuk menampilkan data sebagai gabungan atau sepanjang waktu.

    • Gunakan tombol Filter di sisi kiri atas dasbor untuk melakukan pemfilteran dasar data berdasarkan atributnya.

  4. Untuk metrik apa pun, klik Lihat lainnya untuk meninjau informasi secara lebih mendalam tentang data yang dikumpulkan, serta untuk menggunakan fitur analisis yang lebih kaya. Misalnya, Anda dapat memfilter dan mengelompokkan data berdasarkan atribut.