Menghapus JavaScript yang tidak digunakan

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.
Klik nilai di kolom URL untuk membuka kode sumber skrip di tab baru.

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