6 cara mudah untuk mengurangi waktu eksekusi JavaScript di WordPress

Tidak ada yang membuat pengunjung situs web frustrasi lebih dari halaman pemuatan lambat. Ada banyak alasan untuk ini dan salah satunya adalah waktu eksekusi JavaScript yang berlebihan.

Ketika JavaScript terlalu lama untuk diproses, itu menunda semuanya - menyebabkan beban halaman yang lambat, pengalaman pengguna yang buruk, dan bahkan melukai peringkat SEO Anda.

Tapi jangan khawatir. Mengoptimalkan JavaScript tidak harus rumit.

Dalam panduan ini, kami akan memandu Anda melalui cara -cara yang mudah dan efektif untuk mengurangi waktu eksekusi JavaScript di WordPress.

Apakah Anda seorang pemula atau pengguna WordPress tingkat lanjut, cara -cara mudah ini akan membantu mempercepat situs Anda, meningkatkan vital web inti, dan meningkatkan kinerja SEO Anda.

Ayo menyelam!

Apa waktu eksekusi JavaScript?

Waktu eksekusi JavaScript mengacu pada jumlah waktu yang diperlukan untuk browser web untuk memproses dan menjalankan kode JavaScript di halaman web.

Setiap kali pengguna memuat situs, browser harus menguraikan, mengkompilasi, dan menjalankan skrip JavaScript. Jika skrip ini terlalu kompleks, tidak dioptimalkan, atau memblokir, mereka dapat memperlambat kinerja halaman, yang mengarah ke waktu beban yang lebih tinggi dan pengalaman pengguna yang buruk.

Apa dampak waktu eksekusi JavaScript pada kinerja?

Berikut adalah rincian bagaimana waktu eksekusi JavaScript mempengaruhi kinerja:

1. Memblokir utas utama

Pikirkan terowongan sempit di mana hanya satu mobil yang bisa lewat sekaligus. Lalu lintas bergerak dengan lancar selama tidak ada kendaraan yang terlalu lama di dalam.

Browser bekerja dengan cara yang sama - mereka mengandalkan satu utas utama untuk mengelola tugas seperti memuat konten, memberikan halaman, dan memproses interaksi pengguna.

Ketika JavaScript berjalan, itu menjadi prioritas di utas ini. Jika terlalu lama untuk dieksekusi, itu seperti truk yang macet di terowongan, memegang semua mobil lainnya. Penundaan ini mencegah browser menangani tugas -tugas lain, menyebabkan beban halaman yang lamban dan interaksi yang tidak responsif.

2. Rendering tertunda

Saat Anda mengunjungi situs web, Anda mengharapkan konten muncul di layar dengan cepat. Proses ini, yang dikenal sebagai "melukis" konten, memastikan pengalaman pengguna yang lancar.

Namun, ketika eksekusi JavaScript terlalu lama, ia menunda rendering awal ini, membuat pengguna menatap layar kosong - yang menyebabkan pengalaman pengguna yang buruk.

3. Penundaan Input Pertama (FID)

Ini melacak berapa lama situs web untuk menanggapi interaksi pertama pengguna, seperti mengklik tombol. FID yang tertunda menghasilkan pengalaman yang lesu bagi pengguna, yang membuat frustrasi.

Peningkatan waktu eksekusi JavaScript memiliki dampak langsung pada penundaan input pertama (FID). Ketika JavaScript kelebihan beban, situs web tidak dapat menanggapi input pengguna segera, membuatnya tampak tidak responsif dan memberikan pengalaman pengguna yang buruk.

4. Konsumsi memori

Kode JavaScript, seperti program lainnya, membutuhkan memori untuk dijalankan. Kode yang kompleks atau tidak dioptimalkan dapat memakan sejumlah besar memori.

Akibatnya, ini dapat memperlambat browser dan berpotensi menyebabkan crash, terutama pada perangkat seluler dengan sedikit memori.

5. Dampak negatif SEO

Mesin pencari seperti Google menggunakan kecepatan halaman saat peringkat hasil pencarian.

Eksekusi JavaScript yang lambat dapat mengurangi kinerja halaman dan memengaruhi peringkat situs dalam hasil pencarian.

