Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Pelajari tentang data kinerja pemuatan halaman (aplikasi web)

Performance Monitoring menggunakan pelacakan untuk mengumpulkan data tentang proses yang dipantau di aplikasi Anda. Pelacakan 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 pelacakan pemuatan halaman mengumpulkan metrik default berikut:

  • cat pertama — Metrik yang mengukur waktu antara saat pengguna membuka halaman dan saat terjadi perubahan visual

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

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

  • domContentLoadedEventEnd — Metrik yang mengukur waktu antara saat pengguna membuka halaman dan saat dokumen HTML awal dimuat dan diurai 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 pelacakan ini di subtab pemuatan Halaman dari tabel pelacakan, 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 diperlukan untuk mencapai titik pemuatan yang umum, seperti aplikasi yang responsif.

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

Metrik dikumpulkan untuk jejak pemuatan halaman

Pelacakan ini adalah pelacakan bawaan, sehingga 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 cat pertama memberi sinyal kepada pengguna Anda bahwa halaman mulai dimuat.

  • Dimulai saat pengguna membuka halaman.

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

Cat konten pertama

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

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

  • Dimulai saat pengguna membuka halaman.

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

domInteraktif

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

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

  • Dimulai saat pengguna membuka 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 membuka halaman.

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

loadEventEnd

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

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

  • Dimulai saat pengguna membuka 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 input tersebut.

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

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

  • Berhenti segera setelah browser dapat merespons masukan, artinya browser tidak sibuk memuat atau mem-parsing konten Anda.

Perhatikan bahwa untuk mengukur metrik penundaan input 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 ke papan metrik di bagian atas dasbor Performa . Anda dapat dengan cepat mengidentifikasi regresi dengan melihat perubahan dari minggu ke minggu atau memverifikasi bahwa perubahan terbaru pada 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 terisi untuk opsi lainnya, misalnya untuk mengganti atau menghapus metrik.

Papan metrik menampilkan 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 konsol Firebase, gulir ke bawah ke tabel pelacakan, lalu klik subtab yang sesuai. Tabel menampilkan beberapa metrik teratas untuk setiap pelacakan, dan Anda bahkan dapat mengurutkan daftar berdasarkan perubahan persentase 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 potensi masalah kinerja, misalnya, dalam skenario berikut:

  • Anda memilih metrik yang relevan di dasbor dan melihat delta besar.
  • Di tabel pelacakan, Anda mengurutkan untuk menampilkan delta terbesar di bagian atas, dan Anda melihat perubahan persentase yang signifikan.
  • Anda menerima lansiran 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 .
  • Di 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.
  • Di lansiran email, klik Selidiki sekarang .

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

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

Pelajari lebih lanjut tentang melihat data untuk pelacakan Anda .

Langkah selanjutnya

  • Pelajari lebih lanjut cara menggunakan atribut untuk memeriksa data performa.

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

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