Bagaimana cara menemukan file javascript yang tidak terpakai di situs web saya?

"Hapus Javascript yang tidak digunakan" (atau yang terbaru. “Kurangi Javascript yang tidak terpakai”) adalah salah satu rekomendasi Wawasan PageSpeed ​​paling menakutkan yang dapat Anda temui saat menguji kinerja situs WordPress Anda. Itu juga salah satu yang paling umum, jadi Anda mungkin melihatnya di laporan kinerja Anda

Mari kita pahami apa arti file JavaScript yang tidak terpakai dan apa dampaknya terhadap kinerja. Anda akan belajar bagaimana Anda dapat menghapus atau menguranginya dan meningkatkan kinerja WordPress Anda

Tonton dulu video kami, atau teruskan membaca artikel kami

Apa itu File JavaScript yang Tidak Digunakan?

File JavaScript yang tidak digunakan adalah sumber daya yang tidak diperlukan untuk merender halaman — yaitu, untuk memuat dan menampilkan konten utama halaman.  

Mereka mungkin tidak diperlukan karena dua alasan

  1. Mereka bukan bagian dari konten paro atas — konten paling penting yang perlu dirender
    Untuk memuat halaman lebih cepat, browser harus menganalisis dan merender hanya resource yang penting – terutama kode HTML. Di samping catatan, itu juga mengapa Anda harus menghilangkan sumber daya pemblokiran render JS dan CSS yang memperlambat pemuatan halaman

    Contoh umum dari file JS tersebut adalah kode pihak ketiga, seperti Google Analytics dan kode pelacakan Facebook

    Contoh bermanfaat lainnya untuk pengguna WordPress adalah menggunakan plugin hanya jika diperlukan. Semua plugin memuat skrip yang sebagian besar didasarkan pada JS. Itu sebabnya Anda harus berhati-hati dan memuatnya hanya di halaman penting. Jika tidak, dampak file JavaScript akan sangat berat pada kinerja, dan tidak akan ada cara lain yang mudah untuk memperbaiki masalah tersebut. Hal yang sama berlaku untuk pembuat tema dan halaman yang sangat bergantung pada JavaScript
  1. Mereka ada dalam kode, tetapi tidak digunakan lagi. Mereka sama sekali tidak berguna.  

Mengapa Anda Harus Menghapus atau Mengurangi JavaScript yang Tidak Digunakan

File JavaScript yang tidak terpakai dapat sangat memengaruhi performa situs dan pengalaman pengguna Anda. Metrik utama yang terlibat adalah First Input Delay (FID), salah satu metrik Core Web Vitals.  

Penundaan Input Pertama mengukur respons halaman dengan mempertimbangkan interaksi pengguna — oleh karena itu, hanya dapat dihitung di lapangan

Total Waktu Pemblokiran (TBT) menggantikan FID sebagai metrik Lighthouse yang menentukan interaktivitas halaman berdasarkan input pengguna. Metrik TBT menyumbang 25% dari skor kinerja Lighthouse. Sangat mudah untuk melihat betapa pentingnya dan mengapa menghapus JavaScript yang tidak digunakan itu penting

Seperti yang telah kami jelaskan, JavaScript yang tidak digunakan dapat memengaruhi seberapa cepat browser merender dan memuat halaman. Dan waktu pemuatan halaman yang lebih buruk juga tidak baik bagi pengguna

🚀 Ingin tahu lebih banyak tentang Mercusuar?

Cara Menemukan JS yang Tidak Digunakan untuk Dihilangkan atau Dikurangi

Ada berbagai cara untuk menganalisis dan mengidentifikasi file JavaScript yang harus Anda tangani

Mari kita membahas dua alat yang mudah dan lugas. Wawasan PageSpeed ​​dan GTmetrix

Menemukan JS yang Tidak Digunakan melalui Wawasan PageSpeed

Laporan Wawasan PageSpeed ​​memudahkan Anda mengidentifikasi JavaScript tidak terpakai yang harus Anda hilangkan. Buka bagian Peluang dan cari "Hapus JavaScript yang tidak digunakan". Di sini, Anda akan menemukan apakah dan sumber daya JS apa yang memengaruhi kinerja situs Anda. Pada contoh di bawah, skrip JS terkait dengan Google Pengelola Tag

