Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Pelajari tentang data kinerja pemuatan halaman (aplikasi web)

Kinerja Pemantauan jejak penggunaan untuk mengumpulkan data tentang proses dipantau di aplikasi Anda. Jejak adalah laporan yang berisi data yang diambil antara dua titik waktu di aplikasi Anda.

Untuk aplikasi web, Kinerja Pemantauan secara otomatis mengumpulkan jejak untuk setiap halaman aplikasi Anda disebut beban halaman jejak. Setiap jejak pemuatan halaman mengumpulkan metrik default berikut:

  • cat pertama - Sebuah metrik yang mengukur waktu antara ketika menavigasi pengguna ke halaman dan ketika setiap perubahan visual terjadi

  • pertama contentful cat - Sebuah metrik yang mengukur waktu antara saat pengguna menavigasi ke halaman dan ketika menampilkan konten yang bermakna, seperti gambar atau teks

  • DOMInteractive - Sebuah metrik yang mengukur waktu antara ketika menavigasi pengguna ke halaman dan ketika halaman dianggap interaktif bagi pengguna

  • domContentLoadedEventEnd - Sebuah metrik yang mengukur waktu antara ketika menavigasi pengguna ke halaman dan ketika dokumen HTML awal benar-benar dimuat dan diurai

  • loadEventEnd - Sebuah metrik yang mengukur waktu antara ketika menavigasi pengguna ke halaman dan ketika dokumen saat ini Selesaikan beban acara

  • masukan pertama delay - Sebuah metrik yang mengukur waktu antara ketika berinteraksi pengguna dengan halaman dan ketika browser mampu merespon masukan yang

Anda dapat melihat data dari jejak ini di Halaman beban subtab dari tabel jejak, yang di bagian bawah dashboard Kinerja (mempelajari lebih lanjut tentang menggunakan konsol nanti 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 buka halaman membantu Anda melacak aplikasi Anda vital web inti , seperti cat contentful pertama.

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 bila ada perubahan visual terjadi.

Metrik ini berguna karena sinyal cat pertama yang pengguna bahwa halaman mulai beban.

  • Dimulai saat pengguna menavigasi ke halaman.

  • Berhenti bila ada perubahan visual terjadi, termasuk perubahan warna latar belakang atau loading sundulan.

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 merespon interaksi (untuk metrik ini, lihat pertama keterlambatan input jejak ).

  • 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 benar-benar dimuat dan diurai ( DOMContentLoaded ), tapi ini tidak berarti bahwa stylesheet, gambar, dan subframes sudah selesai bongkar.

bebanAcaraEnd

Metrik ini mengukur waktu antara ketika pengguna menavigasi ke halaman dan ketika beban event melengkapi dokumen saat ini.

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 ketika pengguna berinteraksi pertama dengan elemen pada 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 instalasi, merujuk pada perpustakaan dokumentasi .

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 cara metrik kunci Anda tren, menambahkannya ke papan metrik Anda di bagian atas dashboard Kinerja. 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, pergi ke dashboard Kinerja di Firebase konsol, kemudian klik tab Dashboard. Klik kartu metrik kosong, lalu pilih metrik yang ada untuk ditambahkan ke papan Anda. Klik pada metrik kartu penduduknya untuk lebih banyak pilihan, seperti 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 jejak Anda, pergi ke dashboard Kinerja di Firebase konsol, gulir ke bawah ke meja jejak, 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 mengeklik nama jejak di tabel jejak, Anda kemudian dapat mengeklik berbagai layar untuk menjelajahi jejak dan menelusuri metrik yang diminati. Pada halaman yang paling, Anda dapat menggunakan Filter tombol (kiri atas layar) untuk menyaring data dengan atribut, misalnya:

gambar data Firebase Performance Monitoring yang difilter menurut atribut
  • Filter oleh Halaman URL untuk melihat data untuk halaman tertentu dari situs Anda
  • Filter oleh jenis koneksi yang efektif untuk belajar bagaimana koneksi 3g dampak aplikasi Anda
  • Filter oleh Negara untuk memastikan lokasi database Anda tidak mempengaruhi wilayah tertentu

Pelajari lebih lanjut tentang melihat data untuk jejak Anda .

Langkah selanjutnya