Percepat situs WordPress Anda dengan Mengurangi JavaScript yang tidak digunakan

Pada artikel ini kita akan belajar tentang bagaimana Anda dapat mengurangi JavaScript yang tidak digunakan, yang pada akhirnya akan membantu situs memuat lebih cepat.

Hal-hal mudah dalam hal JavaScript yang tidak digunakan: semakin banyak kode yang tidak dibutuhkan yang disertakan situs web Anda, semakin lama waktu yang dibutuhkan situs untuk memuat. Tidak ada yang suka mengalami kinerja situs yang lambat dan akibat selanjutnya, oleh karena itu penting untuk memahami cara mengidentifikasi dan menyingkirkan file JavaScript yang tidak digunakan dari situs web.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang memungkinkan Anda melakukan hampir semua hal, termasuk membuat konten yang diperbarui secara dinamis dan mengelola multimedia. Sungguh luar biasa apa yang dapat Anda capai dengan beberapa baris kode JavaScript (yah, mungkin tidak semuanya).

Melalui API Model Objek Dokumen, JavaScript sering digunakan untuk mengedit HTML dan CSS secara dinamis untuk menyegarkan pengalaman pengguna. Ingatlah bahwa kode halaman web Anda biasanya dimuat dan berjalan sesuai urutan kemunculannya di halaman. Jika JavaScript dimuat dan dijalankan sebelum HTML dan CSS yang dimaksudkan untuk diubah, kesalahan dapat terjadi.

Apa itu JavaScript yang Tidak Digunakan?

File JavaScript yang tidak digunakan adalah sumber daya yang tidak diperlukan untuk rendering, atau untuk memuat dan menampilkan konten utama halaman.

Mereka tidak termasuk dalam materi yang harus disajikan terlebih dahulu, atau yang dikenal sebagai konten "paro atas". Hanya sumber daya yang diperlukan, sebagian besar kode HTML, yang harus dianalisis dan dirender oleh browser untuk mempercepat pemuatan halaman.

Meskipun masih dalam kode, mereka tidak lagi digunakan. Mereka tidak berguna sama sekali.

Mengapa Anda Harus Mengurangi Penggunaan JavaScript?

Efisiensi dan pengalaman pengguna situs web Anda mungkin dipengaruhi secara signifikan oleh file JavaScript yang tidak digunakan. First Input Delay (FID), salah satu ukuran Core Web Vitals, adalah indikator utama yang dipermasalahkan.

First Input Delay (FID) hanya dapat dihitung di lapangan karena mengukur respons halaman dengan mempertimbangkan interaksi pengguna.

Sebagai statistik Lighthouse yang mengukur interaktivitas halaman berdasarkan interaksi pengguna, Total Blocking Time (TBT) telah mengambil posisi FID.

Jenis JavaScript yang Tidak Digunakan

Berikut dua bentuk JavaScript yang tidak digunakan adalah:

• JavaScript non-kritis: Digunakan di tempat lain tetapi tidak digunakan untuk materi di bagian atas halaman.
• JavaScript Mati: Tidak lagi digunakan. Mungkin ada bagian dari iterasi sebelumnya dari halaman yang tidak lagi ditautkan atau hanya digunakan sebentar.

Kerugian memiliki JavaScript yang Tidak Digunakan

JavaScript yang tidak digunakan memiliki pengaruh negatif terhadap kinerja situs web berupa penundaan waktu buka halaman. Kegunaan situs web dan seberapa baik kinerjanya di SERP secara langsung dipengaruhi oleh kecepatan situs, yang merupakan faktor penting. Kemungkinan pengguna akan meninggalkan situs web dan mengunjungi situs web lain meningkat jika dimuat dengan lambat; tingkat bouncing yang dihasilkan adalah indikasi SEO yang kuat yang menurunkan hasil mesin pencari situs.

Masalahnya lebih pada bagaimana konsumen memandang berapa lama waktu yang dibutuhkan situs web untuk memuat daripada berapa lama waktu yang dibutuhkan untuk memuat. Anda harus berusaha untuk memastikan bahwa situs hanya memuat skrip yang diperlukan agar situs dapat digunakan pada awalnya, setelah itu skrip lainnya dapat dimuat, karena browser mencoba memuat semuanya, termasuk skrip yang tidak digunakan, secara bersamaan.

Manfaat mengurangi JavaScript yang tidak digunakan

Tak perlu dikatakan bahwa semakin lama waktu yang dibutuhkan browser untuk mengunduh, memproduksi, dan mengeksekusi halaman dengan lebih banyak kode JavaScript di dalamnya. Selain itu, JavaScript yang bahkan tidak digunakan akan terpengaruh. Peramban harus menghabiskan waktu dan sumber daya untuk memprosesnya jika ada di halaman. Ini menggarisbawahi perlunya tinjauan kode rutin dan upaya pengoptimalan.

