Mengatasi Render-Blocking Javascript - Mempercepat Loading Blog
December 6, 2015
Cara Mengatasi Render-Blocking Javascript - Javascript Memblokir Render untuk Mempercepat Loading Blog.
PESAN error Render-Blocking Javascript atau Javascript Memblokir Render biasa kita temukan saat ngetes kecepatan blog di Page-Speed Insight Google.
Render-Blocking Javascript atau Javascript Memblokir Render itu artinya butuh waktu untuk mengambil kode JS sehingga mempengaruhi tampilan blog.
Menurut panduan Google, kita harus menghapus Render-Blocking Javascript itu agar tampilan blog lebih kenceng (fast loading).
1. Menambahkan kode asynchronous
Tambahkan kode asyinc='async'
MENJADI
Namun, asynchronous pada jquery library ini tidak baik karena akan mengganggu element blog yang menggunakan jquery.
Jika ada element yang tidak berfungsi, coba pindahkan kode JS tersebut tepat di atas kode </body> yang ada di bagian bawah kode-kode template blog.
2. Memasukkan link ke dalam kode script
<script type='text/javascript'>
PESAN error Render-Blocking Javascript atau Javascript Memblokir Render biasa kita temukan saat ngetes kecepatan blog di Page-Speed Insight Google.
Render-Blocking Javascript atau Javascript Memblokir Render itu artinya butuh waktu untuk mengambil kode JS sehingga mempengaruhi tampilan blog.
Menurut panduan Google, kita harus menghapus Render-Blocking Javascript itu agar tampilan blog lebih kenceng (fast loading).
2 Cara Mengatasi Render-Blocking Javascript
Sudah banyak blogger yang berbagi tips mengatasinya. Namun, intinya ada dua cara, sebagaimana bisa dicek di SERP Google tentang Mengatasi Render-Blocking Javascript ini.1. Menambahkan kode asynchronous
Tambahkan kode asyinc='async'
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
MENJADI
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Namun, asynchronous pada jquery library ini tidak baik karena akan mengganggu element blog yang menggunakan jquery.
Jika ada element yang tidak berfungsi, coba pindahkan kode JS tersebut tepat di atas kode </body> yang ada di bagian bawah kode-kode template blog.
2. Memasukkan link ke dalam kode script
<script type='text/javascript'>
//<![CDATA[ var cb=function(){var e=document.createElement('script');e.src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'; var t=document.getElementsByTagName('body')[0]; t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb); //]]>
</script>
Namun, sama seperti kode asyncon, memindahkan link JS kedalam kode tersebut juga tidak ada jaminan berhasi. Coba saja, semoga sukses.
Cara lain bisa dicek di blog Exeideas.
KESIMPULAN
Untuk saat ini belum ada solusi yang terbaik untuk mengatasi render-blocking js dari jquery ini. Jadi, biarkan saja Javascript Memblokir Render itu apa adanya.
Baca Juga: Cara Mengatasi Render Block JavasScript
Happy Blogging! (www.contohblog.com).*
Namun, sama seperti kode asyncon, memindahkan link JS kedalam kode tersebut juga tidak ada jaminan berhasi. Coba saja, semoga sukses.
Cara lain bisa dicek di blog Exeideas.
KESIMPULAN
Untuk saat ini belum ada solusi yang terbaik untuk mengatasi render-blocking js dari jquery ini. Jadi, biarkan saja Javascript Memblokir Render itu apa adanya.
Baca Juga: Cara Mengatasi Render Block JavasScript
Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Bisa pak, 100% bisa mengatasi rendering blocking javascript.
ReplyDeletemaksud nya bisa dengan cara mengikuti artikel diatas ?
Delete