Singkatnya, eksekusi JavaScript yang tertunda memperlambat rendering, meningkatkan FID, dan bahkan dapat membebani browser. Ini semua menambah pengalaman pengguna yang mengerikan, yang dapat menyebabkan pengunjung meninggalkan situs web Anda.

Bagaimana cara mengukur waktu eksekusi JavaScript?

Untuk mengoptimalkan waktu eksekusi JavaScript, pertama -tama Anda harus mengukurnya secara akurat. Untungnya, ada beberapa alat dan teknik yang tersedia untuk memantau kinerja JavaScript dan mengidentifikasi masalah yang memengaruhi kecepatan situs WordPress Anda.

Mengukur Waktu Eksekusi JS dengan Wawasan Halaman

Google Pagespeed Insights adalah alat gratis dari Google yang mengukur kecepatan halaman web dan memberikan ide optimasi.

Inilah cara menggunakannya untuk mengukur waktu eksekusi JavaScript:

Kunjungi situs web PageSpeed ​​Insights atau gunakan ekstensi Chrome PageSpeed ​​Insights.

Di sini, masukkan URL situs web yang ingin Anda analisis dan klik tombol "Analisis".

PageSpeed ​​Insights akan memberikan laporan yang berisi sejumlah indikator kinerja, termasuk waktu eksekusi JavaScript.

Jika Anda mendapatkan peringatan tentang mengurangi waktu eksekusi JavaScript, ikuti sarannya.

Mengukur waktu eksekusi JS dengan gtmetrix

GTMetrix adalah alat umum lain untuk mengukur kinerja halaman web, yang mencakup waktu eksekusi JavaScript.

Buka situs web GTMetrix, masukkan URL halaman web, lalu klik opsi tes sekarang.

Setelah beberapa saat memuat, GTMetrix akan menghasilkan laporan lengkap dengan metrik kinerja, termasuk waktu eksekusi JavaScript.

Anda dapat menggunakan wawasan ini dari GTMetrix untuk mengoptimalkan kode JavaScript Anda dan meningkatkan kinerja halaman web secara keseluruhan.

Cara mengurangi waktu eksekusi javascript

Berikut adalah beberapa cara mudah untuk mengurangi waktu eksekusi JavaScript, membuat situs web Anda lebih cepat dan meningkatkan pengalaman pengguna.

1. Hindari tema/plugin yang membengkak

Salah satu alasan paling umum untuk eksekusi JavaScript yang lambat di WordPress adalah tema yang membengkak dan plugin yang berlebihan.

Sementara tema dan plugin yang kaya fitur mungkin tampak menarik, mereka sering datang dengan biaya kinerja.

Setiap skrip tambahan, animasi, atau fungsi menambah waktu pemuatan situs web Anda, yang mengarah ke eksekusi yang lebih lambat, penggunaan CPU yang lebih tinggi, dan pengalaman pengguna yang buruk.

Mengapa tema & plugin kembung menjadi masalah?

• Eksekusi Kode Berlebihan: Tema berat dan plugin berkode buruk membutuhkan lebih banyak sumber daya, meningkatkan waktu eksekusi JavaScript.
• Permintaan HTTP Ekstra: Beberapa tema dan plugin memuat CSS tambahan, javascript, dan font tambahan - bahkan jika Anda tidak menggunakannya.
• Peningkatan beban server: Terlalu banyak plugin aktif dapat memperlambat waktu respons server Anda, memengaruhi SEO dan pengalaman pengguna.

Bagaimana cara memilih alternatif ringan?

• Gunakan tema yang dioptimalkan kinerja: Tetaplah dengan tema yang cepat dan minim seperti GeneratePress, Astra, atau Kadence yang memprioritaskan kecepatan.
• Audit plugin Anda: Tinjau plugin secara teratur dan nonaktifkan apa pun yang tidak lagi diperlukan. Jika plugin memiliki banyak JavaScript, coba gunakan alternatif yang ringan.
• Gunakan hanya apa yang Anda butuhkan: Hindari menginstal beberapa plugin untuk fungsi yang sama. Sebaliknya, pilihlah solusi all-in-one yang meminimalkan kelebihan skrip.
• Batasi skrip eksternal: Hindari menggunakan tema dan plugin yang berisi skrip pihak ketiga yang tidak dibutuhkan, font, atau kode pelacakan.

