Tingkatkan keterampilan detektif performa Anda dengan Lighthouse dan Chrome DevTools.
Sebagai developer, Anda sering kali tidak memiliki kontrol atas skrip pihak ketiga mana yang dimuat situs Anda. Sebelum dapat mengoptimalkan konten pihak ketiga, Anda harus melakukan tugas detektif untuk mengetahui penyebab 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-teknik yang semakin mumpuni yang paling baik digunakan sebagai kombinasi.
Jika Anda hanya memiliki 5 menit
Audit performa Lighthouse membantu Anda menemukan peluang untuk mempercepat pemuatan halaman. Skrip pihak ketiga yang lambat cenderung muncul di bagian Diagnostik pada Kurangi waktu eksekusi JavaScript dan audit Hindari payload jaringan yang sangat besar.
Untuk menjalankan audit:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Klik Seluler.
- Centang kotak Performa. (Anda dapat menghapus centang pada kotak lainnya di bagian Audit.)
- Klik Simulated Fast 3G, 4x CPU Slowdown.
- Centang kotak Hapus Penyimpanan.
- Klik Jalankan audit.
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.
Mengurangi waktu eksekusi JavaScript
Audit Lighthouse Reduce JavaScript execution time menandai skrip yang membutuhkan waktu lama untuk diurai, dikompilasi, atau dievaluasi. Pilih kotak centang Show 3rd-party resources untuk menemukan skrip pihak ketiga yang menggunakan CPU secara intensif.
Menghindari payload jaringan yang sangat besar
Audit Hindari payload jaringan yang sangat besar mengidentifikasi permintaan jaringan—termasuk permintaan dari pihak ketiga—yang dapat memperlambat waktu muat halaman. Audit akan gagal saat payload jaringan Anda melebihi 4.000 KB.
Memblokir permintaan jaringan di Chrome DevTools
Pemblokiran permintaan jaringan Chrome DevTools memungkinkan Anda melihat perilaku halaman saat skrip, stylesheet, atau resource tertentu lainnya tidak tersedia. Setelah Anda mengidentifikasi skrip pihak ketiga yang diduga memengaruhi performa, ukur perubahan waktu pemuatan Anda 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 Network 1. Klik kanan permintaan apa pun di panel Network. 1. Pilih Blokir URL permintaan.
Tab Request block akan muncul di panel samping DevTools. Anda dapat mengelola permintaan mana yang telah diblokir di sana.
Untuk mengukur dampak skrip pihak ketiga:
- Ukur waktu yang diperlukan untuk memuat halaman Anda menggunakan panel Jaringan. Untuk mengemulasikan kondisi di dunia nyata, aktifkan throttling jaringan dan throttling CPU. (Pada koneksi yang lebih cepat dan hardware desktop, dampak skrip yang mahal mungkin tidak terlalu representatif seperti halnya pada ponsel.)
- Blokir URL atau domain yang bertanggung jawab atas skrip pihak ketiga yang Anda yakini menjadi masalah.
- Muat ulang halaman dan ukur ulang waktu yang diperlukan untuk memuat tanpa skrip pihak ketiga yang diblokir.
Anda diharapkan 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 yang menyebabkan kelambatan.
Perhatikan bahwa melakukan tiga atau lebih pengukuran dan melihat nilai median kemungkinan akan memberikan 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 Performance, sehingga memudahkan Anda.