Pemuatan halaman yang lambat memengaruhi pengalaman pengguna dan menentukan loyalitas mereka. Oleh karena itu, pemantauan serta analisis kinerja frontend sangat penting. Topik ini menjelaskan cara menggunakan Application Real-Time Monitoring Service (ARMS) Browser Monitoring untuk mendiagnosis pemuatan halaman lambat.
Prasyarat
Aplikasi Anda harus dipantau oleh ARMS Browser Monitoring. Untuk informasi lebih lanjut, lihat Ikhtisar Pemantauan Browser.
Diagnosa pemuatan halaman lambat
Berikut adalah prosedur contoh untuk pemecahan masalah:
Masuk ke Konsol ARMS. Di panel navigasi di sebelah kiri, pilih .
Di halaman Browser Monitoring, pilih wilayah di bilah navigasi atas dan klik nama aplikasi yang ingin Anda kelola.
Di panel navigasi di sebelah kiri, pilih .
Di bagian Page Load Time Details dan Page Load Waterfall Plot, periksa apakah nilai metrik kinerja utama normal.
Gambar 1. Bagian Rincian Waktu Pemuatan Halaman
Gambar 2. Bagian Grafik Air Terjun Pemuatan Halaman
Jika nilai parameter First Paint Time di bagian Page Load Time Details atau nilai parameter DNS Lookup, TCP Connection, dan SSL Connection di bagian Page Load Waterfall Plot besar, kemungkinan pemuatan halaman lambat disebabkan oleh jaringan. Dalam hal ini, periksa jaringan.
Jika nilai parameter DOM Ready di bagian Page Load Time Details atau nilai parameter Time to First Byte (TTFB) dan Content Download di bagian Page Load Waterfall Plot besar, kemungkinan pemuatan halaman lambat disebabkan oleh permintaan API yang lambat. Dalam hal ini, lakukan Langkah 4 untuk mendiagnosis masalah tersebut.
Jika nilai parameter Fully Loaded Time di bagian Page Load Time Details atau nilai parameter DOM Parsing dan Resource Download di bagian Page Load Waterfall Plot besar, kemungkinan pemuatan halaman lambat disebabkan oleh pemuatan sumber daya frontend yang lambat. Dalam hal ini, lakukan Langkah 5 untuk mendiagnosis masalah tersebut.
Di panel navigasi di sebelah kiri, pilih .
Di tab API Requests, temukan API yang ingin Anda lihat dan klik Analyze di kolom Operation.
Di tab API Details, klik Show Invocation Trace di pojok kanan atas bagian Request Details untuk melihat waktu respons keseluruhan dari frontend dan diagram urutan panggilan aplikasi backend.
Jika waktu pemrosesan aplikasi backend pendek tetapi waktu respons keseluruhan panjang, waktu yang dibutuhkan dari pengiriman permintaan API ke server hingga data kembali ke frontend panjang. Dalam hal ini, klik View Session di pojok kanan atas bagian Request Details tab API Details. Kemudian, lihat informasi akses seperti jenis koneksi jaringan, wilayah, browser, perangkat, dan sistem operasi.
Jika aplikasi backend membutuhkan waktu lama untuk memproses permintaan akses, performa pemrosesan backend buruk. Dalam hal ini, klik ikon kaca pembesar di kolom Details. Di kotak dialog Details, periksa bagian mana dari pelacakan backend yang memakan waktu untuk menemukan masalah.
Di panel navigasi di sebelah kiri, pilih .
Di bagian Slow Page Session Trace(TOP20) halaman Page Speed, klik nama halaman dari sesi lambat.
Di bagian Page Resource Loading Waterfall halaman Session Traces, Anda dapat melihat detail sumber daya yang menyebabkan pemuatan halaman lambat.