Pengguna seluler Anda juga mendapat manfaat dari pengoptimalan kode. Anda dapat mengurangi kebutuhan bandwidth dengan mengurangi ketergantungan pada browser untuk memproses JavaScript. Untuk mencegah proses pemuatan halaman tertunda lebih lama dari yang diperlukan, Anda harus dapat membedakan antara JavaScript penting dan JavaScript non-esensial.

Bagaimana cara mengurangi JavaScript yang tidak digunakan?

Pertama-tama kita akan melihat bagaimana Anda dapat mengidentifikasi file JavaScript besar menggunakan GTMetrix dan kemudian kita akan membahas cara mengurangi Javascript yang tidak digunakan.

Gunakan GTMetrix untuk menemukan file JavaScript terbesar

Manfaatkan bagan Air Terjun GTmetrix untuk mengidentifikasi file JavaScript terbesar Anda.

• Buka situs GTMetrix dan masukkan URL situs Anda dan klik Uji Situs Anda

• Klik tab Waterfall setelah hasilnya ditampilkan

• Klik pada JS dan Anda akan dapat melihat file dalam urutan menaik dari ukuran file JavaScript.

Biasanya, URL akan mengungkapkan dari mana asalnya. Untuk melihat semua file JavaScript Anda, gunakan filter jenis. Anda juga dapat melihat visualisasi penggunaan untuk melihat total dan byte yang tidak digunakan.

Perkecil JavaScript

Memperkecil JavaScript menghapus kode karakter asing Anda. Temukan file bermasalah dalam kode sumber Anda dan kemudian kecualikan mereka dari minifikasi jika ini merusak situs web Anda.

Anda dapat melakukannya dengan mudah menggunakan plugin LiteSpeed ​​Cache dan tersedia secara default saat Anda menerapkan situs WordPress menggunakan CyberPanel

• Buka dasbor WordPress

• Klik LiteSpeed ​​Cache -> Pengoptimalan Halaman dari menu sebelah kiri

• Klik Pengaturan JS dari atas dan nyalakan JS Minify dan klik Simpan Perubahan . Ini akan mengecilkan semua file dan kode JavaScript Anda.

Hapus JavaScript yang tidak digunakan di Elementor

Dengan memuat secara dinamis penangan JS dan Swiper widget hanya saat benar-benar digunakan, ini meminimalkan file JavaScript Elementor.

• Buka dasbor WordPress

• Klik Elementor -> Pengaturan dari menu sebelah kiri

• Klik pada tab Eksperimen dari bilah atas dan ubah status menjadi Aktif dari bagian Pemuatan Aset yang Ditingkatkan

• Gulir ke bawah dan klik Simpan Perubahan

Tunda atau tunda JavaScript yang Tidak Penting

• Buka Dasbor WordPress

• Klik Plugins -> Add New dari menu sebelah kiri

• Cari JavaScript Async . Instal dan Aktifkan

• Buka Pengaturan -> Async JavaScript dari menu sebelah kiri

• Di tab Pengaturan dari bilah atas. Klik Terapkan Tunda

• Gulir ke bawah dan klik Simpan Perubahan

Hapus JavaScript yang tidak digunakan dengan plugin pembongkaran aset

Saat file atau plugin tertentu tidak perlu dimuat di situs web, Asset CleanUp memungkinkan Anda menonaktifkan JavaScript yang tidak dibutuhkan.

• Buka dasbor WordPress

• Klik Plugins -> Add New dari menu sebelah kiri

• Cari Pembersihan Aset . Instal dan Aktifkan

• Klik pada Pembersihan Aset -> Pengaturan dari menu sisi kiri

• Klik Test Mode dari menu sebelah kiri dan klik tombol Enable Test Mode untuk menyalakannya

• Gulir ke bawah dan klik Perbarui Semua Pengaturan

• Sekarang klik Optimalkan JavaScript dari menu sebelah kiri dan nyalakan Combine Loaded JS Into Lesser Files.

• Gulir ke bawah dan klik Perbarui Semua Pengaturan

Nonaktifkan modul plugin yang tidak digunakan

• Buka Dasbor WordPress

• Klik Plugins -> Add New dari menu sebelah kiri

• Cari RankMath . Instal dan Aktifkan plugin

• Klik pada RankMath -> Dasbor dari menu sebelah kiri

• Klik Modul dari bilah atas dan matikan sakelar Modul apa pun yang tidak digunakan.

Kesimpulan

JavaScript yang tidak digunakan akan membuat situs web Anda lebih lama dimuat karena browser harus mengunduh, mengurai, mengkompilasi, dan mengevaluasi skrip yang tidak berguna. Ini menggunakan lebih banyak data seluler dan memperlambat parameter rendering. Ini berdampak pada seberapa baik kinerja situs web dan pada akhirnya menurunkan pengalaman pengguna.

Oleh karena itu, dengan meminimalkan skrip ini, Anda dapat membuat situs web Anda memuat lebih cepat dan meningkatkan fungsionalitasnya secara keseluruhan.