Cara Hilangkan Render JS/Javascrip (Defer JS WordPress)

Menerapkan perubahan Render JS ini dapat berdampak positif pada waktu muat halaman web Anda, terutama untuk pengunjung seluler. Tetapi peringatannya bisa agak sulit untuk dipahami, itulah sebabnya kami akan menjelaskan dengan tepat apa artinya menunda penguraian JavaScript – Hilangkan resource (JS) yang memblokir render? dan bagaimana Anda dapat menerapkan perubahan ini di situs WordPress Anda.

Inilah yang akan Anda pelajari di artikel ini:

Apa Artinya Menunda Parsing JavaScript (Defer/Render JS) di WordPress?

Jika Anda pernah menjalankan tes website WordPress melalui Google PageSpeed ​​Insights , GTmetrix, atau alat pengujian kecepatan halaman lainnya, Anda mungkin menemukan saran untuk menunda penguraian JavaScript.

Tapi apa maksud yang sebenarnya? Dan mengapa ini menjadi pertimbangan kinerja yang penting?

Pada dasarnya, ketika seseorang mengunjungi situs WordPress Anda, server situs Anda mengirimkan konten HTML situs web Anda ke browser pengunjung tersebut.

Browser pengunjung kemudian mulai dari atas dan menelusuri kode untuk merender situs Anda. Jika, saat berpindah dari atas ke bawah, ia menemukan JavaScript apa pun, ia akan berhenti merender sisa halaman hingga dapat mengambil dan mengurai file JavaScript.

Ini akan melakukan ini untuk setiap skrip yang ditemukan, yang dapat berdampak negatif pada waktu muat halaman situs Anda karena pengunjung perlu menatap layar kosong saat browser mereka mengunduh dan mengurai semua JavaScript.

Jika skrip tertentu tidak diperlukan untuk fungsi inti situs web (setidaknya pada pemuatan halaman awal), Anda tidak ingin skrip tersebut menghalangi pemuatan bagian yang lebih penting dari situs, itulah sebabnya alat tes kecepatan web selalu meminta Anda untuk menunda penguraian JavaScript.

Jadi, apa artinya menunda penguraian JavaScript?

Pada dasarnya, situs Anda akan memberitahu browser pengunjung menunggu untuk men-download dan / atau parse JavaScript sampai setelah konten utama situs Anda memiliki pemuatan sudah selesai. Pada saat itu, pengunjung sudah dapat melihat dan berinteraksi dengan halaman Anda, sehingga waktu tunggu untuk mendownload dan mengurai JavaScript tidak lagi berdampak negatif seperti itu.

Dengan mempercepat waktu pemuatan paruh atas konten Anda, Anda membuat Google senang dan menciptakan pengalaman yang lebih baik dan lebih cepat bagi pengunjung Anda.

Bagaimana Cara Menunda Parsing JavaScript (Render JS) di WordPress?

Bagian ini akan menunjukkan kepada Anda panduan langkah demi langkah untuk menunda penguraian JavaScript. Sebagai pelengkap, kami juga akan menunjukkan kepada Anda cara menganalisis masalah dan menguji perubahannya setelah menerapkan tugas.

1. Analisa website (situs web)

Untuk mengetahui apakah Anda harus menunda penguraian JavaScript di situs WordPress Anda, analisis menggunakan alat pengujian kecepatan situs seperti GTMetrix . Sebagai contoh berikut adalah hasil performa sebuah website sebelum menerapkan metode tersebut:

Render JS (Javascript)

Ini menunjukkan bahwa ada masalah terkait penguraian JavaScript, yang berarti situs situs web perlu menundanya. Tapi di website Bantuan Hosting tidak ada yang perlu dirender sejak awal heee..

2. Tunda Parsing JavaScript (Render JS) di WordPress

Sekarang, mari masuk ke langkah-langkah menunda penguraian JavaScript! Ada dua cara untuk melakukan render JS, yaitu menginstal plugin atau menambahkan cuplikan kode secara manual.

Menggunakan plugin WordPress

Salah satu cara termudah untuk menunda penguraian JavaScript adalah dengan menggunakan plugin. Speed ​​Booster Pack adalah salah satu plugin paling populer untuk tugas ini. Untuk memulai, instal dan aktifkan, lalu ikuti langkah-langkah berikut:

  1. Buka Dasbor WordPress Anda
  2. Di sidebar kiri, navigasikan ke Speed ​​Booster
  3. Klik tab Advanced , dan aktifkan Defer parsing of JS files
  4. Setelah selesai, ketuk Simpan Perubahan

Defer/Render JS WordPress Secara Manual melalui Function.php

Atau, Anda dapat melakukan defer JS secara manual dengan mengedit salah satu file inti WordPress. Pastikan untuk membuat cadangan situs web Anda sebelum melanjutkan. Berikut langkah-langkahnya:

  1. Dari area admin WordPress Anda, buka Appearance -> Theme Editor
  2. Pilih functions.php di File Tema
  3. Masukkan kode di bawah :
function defer_parsing_of_js ( $ url ) {
if ( FALSE === strpos ( $ url, ‘.js’ ) ) return $ url;
if ( strpos ( $ url, ‘jquery.js’ ) ) return $ url;
mengembalikan “$ url ‘defer” ;
}
add_filter ( ‘clean_url’ , ‘defer_parsing_of_js’ , 11 , 1 ) ; 

4. Klik Perbarui File .

Penjelasan:

if ( FALSE === strpos ( $ url, ‘.js’ ) ) return $ url; adalah untuk mencari url yang diakhiri dengan dot JS [.js]
if ( strpos ( $ url, ‘jquery.js’ ) ) return $ url; adalah untuk mengcualikan urls yang diakhiri dengan jquery.js – ini berfungsi untuk menghindari error, karena jquery.js adalah file inti dari wordpress yang sangat dibutuhkan.

jadi jika situs jadi error setelah menggunakan kode diatas itu mungkin karena ada JS/Javascript dari web yang penting selain jquery.js misalnya main.js, so cukup keculaikan js tersebut dengan menambahkan code seperti jquery
contoh: if ( strpos ( $ url, ‘main.js’ ) ) return $ url;

3. Uji Perubahan

Setelah menggunakan salah satu opsi di atas, analisis ulang situs Anda di GTMetrix:

Render JS (Javascript)

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari cara meningkatkan kinerja situs Anda dengan menunda penguraian JavaScript (Defer/Render JS). Anda dapat melakukannya dengan menggunakan plugin atau menambahkan cuplikan kode ke file functions.php tema.

Ingatlah bahwa meningkatkan waktu pemuatan situs web Anda akan menghasilkan pengalaman pengguna yang lebih baik dan peringkat SEO yang lebih baik.

Apakah Anda memiliki pertanyaan tentang topik ini? Bagikan pemikiran Anda di bagian komentar di bawah!

Diterbitkan pada 30, September 2020

Reader Interactions

Silahkan Berikan Komentar