Application Real-Time Monitoring Service:Pelacakan sesi lambat

Prasyarat

• Anda telah mengintegrasikan Browser Monitoring. Untuk informasi selengkapnya, lihat Memulai Browser Monitoring.

• Ubah konfigurasi SDK.

  Secara default, SDK ARMS Browser Monitoring tidak melaporkan informasi sumber daya statis. Untuk menggunakan fitur pelacakan sesi lambat, atur sendResource ke true pada bagian config SDK.

  <script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f6354******",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
  </script>

• Redeploy aplikasi Anda.

  Setelah redeploy, informasi sumber daya statis dilaporkan saat event onload halaman dipicu, sehingga memungkinkan Anda menggunakan Browser Monitoring di ARMS untuk mengidentifikasi masalah muat halaman yang lambat secara cepat.

Titik masuk

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

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

3. Di panel navigasi kiri, pilih Application > Session Tracing.

Kasus penggunaan: mengidentifikasi hambatan performa

Bagian ini menjelaskan cara mengidentifikasi hambatan performa halaman.

1. Di panel navigasi kiri, pilih Application > Access speed. Grafik menunjukkan waktu muat halaman penuh sebesar 36,7 detik pada pukul 11.00.

   

2. Di halaman Access speed, gulir ke bawah ke bagian Slow Page Session Trace (TOP20). Bagian ini mencantumkan 20 sesi paling lambat untuk halaman dalam rentang waktu yang ditentukan.

   Untuk mengubah rentang waktu, klik pemilih waktu di pojok kanan atas halaman dan pilih rentang baru dari daftar.

   Sesi pada pukul 11.36.46 menunjukkan waktu muat halaman sebesar 36,72 detik, mengidentifikasi akses ini sebagai penyebab lonjakan tiba-tiba pada waktu muat halaman.

3. Di bagian Slow Page Session Trace (TOP20), klik nama halaman di kolom Page.

   Halaman Slow Loading Details terbuka, menampilkan grafik air terjun performa pemuatan sumber daya statis yang membantu Anda menemukan hambatan performa dengan cepat.

4. Di bagian Page Information di bagian atas halaman Slow Loading Details, tinjau URL halaman, waktu akses, waktu muat halaman penuh, waktu parsing DOM, alamat IP klien, browser, dan sistem operasi. Gunakan informasi ini untuk menentukan apakah masalah disebabkan oleh isu jaringan atau faktor lainnya dan lakukan optimasi yang tepat sasaran.

Metode alternatif untuk mengidentifikasi masalah performa

Selain halaman Access speed, Anda juga dapat menggunakan halaman Session Tracing untuk menemukan masalah performa.

1. Di panel navigasi kiri, klik Session Tracing untuk membuka halaman Session Tracing, yang mencantumkan sesi aplikasi. Anda juga dapat menyaring sesi berdasarkan username, ID pengguna, ID sesi, IP akses, URL halaman, browser, versi browser, jenis jaringan, dan wilayah.

2. Klik ID di kolom Session ID untuk membuka halaman Session Details dan melihat ringkasan serta jejak sesi tersebut. Untuk informasi selengkapnya, lihat Session Traces.

FAQ

1. Mengapa Size bernilai 0 pada grafik air terjun pemuatan sumber daya?

   Data Size diperoleh dari properti PerformanceResourceTiming.transferSize. Properti transferSize yang bersifat read-only merepresentasikan ukuran sumber daya yang diambil dalam byte, dan mengembalikan nilai 0 jika sumber daya tersebut diambil dari cache lokal atau merupakan sumber daya cross-origin.

   Di browser Chrome, tekan F12 untuk membuka developer tools. Jika kotak centang Disable cache di tab Network tidak dipilih, nilai transferSize adalah 0.

   Solusi

   Pilih kotak centang Disable cache. Nilai transferSize kemudian dilaporkan dengan benar.

   ▶ 1: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 2: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 3: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▼ 4: PerformanceResourceTiming
       connectEnd: 410.7099999964703
       connectStart: 410.7099999964703
       decodedBodySize: 232002
       domainLookupEnd: 410.7099999964703
       domainLookupStart: 410.7099999964703
       duration: 195.52999999723397
       encodedBodySize: 59637
       entryType: "resource"
       fetchStart: 410.7099999964703
       initiatorType: "script"
       name: "https://g.alicdn.com/cm-design/arms/1.2.81/scripts/arms/nls/messages_zh.js"
       nextHopProtocol: "h2"
       redirectEnd: 0
       redirectStart: 0
       requestStart: 514.6799999929499
       responseEnd: 606.2399999937043
       responseStart: 562.94999999227
       secureConnectionStart: 410.7099999964703
     ▶ serverTiming: []
       startTime: 410.7099999964703
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming

2. Mengapa Time bernilai 0 pada grafik air terjun pemuatan sumber daya?

   Data Time diperoleh dari PerformanceResourceTiming.duration. Saat Anda melihat pemuatan sumber daya statis di grafik air terjun, nilai Time bernilai 0 dalam beberapa kasus karena permintaan mengenai cache dan dikendalikan oleh kebijakan cache jangka panjang yang menggunakan max-age.

   Solusi

   Di browser Chrome, tekan F12 untuk membuka developer tools. Pilih kotak centang Disable cache di tab Network dan refresh halaman. Waktu yang dikonsumsi oleh permintaan jaringan kemudian akan ditampilkan.

3. Mengapa banyak nilai waktu yang dikembalikan bernilai 0?

   Anda mungkin memperhatikan bahwa banyak nilai API yang berkaitan dengan waktu bernilai 0. Hal ini terjadi karena kebijakan asal sama (same-origin policy) mengatur informasi timing untuk sumber daya cross-origin menjadi 0. Hal ini terutama memengaruhi properti berikut:

   • redirectStart

   • redirectEnd

   • domainLookupStart

   • domainLookupEnd

   • connectStart

   • connectEnd

   • secureConnectionStart

   • requestStart

   • responseStart

   Solusi

   Tambahkan header Timing-Allow-Origin ke header respons. Contohnya: Timing-Allow-Origin: *.

4. Periode waktu apa yang direpresentasikan oleh grafik air terjun pemuatan API?

   Grafik air terjun pemuatan API mencakup periode waktu berikut:

   • Waktu mulai: waktu saat halaman mulai dimuat

   • Waktu akhir: 1 menit setelah waktu muat halaman penuh

   Grafik air terjun pemuatan API memvisualisasikan semua permintaan API yang dilakukan selama proses pemuatan halaman.

5. Mengapa durasi pada grafik air terjun pemuatan API berbeda dengan durasi pada grafik air terjun pemuatan sumber daya halaman?

   Durasi pada grafik air terjun pemuatan API mungkin sedikit lebih lama dibandingkan pada grafik air terjun pemuatan sumber daya halaman. Perbedaan ini terjadi karena nilai-nilai tersebut dihitung secara berbeda: grafik API mengukur dari waktu permintaan dikirim hingga respons diterima, sedangkan grafik sumber daya halaman menggunakan API performance.getEntriesByType('resource') milik browser.

   Perbedaan waktu kecil ini tidak memengaruhi kemampuan Anda untuk mengidentifikasi hambatan performa.

6. Apa yang direpresentasikan oleh waktu mulai timeline pada grafik air terjun pemuatan API?

   Waktu mulai timeline pada grafik air terjun API adalah selisih antara waktu saat permintaan API dimulai dan waktu fetchStart halaman. Timeline ini menunjukkan titik inisiasi dan durasi permintaan API selama proses pemuatan halaman.

Informasi lebih lanjut

• Page Speed

• Browser Monitoring FAQ