JavaScript yang tidak digunakan dapat memperlambat kecepatan pemuatan halaman Anda:
- Jika JavaScript memblokir render, browser harus mendownload, mengurai, mengompilasi, dan mengevaluasi skrip sebelum dapat melanjutkan dengan semua pekerjaan lain yang diperlukan untuk merender halaman.
- Meskipun JavaScript bersifat asinkron (tidak memblokir rendering), kode akan bersaing untuk mendapatkan bandwidth dengan resource lain saat didownload, yang memiliki implikasi performa yang signifikan. Mengirim kode yang tidak digunakan melalui jaringan juga sia-sia bagi pengguna seluler yang tidak memiliki paket data yang tidak terbatas.
Kegagalan audit JavaScript yang tidak digunakan
Lighthouse menandai setiap file JavaScript yang berisi lebih dari 20 kibibyte kode yang tidak digunakan:
![Screenshot audit.](https://developer.chrome.com/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=6&hl=id)
Cara menghapus JavaScript yang tidak digunakan
Mendeteksi JavaScript yang tidak digunakan
Tab Cakupan di Chrome DevTools dapat memberi Anda perincian baris demi baris dari kode yang tidak digunakan.
Class Coverage
di Puppeteer dapat membantu Anda mengotomatiskan
proses deteksi kode yang tidak digunakan dan pengekstrakan kode yang sudah digunakan.
Alat build untuk dukungan penghapusan kode yang tidak digunakan
Lihat pengujian Tooling.Report berikut untuk mengetahui apakah pemaket Anda mendukung fitur yang mempermudah untuk menghindari atau menghapus kode yang tidak digunakan:
Panduan khusus stack
Angular
Jika Anda menggunakan Angular CLI, sertakan peta sumber dalam build produksi untuk memeriksa paket Anda.
Drupal
Sebaiknya hapus aset JavaScript yang tidak digunakan dan hanya lampirkan library Drupal yang diperlukan ke halaman atau komponen yang relevan di halaman. Baca artikel Menentukan library untuk mengetahui detailnya.
Joomla
Sebaiknya kurangi atau ganti jumlah ekstensi Joomla yang memuat JavaScript yang tidak digunakan di halaman Anda.
Magento
Nonaktifkan paket JavaScript bawaan Magento.
Reaksi
Jika Anda bukan rendering sisi server, bagi paket JavaScript Anda dengan React.lazy()
.
Jika tidak, pisahkan kode menggunakan library pihak ketiga seperti
komponen yang dapat dimuat.
Vue
Jika Anda bukan rendering sisi server dan menggunakan router Vue, bagi paket berdasarkan rute pemuatan lambat.
WordPress
Pertimbangkan untuk mengurangi atau mengganti jumlah plugin WordPress yang memuat JavaScript yang tidak digunakan di halaman Anda.
Referensi
- Kode sumber untuk audit Hapus kode yang tidak digunakan
- Menghapus kode yang tidak digunakan
- Menambahkan interaktivitas dengan JavaScript
- Pemisahan Kode
- Penghapusan Kode Nonaktif
- Kode yang Diimpor Nonaktif
- Temukan Kode CSS dan JavaScript yang Tidak Digunakan dengan Tab Cakupan di Chrome DevTools
- class:
Coverage