Topik ini menjelaskan fitur deteksi dan analisis kecepatan pemuatan halaman dalam pemantauan browser dari Application Real-Time Monitoring Service (ARMS).
Setelah aplikasi Anda terhubung dengan fitur pemantauan browser ARMS, Anda dapat melihat data performa berikut di halaman Page Speed:
Anda dapat melaporkan metrik performa kustom secara manual, seperti waktu render pertama (FPT) dan waktu untuk berinteraksi. Untuk informasi lebih lanjut, lihat metode SDK.
Prosedur
Masuk ke Konsol ARMS. Di panel navigasi sebelah kiri, pilih .
Di halaman Browser Monitoring, pilih wilayah di bilah navigasi atas dan klik nama aplikasi yang ingin dikelola.
Di panel navigasi sebelah kiri, pilih .
Di bagian Page Speed, Anda dapat mengurutkan halaman berdasarkan FPT atau jumlah tampilan halaman (PV), serta mengubah urutan tampilan dengan mengklik panah ke atas atau ke bawah.
Detail waktu pemuatan halaman
Di bagian Detail Waktu Pemuatan Halaman, grafik kurva menampilkan nilai rata-rata metrik dalam rentang waktu tertentu. Nilai rata-rata mencerminkan performa rata-rata selama periode tersebut, tetapi sensitif terhadap nilai ekstrem dan fluktuasi besar. Misalnya, jika kecepatan pemuatan halaman keseluruhan rendah karena koneksi jaringan lemah dari permintaan akses, waktu respons rata-rata akan lama. Anda dapat mengklik ikon
di pojok kanan atas untuk menghapus nilai ekstrem sehingga tidak memengaruhi tren performa keseluruhan.Jika data dalam grafik kurva meningkat tajam, Anda dapat menggunakan bagian Distribusi Sampel Performa dan Jejak Sesi Halaman Lambat (TOP20) untuk mengidentifikasi masalah.
Grafik air terjun data pemuatan halaman
Di bagian Grafik Air Terjun Pemuatan Halaman, grafik air terjun menunjukkan waktu respons setiap tahap pemuatan halaman secara berurutan. Grafik menampilkan nilai rata-rata metrik tertentu dalam rentang waktu tertentu. Untuk meningkatkan performa pemuatan halaman, disarankan menerapkan langkah-langkah penanganan berdasarkan masalah spesifik pada setiap tahap.
Distribusi halaman dengan kecepatan pemuatan berbeda
Bagian Distribusi Performa menunjukkan distribusi halaman dengan kecepatan pemuatan berbeda.
Tab Performance Stacked Area Chart menampilkan grafik garis bertumpuk yang menggunakan waktu sebagai sumbu horizontal. Anda dapat melihat distribusi halaman dengan kecepatan pemuatan berbeda di setiap titik waktu.
Gambar 1. Tab Grafik Area Bertumpuk Performa
Di tab Performance Sample Distribution, Anda dapat melihat proporsi halaman sampel dengan kecepatan pemuatan tertentu dalam rentang waktu. Sebagai contoh, Anda dapat melihat jumlah halaman yang dapat dibuka dalam 1 detik dan proporsi sampel pengguna long-tail.
Gambar 2. Tab Distribusi Sampel Performa
Jejak sesi halaman lambat
Bagian Jejak Sesi Halaman Lambat (TOP20) menyediakan grafik air terjun performa pemuatan sumber daya statis selama proses pemuatan halaman. Di bagian ini, Anda dapat melihat status pemuatan sumber daya halaman berdasarkan data performa halaman, memungkinkan Anda mengidentifikasi dan menangani hambatan performa sedini mungkin. Untuk informasi lebih lanjut, lihat Pelacakan Sesi.
Faktor-faktor yang memengaruhi performa pemuatan halaman
Sebuah halaman dimuat di browser pengguna. Waktu pemuatan ditentukan oleh faktor-faktor tertentu, termasuk lokasi geografis, kondisi jaringan, browser, dan penyedia layanan. Oleh karena itu, fitur pemantauan browser menyediakan statistik tentang distribusi geografis, distribusi terminal, distribusi jaringan, dan distribusi versi untuk membantu mengidentifikasi hambatan performa.
Gambar 3. Distribusi Terminal
Gambar 4. Distribusi Kondisi Jaringan
Gambar 5. Distribusi Versi
Metrik performa
Tabel 1. Metrik Performa Utama Halaman Web
Bidang yang dilaporkan | Deskripsi | Rumus | Catatan |
FMP | The First Meaningful Paint (FMP). | N/A | Tidak ada |
FPT | The FPT. | responseEnd - fetchStart | Bidang ini menunjukkan durasi dari saat permintaan diinisiasi hingga saat browser mulai mengurai byte dari batch pertama dokumen HTML. |
TTI | The Time to Interactive (TTI). | domInteractive - fetchStart | Bidang ini menunjukkan saat ketika browser mulai memuat sumber daya setelah menyelesaikan semua dokumen HTML dan membangun model objek dokumen (DOM). |
Ready | Waktu yang dikonsumsi untuk menyelesaikan pemuatan HTML, yaitu waktu yang dikonsumsi untuk membangun DOM. | domContentLoadEventEnd - fetchStart | Jika skrip JS dieksekusi secara sinkron pada halaman, waktu eksekusi skrip JS dapat dihitung berdasarkan rumus berikut: Waktu eksekusi skrip JS = Ready - TTI. |
Load | Waktu yang dikonsumsi untuk sepenuhnya memuat halaman. | loadEventStart - fetchStart | Bidang ini dapat dihitung berdasarkan rumus berikut: Load = FPT + DOM + (Ready - TTI) + Res. |
FirstByte | Waktu yang dikonsumsi untuk menerima paket data pertama dari server. | responseStart - domainLookupStart | Tidak ada |
Tabel 2. Bidang yang Menggambarkan Waktu yang Dikonsumsi di Setiap Fase
Bidang yang dilaporkan | Deskripsi | Rumus | Catatan |
DNS | Waktu yang dikonsumsi untuk query Domain Name System (DNS). | domainLookupEnd - domainLookupStart | Tidak ada |
TCP | Waktu yang dikonsumsi untuk koneksi Transmission Control Protocol (TCP). | connectEnd - connectStart | Tidak ada |
TTFB | Waktu untuk byte pertama (TTFB), yang menunjukkan waktu yang dikonsumsi untuk merespons permintaan. | responseStart - requestStart | TTFB dapat dihitung dengan cara yang berbeda. Untuk informasi lebih lanjut tentang bagaimana TTFB dihitung di ARMS, lihat Definisi pengembangan Google. |
Trans | Waktu yang dikonsumsi untuk transmisi data. | responseEnd - responseStart | Tidak ada |
DOM | Waktu yang dikonsumsi untuk resolusi DOM. | domInteractive - responseEnd | Tidak ada |
Res | Waktu yang dikonsumsi untuk pemuatan sumber daya. | loadEventStart - domContentLoadedEventEnd | Waktu yang dikonsumsi untuk memuat sumber daya secara sinkron pada halaman. |
SSL | Waktu yang dikonsumsi untuk koneksi Secure Sockets Layer (SSL). | connectEnd - secureConnectionStart | Bidang ini hanya valid ketika HTTPS digunakan untuk mentransmisikan data. |