Dengan menjaga pengaturan WordPress Anda dioptimalkan, Anda akan mengurangi waktu eksekusi JavaScript, mempercepat situs WordPress Anda, dan meningkatkan peringkat SEO dan pengalaman pengguna.

2. Tunda JS dan hapus JS yang tidak digunakan

Anda harus menunda file JS sehingga tidak dapat dimuat sampai interaksi pengguna. Ini berarti bahwa browser tidak akan menjalankan skrip JS apa pun kecuali pengguna mengklik tombol atau menggulir konten halaman.

Sebagian besar plugin optimasi seperti FlyingPress, WP Rocket, Perfmatters, Flying Script, dll, lakukan ini. Namun, masing -masing melakukannya secara berbeda, jadi baca dokumentasi plugin tentang cara menambahkan file (dengan nama file, kata kunci, atau otomatis, seperti halnya WP Rocket).

Misalnya, jika Anda menggunakan plugin WP Rocket, Anda dapat memanfaatkan fitur eksekusi JavaScript penundaan.

Cukup arahkan ke tab Optimasi File dan periksa opsi Eksekusi JavaScript Delay . Plugin akan secara otomatis menunda memuat file JS sampai interaksi pengguna.

Atau, jika Anda menggunakan perfmatters, cukup pergi ke pengaturan plugin perfmatters . Klik pada menu JavaScript , lalu beralih pada penundaan JavaScript di bawah bagian Delay .

Selain itu, Anda harus menghapus file JS yang tidak digunakan. Dengan kata lain, semua skrip JS yang tidak perlu atau tidak muncul dalam konten di atas halaman harus dimuat hanya setelah halaman ditampilkan.

Ini memungkinkan browser untuk hanya membuat materi yang diperlukan daripada macet oleh file JS yang tidak perlu.

3. Tunda JS

Cara efektif lain untuk mengurangi waktu eksekusi JS adalah dengan menunda file JS.

Dengan menunda JavaScript di situs web WordPress Anda, browser hanya akan memuatnya saat halaman diterjemahkan.

Anda dapat menunda file JS baik secara manual maupun dengan bantuan plugin.

Jika Anda ingin menggunakan atribut tundukan secara manual, Anda harus terlebih dahulu mengidentifikasi skrip JS untuk menunda sebelum menambahkan atribut Defer.

Berikut adalah contoh atribut penundaan:

Jika Anda lebih suka menggunakan plugin, Anda dapat memilih dari WP Rocket, Autoptimize, FlyingPress, Asset Cleanup, dll.

Misalnya, seperti Delay JS, WP Rocket juga menawarkan fitur Deferred Load JavaScript.

Di tab Optimasi File , Anda dapat memuat JavaScript yang ditangguhkan dan membatasi file JS tertentu dari ditangguhkan. Hanya dalam beberapa klik, Anda dapat menerapkan teknik optimasi kinerja web yang penting!

4. Minify JS

Salah satu cara termudah namun paling efektif untuk mengurangi waktu eksekusi JavaScript di WordPress adalah minifikasi.

Minifying JavaScript berarti menghilangkan karakter yang tidak perlu - seperti Whitespace, garis istirahat, dan komentar - tanpa mempengaruhi fungsinya. Hasilnya? Ukuran file yang lebih kecil, unduhan yang lebih cepat, dan kecepatan halaman yang lebih baik.

Ada beberapa alat minifikasi JavaScript yang tersedia yang akan membantu Anda menyelesaikan pekerjaan.

Untuk pendekatan bebas repot, gunakan plugin seperti Autoptimize, WP Rocket, Minify Fast Velocity, FlyingPress, dll.

Cukup instal plugin pilihan Anda, aktifkan minifikasi JavaScript, dan biarkan alat melakukan pekerjaan.

5. Bongkar JavaScript di halaman tertentu

Tidak semua skrip perlu dijalankan di setiap halaman situs WordPress Anda. Jika demikian, itu dapat meningkatkan waktu eksekusi, memperlambat kinerja, dan berdampak negatif pada pengalaman pengguna.

Misalnya:

• Hubungi Formulir Formulir Memuat di setiap halaman - bahkan ketika tidak ada formulir.
• Script WooCommerce berjalan di posting blog yang tidak membutuhkannya.
• Script slider muncul di halaman teks-berat yang tidak memiliki slider.

Setiap skrip yang tidak dibutuhkan meningkatkan beban kerja eksekusi JavaScript, memperlambat rendering halaman.

