Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Pelajari tentang data kinerja pemuatan halaman (aplikasi web)

Performance Monitoring menggunakan jejak untuk mengumpulkan data tentang proses yang dipantau di aplikasi Anda. Pelacakan adalah laporan yang berisi data yang diambil di 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 - Sebuah metrik yang mengukur waktu antara ketika menavigasi pengguna ke halaman dan ketika setiap perubahan visual terjadi

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

  • domInteractive - Metrik yang mengukur waktu antara saat pengguna membuka halaman hingga halaman dianggap interaktif bagi pengguna.

  • domContentLoadedEventEnd - Metrik yang mengukur waktu antara saat pengguna membuka halaman hingga dokumen HTML awal dimuat dan diurai sepenuhnya

  • loadEventEnd - Metrik yang mengukur waktu antara saat pengguna membuka halaman dan saat peristiwa pemuatan dokumen saat ini selesai.

  • first input delay - Metrik yang mengukur waktu antara saat pengguna berinteraksi dengan halaman dan saat browser dapat merespons masukan tersebut

Lihat data dari pelacakan pemuatan halaman di tab Pada perangkat di Firebase console ( pelajari lebih lanjut nanti di halaman ini).

Definisi jejak pemuatan halaman

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

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

Metrik dikumpulkan untuk jejak pemuatan halaman

Jejak ini adalah jejak yang tidak biasa, jadi Anda tidak dapat menambahkan metrik khusus atau atribut khusus padanya.

Cat pertama

Metrik ini mengukur waktu antara saat pengguna menavigasi ke halaman dan bila ada perubahan visual terjadi.

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

  • Dimulai saat pengguna membuka halaman.

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

Cat konten 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 mengetahui seberapa cepat pengguna Anda melihat konten sebenarnya dari aplikasi Anda, bukan hanya header atau warna latar belakang 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.

domInteractive

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

Metrik ini berguna untuk mengetahui 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 menanggapi interaksi (untuk metrik ini, lihat jejak penundaan masukan 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 membuka halaman dan saat dokumen HTML awal dimuat dan diurai sepenuhnya.

  • Dimulai saat pengguna membuka halaman.

  • Berhenti segera setelah dokumen HTML awal dimuat dan diurai DOMContentLoaded ( DOMContentLoaded ), tetapi 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 dibutuhkan untuk memuat semua konten Anda, termasuk stylesheet dan gambar.

  • Dimulai saat pengguna membuka halaman.

  • Berhenti segera setelah peristiwa 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 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 mengurai konten Anda.

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

Lacak, lihat, dan filter data kinerja

Untuk melihat data kinerja waktu nyata, pastikan bahwa aplikasi Anda menggunakan versi SDK Pemantauan Kinerja yang kompatibel dengan pemrosesan data waktu nyata. Pelajari lebih lanjut .

Lacak metrik utama di dasbor Anda

Tambahkan metrik utama Anda ke dasbor untuk mempelajari bagaimana trennya. Anda dapat dengan cepat mengidentifikasi regresi dengan melihat perubahan dari minggu ke minggu atau memverifikasi bahwa perubahan terbaru pada kode Anda meningkatkan kinerja.

gambar dasbor metrik Firebase Performance Monitoring

Untuk menambahkan metrik ke dasbor Anda, buka dasbor Performa di konsol Firebase, lalu klik tab Dasbor . Klik kartu metrik kosong, lalu pilih metrik yang ada untuk ditambahkan ke dasbor Anda. Klik pada kartu metrik terisi untuk opsi lainnya, seperti mengganti atau menghapus metrik.

Dasbor menampilkan data metrik yang dikumpulkan dari waktu ke waktu, baik dalam bentuk grafik dan sebagai perubahan persentase numerik.

Pelajari lebih lanjut tentang menggunakan dasbor .

Lihat semua jejak dan datanya

Untuk melihat jejak ini, buka dasbor Performa di Firebase console, lalu klik tab Di perangkat .

Dari tab Di Perangkat , Anda dapat mengklik 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 berdasarkan atribut, misalnya:

gambar data Firebase Performance Monitoring sedang difilter berdasarkan 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 database Anda tidak memengaruhi kawasan tertentu

Pelajari lebih lanjut tentang melihat data untuk jejak Anda .

Langkah selanjutnya