Application Real-Time Monitoring Service:Diagnosis pemuatan halaman yang lambat

Diagnosis pemuatan halaman yang lambat

Contoh berikut menunjukkan cara memecahkan masalah pemuatan halaman yang lambat:

1. Masuk ke ARMS console. Di panel navigasi sebelah kiri, pilih Browser Monitoring > Browser Monitoring.

2. Pada halaman Browser Monitoring, pilih wilayah di bilah navigasi atas lalu klik nama aplikasi yang ingin Anda kelola.

3. Di panel navigasi sebelah kiri, pilih Application > Access speed.
4. Analisis metrik kinerja utama pada bagian Page Load Time Details dan Waterfall Chart of Page Loading untuk mengidentifikasi anomali apa pun.

   Gambar 1. Detail waktu pemuatan halaman

   Gambar 2. Diagram waterfall pemuatan halaman

   • Page load detailsWaterfall Chart of Page LoadingJika waktu di bagian tersebut tinggi, atau jika waktu pencarian DNS, koneksi TCP, atau koneksi SSL di bagian tersebut tinggi, pemuatan halaman yang lambat kemungkinan disebabkan oleh masalah jaringan. Anda perlu menginvestigasi jaringan Anda.
   • Page load detailsWaterfall Chart of Page LoadingJika waktu di bagian tersebut tinggi, atau jika waktu respons permintaan dan transfer konten di bagian tersebut tinggi, pemuatan halaman yang lambat kemungkinan disebabkan oleh permintaan API yang lambat. Untuk investigasi lebih lanjut, lanjutkan ke Langkah 5.
   • Page load detailsWaterfall Chart of Page LoadingJika nilai pada bagian tersebut tinggi, atau jika waktu Penguraian DOM dan pemuatan Sumber daya di bagian tersebut tinggi, kemungkinan besar kelambatan pemuatan halaman disebabkan oleh pemuatan Sumber daya antarmuka depan yang lambat. Untuk investigasi lebih lanjut, lanjutkan ke Langkah 6.
5. Diagnosis permintaan API yang lambat. Di panel navigasi sebelah kiri, pilih Application > API details.
   1. Pada tab API Requests, temukan API target lalu klik Analyze di kolom Actions.
   2. Pada tab API details, klik View Trace di pojok kanan atas bagian Request Details untuk melihat total waktu yang dihabiskan di antarmuka depan dan jejak layanan backend.
      Pada tabel di tab Trace, span dengan Call Type Frontend merepresentasikan total waktu, sedangkan span dengan Call Type HTTP Entry merepresentasikan waktu pemrosesan aplikasi backend. Kolom Timeline menyediakan grafik batang yang memvisualisasikan durasi setiap span.

      • Jika waktu pemrosesan aplikasi backend singkat tetapi total waktu panjang, hal ini mengindikasikan waktu transfer jaringan yang lama untuk permintaan API tersebut. Dalam kasus ini, pada halaman API details, klik View Session di pojok kanan atas bagian Request Details untuk melihat informasi session, seperti jenis jaringan, wilayah, browser, perangkat, dan sistem operasi.
      • Jika waktu pemrosesan aplikasi backend panjang, hal ini mengindikasikan adanya masalah kinerja pada layanan backend. Dalam kasus ini, klik ikon kaca pembesar di kolom Method Stack. Kemudian, pada kotak dialog Method Stack, Anda dapat melihat tumpukan panggilan untuk mengidentifikasi bottleneck dalam jejak backend.
6. Diagnosis resource antarmuka depan yang lambat. Di panel navigasi sebelah kiri, pilih Application > Access speed.
7. Pada halaman Access speed, di bagian Slow Page Session Traces (Top 20), klik nama halaman untuk session yang lambat.
   Bagian ini menampilkan daftar session lambat dalam bentuk tabel. Tabel tersebut mencakup kolom Page, Session ID, Browser, Fully loaded time (dalam ms), dan Start time. Anda dapat menggunakan waktu pemuatan untuk mengidentifikasi session lambat yang dituju.
   Pada halaman Session Tracing, di bagian Page Resource Loading Waterfall, Anda dapat melihat detail resource yang menyebabkan pemuatan halaman menjadi lambat.

Informasi selengkapnya

• Page Speed: Pelajari tentang metrik pemuatan halaman dan cara ARMS mengukurnya.
• Diagnosis error JS dengan ARMS Browser Monitoring: Pelajari cara memecahkan masalah error JavaScript menggunakan Browser Monitoring.