Cara Hilangkan Render JSJavascrip (Defer JS WordPress)

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.

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

Jika Anda pernah menjalankan tes website WordPress melaluiGoogle 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 mengunjungisitus WordPressAnda, 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 sebabnyaalat tes kecepatan webselalu 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 sampaisetelahkonten 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 menggunakanalat pengujian kecepatan situssepertiGTMetrix. Sebagai contoh berikut adalah hasil performa sebuah website sebelum menerapkan metode tersebut:

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 Packadalah salah satu plugin paling populer untuk tugas ini. Untuk memulai,instaldan aktifkan, lalu ikuti langkah-langkah berikut:

1. Buka Dasbor WordPress Anda
2. Di sidebar kiri, navigasikan keSpeed ​​Booster
3. Klik tabAdvanced, dan aktifkanDefer parsing of JS files
4. Setelah selesai, ketukSimpan 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, bukaAppearance -> Theme Editor
2. Pilihfunctions.phpdiFile 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. KlikPerbarui 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:

Kesimpulan
Dalam tutorial ini, Anda telah mempelajari cara meningkatkan kinerja situs Anda dengan menunda penguraian JavaScript (Defer/Render JS). Anda dapat melakukannya dengan menggunakanpluginatau menambahkan cuplikan kode ke filefunctions.phptema.

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

About admin

Check Also

Pengetahuan Dasar Apa Itu WordPress dan 11 Fiturnya

Pengetahuan Dasar Apa Itu WordPress dan 11 Fiturnya

Pengetahuan Dasar Apa Itu WordPress dan 11 Fiturnya – Apa itu WordPress? WordPress merupakan salah satu …

Cara Daftar akun WordPress Gratis langkah demi langkah

Cara Daftar akun WordPress Gratis langkah demi langkah

Cara Daftar akun WordPress Gratis – Setelah mengetahui dan lebih mengenal apa itu wordpress dan …

Tutorial Cara upload file dari cpanel menggunakan file manager

Tutorial Cara upload file dari cpanel menggunakan file manager Anda dapat langsung mengupload file dari …