Bagaimana cara menemukan file javascript yang tidak terpakai di situs web saya?

Menemukan JS yang Tidak Digunakan melalui GTmetrix

Cara lain untuk menemukan file JavaScript adalah melalui Waterfall Chart yang disediakan oleh GTmetrix. Setelah menguji kinerja URL Anda, buka Bagan Air Terjun dan lihat tab JS. Di sana, Anda akan menemukan daftar JS yang tidak terpakai yang harus Anda kelola

Seperti yang kami sebutkan di atas, sebagian besar skrip JS yang berat terkait dengan kode pelacakan (mis. g. , Google Pengelola Tag) dan plugin. Anda dapat dengan mudah memahaminya dengan melihat kolom Domain

Bagaimana cara menemukan file javascript yang tidak terpakai di situs web saya?
Air terjun GTmetrix

Sekarang mari kita pahami cara menangani rekomendasi PSI dan mengatasi JavaScript yang tidak terpakai

Cara Menghapus atau Mengurangi File JS yang Tidak Digunakan di WordPress. Dua Metode

Anda dapat menghapus atau mengurangi file JS yang tidak terpakai dengan dua cara

  1. Kamu bisa. Dengan demikian, file JavaScript hanya akan dimuat saat ada interaksi pengguna, seperti menggulir atau mengetuk tombol. Jika tidak ada interaksi pengguna yang terjadi, file JS tidak akan dimuat sama sekali.  

    Perhatikan bahwa tidak semua skrip dari daftar rekomendasi PageSpeed ​​dapat ditunda dengan aman. Anda hanya boleh menunda file JS yang berada di paro atas karena merupakan sumber daya yang memblokir perenderan

    Jika Anda menunda JavaScript, alat Lighthouse tidak akan mendeteksi file JS apa pun karena belum dimuat. Inilah cara Anda menangani rekomendasi PSI dan memastikan bahwa sebagian besar file tidak akan disertakan dalam laporan
  1. Anda dapat memuat file JavaScript hanya bila diperlukan. Ini berarti skrip JS akan dieksekusi hanya jika dan ketika halaman tertentu membutuhkannya. Sekali lagi, Anda dapat memikirkan tentang plugin dan tema tertentu atau pembuat halaman yang Anda gunakan — kemungkinan besar tidak membantu di semua halaman

Kedua opsi tersebut saling melengkapi karena setiap metode menangani aspek berbeda dalam mengelola JS yang tidak digunakan

Di satu sisi, menunda JS akan mengontrol kapan kode dieksekusi. Ini secara teknis merupakan solusi daripada perbaikan. Tapi itu berpengaruh karena membuat JS non-render-blocking

Di sisi lain, membongkar aset yang tidak perlu akan mengurangi ukuran JS pada halaman. Ini secara teknis mengurangi JS yang tidak digunakan daripada menghapusnya sama sekali

Catatan. bahkan menggunakan metode seperti itu, sulit untuk menghilangkan notifikasi PageSpeed ​​Insights. Lighthouse menandai file apa pun dengan lebih dari 20 KB kode JS yang tidak terpakai.  

Karena sebagian besar tema dan plugin dilengkapi dengan file JS yang dibundel, kemungkinan besar batas di atas akan terlampaui di banyak file. Dengan kata lain, menggabungkan JS hampir menjamin bahwa Anda akan selalu mendapatkan rekomendasi yang ditampilkan.  

Itu sebabnya dalam banyak kasus, tujuan utamanya adalah untuk mengurangi efek menghapus JS yang tidak digunakan daripada memperbaikinya sepenuhnya.  

Contoh yang bagus adalah pustaka jQuery saat tidak bisa ditunda. Itu akan selalu ditandai untuk JS yang tidak digunakan.  

Menghapus atau Mengurangi Sumber Daya JS yang Tidak Digunakan dengan Plugin

Anda memiliki opsi berbeda untuk menghapus atau mengurangi JavaScript yang tidak digunakan dengan menggunakan plugin

