Mengurangi JavaScript yang tidak terpakai dapat mengurangi perilaku pemblokiran perenderan untuk mempercepat pemuatan halaman Anda dan meningkatkan pengalaman halaman pengunjung Anda
Secara default, file JavaScript memblokir perenderan karena memblokir browser agar tidak menangani tugas pemuatan halaman lain, sehingga menunda halaman Anda
Memuat JavaScript yang tidak terpakai dapat berdampak besar pada performa halaman Anda, baik yang terukur maupun yang dirasakan
Bagaimana skor situs Anda pada audit ini?
Menganalisa
Jenis JavaScript yang tidak digunakan
Ketika berbicara tentang JavaScript yang tidak digunakan, umumnya terbagi dalam dua kategori. Kedua kategori ini memengaruhi performa halaman Anda, meskipun dengan cara yang berbeda. Mereka
1] JavaScript non-kritis
JavaScript yang tidak diperlukan untuk konten paruh atas tetapi masih dapat digunakan di tempat lain pada halaman atau halaman lain
2] JavaScript mati
Dead JavaScript mengacu pada kode yang tidak digunakan sama sekali
Ini mungkin berisi sisa-sisa dari versi situs Anda sebelumnya, dan/atau diimpor dari modul lain yang tidak direferensikan lagi, dan/atau digunakan untuk menjadi bagian dari pengujian [i. e. , mereka digunakan sementara]
Bagaimana JavaScript yang tidak digunakan memengaruhi kinerja halaman?
Setiap kali halaman dimuat, browser harus mendownload, mengurai, dan mengeksekusi file JavaScript sebelum dapat merender apa pun di halaman [kecuali jika file JavaScript ditangguhkan secara eksplisit atau dimuat secara asinkron]
Ini karena browser tidak dapat mengetahui bagaimana file JavaScript akan memengaruhi konten halaman, sehingga menunggu hingga dieksekusi sepenuhnya.
JavaScript yang tidak digunakan secara tidak perlu meningkatkan waktu eksekusi browser, memperlambat pemuatan halaman Anda
Biasanya, semakin banyak JavaScript yang tidak terpakai di halaman Anda, semakin lama waktu yang dibutuhkan browser untuk mengunduh, mengurai, dan menjalankannya
Memuat JavaScript yang tidak digunakan secara tidak perlu meningkatkan konsumsi bandwidth dan menunda cat pertama halaman Anda, memperlambat kinerja halaman Anda secara keseluruhan
File JavaScript besar yang tidak perlu ini dapat menyebabkan masalah, termasuk kemungkinan penundaan First Paint halaman Anda karena browser diblokir dari pemrosesan tugas penting lainnya. Akibatnya, ini meningkatkan jumlah waktu yang dihabiskan pengunjung Anda untuk menunggu halaman menampilkan sesuatu
Selain itu, kode JavaScript yang tidak penting, meskipun ditangguhkan atau dimuat secara asinkron, dapat memengaruhi kinerja halaman, meskipun tidak memblokir perenderan. Ini karena masih perlu diunduh dan bersaing dengan sumber daya halaman lain untuk bandwidth
Selain itu, kode JavaScript yang tidak digunakan, secara umum, meningkatkan konsumsi data seluler pada perangkat seluler secara sia-sia
Secara keseluruhan, mengurangi JavaScript yang tidak terpakai dapat mengurangi waktu eksekusi browser dan konsumsi bandwidth, sehingga halaman dimuat lebih cepat
Bagaimana GTmetrix memicu audit ini?
GTmetrix memeriksa file JavaScript Anda untuk kode yang tidak dijalankan selama pemuatan halaman Anda
File JavaScript yang memiliki lebih dari 20 KB kode yang tidak terpakai kemudian ditandai
GTmetrix mengevaluasi potensi penghematan ukuran file yang muncul dari pengurangan kode JavaScript yang tidak terpakai
GTmetrix juga memperkirakan kemungkinan penghematan ukuran file melalui pengurangan JavaScript yang tidak terpakai
Bagaimana cara mengurangi JavaScript yang tidak terpakai?
Anda dapat mengatasi JavaScript yang tidak terpakai dengan strategi berikut
1] Pemecahan kode
Pisahkan JavaScript yang Anda bundel menjadi JavaScript kritis dan non-kritis melalui pemecahan kode
Dengan demikian, perilaku pemblokiran render dapat dikurangi karena hanya JavaScript penting yang dimuat terlebih dahulu. JavaScript tidak penting yang tidak diperlukan di laman Anda kemudian dapat dihapus
Baca dokumentasi ini untuk mempelajari lebih lanjut tentang pemecahan kode
2] Penghapusan kode mati
Penghapusan kode mati adalah proses menghapus kode JavaScript yang tidak digunakan oleh halaman Anda saat ini. Kode ini mungkin berisi sisa-sisa dari versi situs sebelumnya atau mungkin telah digunakan selama pengujian
Anda dapat menggunakan proses yang dikenal sebagai pengocokan pohon untuk menghapus kode JavaScript yang mati. Baca dokumentasi ini untuk mempelajari lebih lanjut tentang guncangan pohon
3] Penghapusan kode yang diimpor mati
Dalam banyak kasus, kode mati diimpor dari pustaka populer atau bundel JavaScript lainnya, dan sulit untuk mengimpor kode secara selektif untuk aplikasi spesifik Anda
Namun, ada plugin yang dapat membantu Anda menghapus kode yang tidak digunakan secara otomatis dari pustaka populer setelah Anda mengimpornya. Klik di sini untuk mempelajari lebih lanjut tentang plugin ini
Catatan. Ini adalah optimasi tingkat ahli
Mengoptimalkan audit ini membutuhkan pengetahuan lengkap tentang basis kode situs web Anda. Hanya pengembang berpengalaman yang disarankan untuk mencoba ini karena salah memodifikasi JavaScript Anda kemungkinan akan merusak fungsionalitas situs