Apakah Anda baru saja mengetes kecepatan website Anda di GTMetrix dan menemukan masalah defer parsing of JavaScript? Jika iya, tak usah khawatir, karena artikel ini akan menjelaskan beberapa cara untuk mengatasi masalah defer parsing of JavaScript.
Tapi.. Sebetulnya apa sih defer parsing of JavaScript? Dan kenapa website Anda bisa jadi lebih cepat jika mampu mengatasi masalah ini? Yuk kita bahas selengkapnya!
Apa itu Defer Parsing of JavaScript?
Defer parsing JavaScript adalah proses di mana website Anda diload secara sempurna tanpa perlu menunggu sampai loading JavaScript selesai. Sehingga, loading websitenya akan jadi lebih cepat.
Hal ini penting, kode JavaScript biasanya diletakkan di antara tag <head></head> sebuah website. Jadi, ketika diakses, websitenya perlu memuat kode tersebut dari atas sampai bawah.
Jika website Anda memiliki banyak JavaScript atau string yang cukup panjang. Proses loadingnya tentu akan memakan banyak waktu sebelum konten website dapat ditampilkan, karena harus menunggu semua kode JavaScript dimuat.
Baca juga: Cara Membuat JavaScript di HTML Sederhana
Itulah mengapa defer parsing of JavaScript menjadi salah satu solusi yang tepat untuk meningkatkan kecepatan loading website Anda.
Nah, untuk mengetahui apakah website Anda sudah menggunakan defer parsing of JavaScript atau belum, Anda bisa menggunakan alat seperti GTMetrix. Jika Anda menemukan notifikasi ini:
Tandanya website Anda perlu menerapkan solusi yang akan kami jelaskan di bawah ini.
Cara Mengatasi Defer Parsing of JavaScript pada Website WordPress
Ada beberapa opsi yang bisa Anda pilih untuk melakukan defer parsing JavaScript pada WordPress. Tapi, sebelum itu pastikan Anda sudah melakukan backup website terlebih dahulu
Cara Mengatasi Defer Parsing of JavaScript Menggunakan Plugin WordPress
Salah satu cara mudah dan cepat untuk defer parsing JavaScript pada WordPress adalah dengan menggunakan plugin Speed Booster Pack, suatu plugin yang menyediakan beberapa teknik optimasi pada WordPress.
- Lakukan instalasi pluginnya terlebih dahulu, kemudian aktifkan.
- Klik menu Settings pada plugin tersebut.
- Centang bagian Defer parsing of javascript files dan klik Save Changes.
Oh ya, jika Anda belum mengetahui cara menginstal plugin WordPress, Anda dapat mengikuti panduan berikut ini.
Cara Mengaktifkan Defer Parsing JavaScript Melalui functions.php
Untuk melakukan defer parsing JavaScript, silakan copy code di bawah ini dan letakkan pada baris di bawah script dalam file wp-includes/functions.php.
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Baca juga: 21 Cara Mempercepat Loading Website WordPress Anda
Yuk Tingkatkan Kecepatan Loading Website Anda dengan Defer Parsing of JavaScript!
Melalui tutorial singkat ini Anda telah mengetahui cara mempercepat loading WordPress melalui defer parsing JavaScript. Semakin cepat dan mudah website diakses, semakin besar pula kemungkinan traffic Anda meningkat karena pengunjung dapat mengakses informasi di website Anda lebih nyaman.
Jika Anda ingin tahu berbagai cara lain untuk meningkatkan kecepatan loading website WordPress, Anda bisa download ebook gratis kami yang membahas tentang 20+ Tips Membuat WordPress Super Cepat!
Tertarik? Yuk klik tombol di bawah untuk download ebooknya:
Ini yang saya cari min, untuk blogger pemula, atau yang belum ngerti masalah HTML, CSS dll, pasti ini sangat membingungkan sekali. Berharap blognya bisa diakses dengan cepat, eh pas di tes di Page Speed Insight nya google ternyata nilainya kurang dari 50, dan melihat keterangan kesalahan, hanya bisa ngelus dada, apa daya kemampuan untuk memperbaiki tidak mumpuni.
itu klo wordpress gan, klo misalnya custom web? yang tidak ada mengunakan sistem plugin? gmn caranya gan?
Dapat dengan cara menambahkan script berikut sebelum tag </body>, silakan ganti code "defer1.js", "defer2.js", "defer3.js" dengan nama file javascript website Anda.
Pastikan juga Anda sudah melakukan backup website untuk mengantisipasi website error. 🙂
<script type="text/javascript">
function parseJSAtOnload() {
var links = ["defer1.js", "defer2.js", "defer3.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>
Kadang mengunakan 'Defer" untuk file javascript dapat merusak fungsi javascript it sendiri, sebagai contoh javascript yang digunakan untuk membuat floating navigasi bar, ketika menggunakan defer pada javascript it, maka floating nav barnya tidak akan bekerja lagi.
Klo menurut ane sih, mending di compress dan di combine ke 1 javascript file z, itu sudah memboost page speed web kamu.
Halo,
Terimakasih masukkannya, hal tersebut memang benar, akan terdapat beberapa fungsi pada website yang tidak berjalan dengan baik.
Sangat membantu, segera dipraktikan..
Thanks
saya coba di web saya untuk langkah pertama menggunakan plugin terjadi error pada slider homepage menjadi hilang, untuk langkah kedua saya pasang kode tersebut pada script paling bawah pada wp-include/function.php tidak ada efek sama sekali itu gimana ya min?
Menggunakan cara ini memang akan berpengaruh pada fitur yang menggunakan JavaScript menjadi tidak berfungsi dengan baik
Telah saya coba tapi hasil nya belum bisa 100% hanya sampai Grade 51%
saya sudah coba cara di atas dengan menerapan
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
tapi tidak berhasil ya
masih tetap,kira kira apa yang salah ?
Mas, pasang script di funtion.php nya setelah apa ya? atau bebas pasang di mana aja. Trims mas. salam sukses.
Bebas, bisa dimasukkan di paling bawah juga.