Jika Anda ingin menunda file JavaScript, Anda dapat menggunakan fitur Delay JavaScript Execution yang disediakan oleh WP Rocket.  

Opsi ini mudah digunakan dan akan membantu Anda menghemat banyak waktu dan tenaga

Di tab Pengoptimalan File, buka opsi Tunda Eksekusi JavaScript dan tandai. Anda tidak harus benar-benar melakukan hal lain.  

WP Rocket akan menangani semuanya, dan Anda akan melihat perbedaan nyata dalam skor kinerja dan laporan PSI Anda

Bagaimana cara menemukan file javascript yang tidak terpakai di situs web saya?


Dapatkan WP Rocket sekarang dan segera uji peningkatannya

Cara lain untuk menunda file JS adalah dengan menggunakan plugin seperti Flying Scripts atau WP Meteor.  

Di sisi lain, Anda dapat menggunakan plugin pengelola aset untuk mengontrol di mana file tertentu akan dimuat, seperti.  

  • Pembersihan Aset
  • Masalah
  • Gonzales
  • Penyelenggara Plugin

Mulai Menghapus JavaScript yang Tidak Digunakan Sekarang Juga

Menghapus atau mengurangi JavaScript yang tidak terpakai adalah langkah penting untuk mengoptimalkan nilai FID dan meningkatkan performa situs Anda — dan bahkan mendapatkan skor 100% di Google PageSpeed ​​Insights

Berkat WP Rocket, Anda dapat dengan mudah mengelola JS yang tidak terpakai dan mengatasi masalah kinerja.  

Belum menjadi pelanggan WP Rocket? . WP Rocket adalah cara termudah untuk meningkatkan skor PageSpeed ​​Insights Anda.  

Anda selalu dapat mengandalkan jaminan uang kembali 100% kami. Meskipun menurut kami Anda tidak akan pernah menginginkannya, kami akan dengan senang hati memberikan pengembalian dana jika Anda memintanya dalam waktu 14 hari setelah pembelian

🚀 Satu-satunya risiko yang akan Anda ambil dengan plugin kami adalah mempercepat situs web Anda. WP Rocket secara otomatis menerapkan 80% praktik terbaik kinerja web, langsung meningkatkan skor Data Web Inti Anda.  

Bagaimana cara menemukan dan menghapus JavaScript yang tidak terpakai?

Jika situs web Anda berjalan di WordPress, Anda dapat menghapus JavaScript yang tidak terpakai dari halamannya menggunakan plugin khusus. Misalnya, Anda dapat menggunakan AssetCleanUp, yang juga memungkinkan Anda menonaktifkan file JavaScript yang tidak terpakai. Opsi lainnya adalah mendeteksi JS yang tidak terpakai dengan Chrome DevTools dan menghapus file yang tidak perlu .

Bagaimana cara menemukan file CSS dan JS yang tidak terpakai di situs web saya?

Buka DevTools di tab Chrome Anda dengan mengeklik kanan dan memeriksa menggunakan 'Periksa' atau menekan F12 dari keyboard Anda. Klik ikon muat ulang yang ditunjukkan pada teks di atas . Cakupan kode (JavaScript dan CSS) akan dihitung.

Bagaimana cara menemukan JS atau CSS yang tidak digunakan?

Buka Alat Pengembang Chrome (tekan Ctrl + Shift + I atau klik tombol kanan mouse dan pilih Periksa. ) Selanjutnya, klik ikon setelan > Alat lainnya > Cakupan. Setelah itu, klik tombol Muat Ulang (ikon panah lingkaran). Filter daftar yang muncul hanya untuk melihat resource JavaScript atau CSS

Mengapa menghapus JavaScript yang tidak terpakai?

Mengurangi JavaScript yang tidak terpakai dapat mengurangi perilaku pemblokiran render untuk mempercepat pemuatan halaman Anda dan meningkatkan pengalaman halaman pengunjung Anda . Secara default, file JavaScript memblokir perenderan karena file tersebut memblokir browser agar tidak menangani tugas pemuatan halaman lain, sehingga menunda First Paint halaman Anda.