Mengidentifikasi JavaScript pihak ketiga yang lambat

Tingkatkan keterampilan detektif performa Anda dengan Lighthouse dan Chrome DevTools.

Milica Mihajlija

Sebagai developer, Anda sering kali tidak memiliki kontrol atas skrip pihak ketiga yang dimuat situs Anda. Sebelum dapat mengoptimalkan konten pihak ketiga, Anda harus melakukan beberapa pekerjaan detektif untuk mencari tahu apa yang membuat situs Anda lambat. 🕵️

Dalam postingan ini, Anda akan mempelajari cara menggunakan Lighthouse dan Chrome DevTools untuk mengidentifikasi resource pihak ketiga yang lambat. Postingan ini membahas teknik yang semakin andal dan paling baik digunakan dalam kombinasi.

Jika Anda hanya punya waktu 5 menit

Audit performa Lighthouse membantu Anda menemukan peluang untuk mempercepat pemuatan halaman. Skrip pihak ketiga yang lambat cenderung muncul di bagian Diagnostik pada audit Mengurangi waktu eksekusi JavaScript dan Menghindari payload jaringan yang sangat besar.

Untuk menjalankan audit:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Klik Seluler.
  4. Centang kotak Performa. (Anda dapat menghapus centang di kotak lainnya di bagian Audit.)
  5. Klik Simulasi 3G Cepat, Pelambatan CPU 4x.
  6. Centang kotak Kosongkan Penyimpanan.
  7. Klik Jalankan audit.

Screenshot panel Audit Chrome DevTools.

Penggunaan oleh pihak ketiga

Audit Penggunaan pihak ketiga Lighthouse menampilkan daftar penyedia pihak ketiga yang digunakan halaman. Ringkasan ini dapat membantu Anda lebih memahami gambaran besarnya dan mengidentifikasi kode pihak ketiga yang redundan. Audit ini tersedia di ekstensi Lighthouse dan akan segera ditambahkan ke DevTools di Chrome 77.

Screenshot yang menunjukkan bahwa 51 pihak ketiga ditemukan dan daftar startup fiktif.
Nama penyedia pihak ketiga yang dibuat dengan Pembuat startup. Setiap kesamaan dengan startup yang sebenarnya, baik yang masih aktif maupun yang sudah tidak aktif, hanyalah kebetulan saja.

Mengurangi waktu eksekusi JavaScript

Audit Kurangi waktu eksekusi JavaScript Lighthouse menyoroti skrip yang memerlukan waktu lama untuk diuraikan, dikompilasi, atau dievaluasi. Centang kotak Show 3rd-party resources untuk menemukan skrip pihak ketiga yang intensif CPU.

Screenshot yang menunjukkan bahwa kotak centang 'Tampilkan resource pihak ketiga' dicentang.

Menghindari payload jaringan yang sangat besar

Audit Menghindari payload jaringan yang sangat besar Lighthouse mengidentifikasi permintaan jaringan—termasuk dari pihak ketiga—yang dapat memperlambat waktu pemuatan halaman. Audit akan gagal jika payload jaringan Anda melebihi 4.000 KB.

Screenshot audit 'Hindari payload jaringan yang sangat besar' di Chrome DevTools.

Memblokir permintaan jaringan di Chrome DevTools

Pemblokiran permintaan jaringan Chrome DevTools memungkinkan Anda melihat perilaku halaman saat skrip, stylesheet, atau resource tertentu tidak tersedia. Setelah mengidentifikasi skrip pihak ketiga yang Anda curigai memengaruhi performa, ukur perubahan waktu pemuatan dengan memblokir permintaan ke skrip tersebut.

Untuk mengaktifkan pemblokiran permintaan: 1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools. 1. Klik tab Jaringan. 1. Klik kanan permintaan apa pun di panel Jaringan. 1. Pilih Blokir URL permintaan.

Screenshot menu konteks di panel Performa Chrome DevTools. Opsi 'Block request URL' ditandai.

Tab Pemblokiran permintaan akan muncul di panel samping DevTools. Anda dapat mengelola permintaan yang telah diblokir di sana.

Untuk mengukur dampak skrip pihak ketiga:

  1. Ukur waktu yang diperlukan halaman Anda untuk dimuat menggunakan panel Jaringan. Untuk mengemulasi kondisi di dunia nyata, aktifkan throttling jaringan dan throttling CPU. (Pada koneksi yang lebih cepat dan hardware desktop, dampak skrip yang mahal mungkin tidak serepresentatif seperti pada ponsel.)
  2. Blokir URL atau domain yang bertanggung jawab atas skrip pihak ketiga yang Anda yakini sebagai masalah.
  3. Muat ulang halaman dan ukur ulang waktu yang diperlukan untuk memuat tanpa skrip pihak ketiga yang diblokir.

Anda akan melihat peningkatan kecepatan, tetapi terkadang pemblokiran skrip pihak ketiga mungkin tidak memberikan efek yang Anda harapkan. Jika demikian, kurangi daftar URL yang diblokir hingga Anda mengisolasi URL yang menyebabkan kelambatan.

Perhatikan bahwa melakukan tiga pengukuran atau lebih dan melihat nilai median kemungkinan akan menghasilkan hasil yang lebih stabil. Karena konten pihak ketiga terkadang dapat mengambil resource yang berbeda per pemuatan halaman, pendekatan ini dapat memberi Anda estimasi yang lebih realistis. DevTools kini mendukung beberapa rekaman di panel Performa, sehingga mempermudah proses ini.