Salah satu solusi termudah untuk masalah ini adalah menonaktifkan skrip yang tidak dibutuhkan pada halaman di mana mereka tidak diperlukan.

Plugin seperti pembersihan aset atau perfmatters memungkinkan Anda untuk menonaktifkan JavaScript per halaman, jenis pos, atau kategori tanpa memodifikasi kode.

Atau, jika Anda merasa nyaman dengan kode, gunakan WP_DEQUEUE_SCRIPT () di file functions.php Anda untuk mencegah skrip yang tidak perlu memuat.

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6. Javascript pihak ketiga menjadi tuan rumah

Font, skrip analitik, dan kode pelacakan adalah beberapa file JavaScript pihak ketiga yang sering dimuat dari sumber eksternal. Sementara skrip ini memberikan fungsionalitas yang bermanfaat, mereka dapat sangat meningkatkan waktu eksekusi JavaScript karena permintaan eksternal yang tertunda, latensi jaringan, dan waktu respons server.

Dengan hosting file javascript pihak ketiga secara lokal, Anda dapat meningkatkan waktu pemuatan, mengurangi ketergantungan pada server eksternal, dan meningkatkan kinerja situs secara keseluruhan.

Untuk meng-host JavaScript pihak ketiga secara lokal, kunjungi situs penyedia pihak ketiga dan unduh file JavaScript yang Anda butuhkan (misalnya, Google Fonts, Recaptcha, atau skrip analitik).

Sekarang, gunakan FTP untuk menyimpan file di /wp-content/unggah/ atau /wp-termasuk/JS/ direktori.

Selanjutnya, memodifikasi fungsi tema Anda.php atau enqueue skrip di wp_enqueue_script () untuk menunjuk ke versi lokal alih -alih URL eksternal.

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

Gunakan plugin seperti WP Rocket atau Autoptimize untuk meminifkan dan menyimpan file JavaScript yang di -host secara lokal untuk eksekusi yang lebih cepat.

Mulailah mengurangi waktu eksekusi JS hari ini

Situs WordPress yang lambat dapat menggagalkan pengunjung dan melukai peringkat SEO Anda. Salah satu penyebab utama? Waktu eksekusi JavaScript yang berlebihan. Ketika JavaScript membutuhkan waktu terlalu lama untuk diproses, itu memblokir utas utama, menunda rendering, meningkatkan penundaan input pertama (FID), dan berdampak negatif terhadap kinerja.

Panduan ini akan menunjukkan kepada Anda cara mudah untuk mengurangi waktu eksekusi JavaScript di WordPress, memungkinkan Anda untuk meningkatkan kecepatan situs dan pengalaman pengguna. Strategi utama meliputi:

• Menghindari tema dan plugin yang membengkak untuk mencegah eksekusi kode yang tidak perlu.
• Tunda dan hapus JavaScript yang tidak dibutuhkan untuk menjaga skrip yang tidak penting dari memperlambat halaman Anda.
• Tunda eksekusi JavaScript untuk memungkinkan browser memprioritaskan konten kritis terlebih dahulu.
• Meminifkan file JavaScript untuk mengurangi ukuran file dan mempercepat eksekusi.
• Membongkar JavaScript yang tidak digunakan dari halaman tertentu untuk menghilangkan skrip yang tidak perlu.
• Host Javascript pihak ketiga secara lokal untuk menghilangkan penundaan yang disebabkan oleh permintaan server eksternal.

Dengan mengimplementasikan teknik optimisasi javascript ini, Anda akan mencapai vital web inti yang lebih baik, kecepatan halaman tinggi, dan pengalaman pengguna yang mulus untuk pengunjung Anda.

Untuk lebih lanjut, lihat sumber daya bermanfaat lainnya ini:

• 10 Plugin Cache WordPress Terbaik (Opsi Gratis & Premium)
• Cara dengan mudah memperbaiki caching browser leverage di wordpress
• WP Rocket Review: Apakah itu benar -benar layak dibayar?
• Apakah perfmatters sepadan? Ulasan mendalam
• Nitropack Review: alat kecepatan terbaik atau seo topi hitam?

Terakhir, ikuti kami di Facebook dan X (sebelumnya Twitter) untuk tetap diperbarui pada WordPress terbaru dan artikel terkait blogging.