Pemuatan halaman yang lambat menurunkan pengalaman pengguna dan sulit diperbaiki—waktu pemuatan setiap pengguna bervariasi tergantung wilayah, jaringan, browser, dan penyedia layanan, sehingga masalah ini sulit direproduksi. Sebagian besar alat Pemantauan Browser mengandalkan objek PerformanceTiming, yang hanya mencatat waktu pemuatan seluruh halaman dan tidak mencakup resource statis individual seperti skrip, stylesheet, dan gambar. Tanpa visibilitas tingkat resource, Anda tidak dapat mengidentifikasi bottleneck kinerja secara akurat.
Application Real-Time Monitoring Service (ARMS) Browser Monitoring mengatasi keterbatasan ini melalui pelacakan sesi lambat: grafik air terjun tingkat resource yang secara akurat merekam cara halaman dimuat dalam sesi pengguna tertentu. Panduan ini menjelaskan cara mengaktifkan pelaporan resource, mengidentifikasi sesi lambat, serta membaca grafik air terjun untuk menemukan akar permasalahan.
Prasyarat
Aplikasi web yang telah terhubung ke ARMS Browser Monitoring. Lihat Implement browser monitoring by using CDN.
Opsi Enable Page Resources Reporting dipilih saat penyiapan.
PentingSDK ARMS Browser Monitoring tidak melaporkan data resource statis secara default. Pelacakan sesi lambat memerlukan opsi ini. Tanpa opsi tersebut, grafik air terjun tidak memiliki data tingkat resource untuk ditampilkan.
Cara kerja
Saat pelaporan resource halaman diaktifkan, SDK ARMS Browser Monitoring merekam data waktu untuk setiap resource statis yang dimuat di halaman. Sesi lambat secara otomatis muncul dalam daftar Slow Page Session Trace (TOP20) pada halaman Page Speed. Memilih suatu sesi akan membuka grafik air terjun yang memvisualisasikan cara setiap resource dimuat dan di mana waktu dihabiskan.
Identifikasi halaman dengan pemuatan lambat
Tersedia dua metode: mulai dari metrik agregat kecepatan halaman untuk menemukan halaman bermasalah, atau langsung mencari jejak sesi jika Anda sudah mengetahui pengguna atau sesi spesifik yang ingin diselidiki.
Metode 1: Mulai dari metrik kecepatan halaman
Masuk ke Konsol ARMS. Di panel navigasi sebelah kiri, pilih .
Pada halaman Browser Monitoring, pilih wilayah di bilah navigasi atas lalu klik nama aplikasi target.
Di panel navigasi kiri, pilih . Halaman Page Speed menampilkan metrik waktu pemuatan halaman dari waktu ke waktu. Cari lonjakan waktu pemuatan yang menunjukkan degradasi kinerja. Misalnya, halaman selesai dimuat dalam 36,7 detik pukul 11.00. Untuk detail tentang metrik ini, lihat Page loading speed.
Gulir ke bawah hingga bagian Slow Page Session Trace (TOP20). Daftar ini menampilkan 20 sesi paling lambat dalam rentang waktu yang dipilih. Setiap entri menunjukkan URL halaman, waktu sesi, dan durasi total pemuatan. Dalam contoh ini, suatu sesi dimuat dalam 36,72 detik pukul 11.36.46, yang menyebabkan lonjakan pada waktu pemuatan halaman.
Klik nama halaman di kolom Page untuk membuka halaman Slow Loading Details.
Tinjau detail sesi:
Page Information (bagian atas): Menampilkan alamat IP client, browser, dan sistem operasi untuk sesi ini. Gunakan informasi ini untuk menentukan apakah masalah bersifat spesifik terhadap browser, wilayah, atau perangkat tertentu.
Page Resource Loading Waterfall (bagian bawah): Menampilkan grafik air terjun untuk setiap resource statis yang dimuat selama sesi. Setiap batang mewakili satu resource dan menunjukkan rincian waktunya.
Metode 2: Cari jejak sesi secara langsung
Gunakan metode ini jika Anda sudah memiliki username, ID pengguna, atau ID sesi spesifik yang ingin diselidiki.
Masuk ke Konsol ARMS. Pada panel navigasi sebelah kiri, pilih .
Pada halaman Browser Monitoring, pilih wilayah di bilah navigasi atas lalu klik nama aplikasi target.
Di panel navigasi kiri, pilih .
Di bagian Session List, filter sesi berdasarkan username, ID pengguna, atau ID sesi untuk menemukan sesi target.
Klik nama sesi untuk membuka halaman Session Tracking Details dan tinjau grafik air terjun.
Untuk informasi lebih lanjut tentang pelacakan sesi, lihat Slow session tracing.
Baca grafik air terjun
Grafik air terjun merupakan alat diagnosis utama. Setiap batang horizontal mewakili satu resource—file JavaScript, file CSS, gambar, atau font. Posisi batang pada garis waktu menunjukkan kapan pemuatan dimulai, sedangkan panjangnya menunjukkan berapa lama proses tersebut berlangsung.
Tahap-tahap pengukuran waktu sumber daya
Setiap batang dalam grafik air terjun dapat dipecah menjadi beberapa fase waktu. Memahami fase-fase ini membantu Anda mengidentifikasi apakah bottleneck bersifat jaringan, server, atau bandwidth.
| Phase | What it measures | Diagnosis |
|---|---|---|
| DNS lookup | Waktu untuk menyelesaikan nama domain menjadi alamat IP | Nilai tinggi menunjukkan adanya masalah resolusi DNS. Pertimbangkan penggunaan DNS prefetching atau penyedia DNS yang lebih cepat. |
| TCP connection | Waktu untuk membuat koneksi TCP dengan server | Nilai tinggi mengindikasikan latensi jaringan. Periksa apakah tersedia node edge CDN yang lebih dekat. |
| SSL/TLS handshake | Waktu yang dihabiskan untuk proses jabat tangan TLS pada koneksi HTTPS | Nilai tinggi mungkin menunjukkan perlunya penerapan TLS session resumption atau peningkatan ke TLS 1.3. |
| Time to first byte (TTFB) | Waktu dari pengiriman permintaan hingga penerimaan byte pertama respons | Nilai tinggi mengarah pada pemrosesan sisi server yang lambat. Selidiki kinerja API backend. |
| Content download | Waktu untuk mengunduh seluruh badan respons | Nilai tinggi menunjukkan ukuran resource besar atau bandwidth rendah. Pertimbangkan kompresi atau pengurangan ukuran resource. |
Pola umum pada grafik air terjun
| Pattern | What it means | Likely fix |
|---|---|---|
| Long bar early in the timeline | Resource pemblokir menunda semua proses setelahnya | Tunda atau muat resource secara async |
| Many bars stacking sequentially | Resource dimuat satu per satu alih-alih secara paralel | Periksa adanya resource yang memblokir rendering atau batasan koneksi HTTP/1.1 |
| One resource much longer than others | Satu resource besar atau lambat | Kompres resource, gunakan CDN, atau optimalkan waktu respons server |
| Long gap before a resource starts | Browser menunggu prasyarat selesai | Tinjau rantai dependensi dan urutan pemuatan |
| Multiple bars with long DNS/connection phases | Pengaturan koneksi berulang ke banyak domain berbeda | Kurangi jumlah domain pihak ketiga atau gunakan preloading koneksi |
| Large download phase on specific resources | Resource tidak terkompresi atau berukuran berlebihan | Aktifkan kompresi gzip/Brotli, optimalkan gambar, atau minify JavaScript dan CSS |
Daftar periksa diagnosis
Setelah membuka grafik air terjun, periksa isu-isu umum berikut:
Resource teks tidak terkompresi: File JavaScript, CSS, dan HTML yang dikirim tanpa kompresi gzip atau Brotli.
Resource berukuran berlebihan: Resource individual yang dapat dioptimalkan (diminify, dikompresi, atau dipisah).
Pemanfaatan cache buruk: Resource yang dimuat berulang tanpa caching browser. Periksa header
Cache-Control.Resource pihak ketiga lambat: Skrip eksternal (analitik, iklan, widget sosial) yang memblokir rendering halaman.
Resource yang memblokir rendering: CSS atau JavaScript sinkron di
<head>yang menunda first paint.
Langkah selanjutnya
Siapkan alert: Buat aturan alert untuk menerima notifikasi saat waktu pemuatan halaman melebihi ambang batas, alih-alih mengetahui masalah setelah terjadi. Lihat Create and manage a Browser Monitoring alert rule.