Cara Mengatasi Render Blocking CSS dan Jquery - Oke kali ini saya akan membagi tips cara membuka blokir CSS dan Jquery yang dapat penundaan halaman anda pada saat rendering. Oke mungkin banyak dari para blogger saat mengecek kecepatan website di PageSpeed Insights performa web merah atau dibawah 50% sehingga butuh pengoptimalan. pengoptimalan pada CSS dan Jquery yang memblokir perenderan bisa kita lakukan dengan memasukan kode css external ke line internal dan untuk JavaScript atau kode jquery bisa kita tambahkan kode sync, jika file CSS anda sedikit lebih baik dibuat inline atau dibuat satu halaman tanpa include file begitu juga dengan kode javascript.

Pengoptimalan pada CSS

Optimalkan pengiriman CSS, saran dari PageSpeed Insight seperti ini muncul karena ada CSS eksternal yang memblokir perenderan. Saran saya kalau memang file CSS nya sedikit, lebih baik sobat jadikan inline. Jika di template sobat terdapat CSS eksterna. Contohnya, untuk fonts googleapis linknya mirip seperti ini.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' 
rel='stylesheet' type='text/css'/>

Silahkan tambahkan script berikut kedalam template sobat. Berikut ini contoh penggunaan scriptnya, script berikut saya contohkan untuk Font Awesome 3.2.0.

<script type='text/javascript'>
//
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]>script>

Pengoptimalan pada Jquery/Javascript 

Untuk mengatasi render blocking JavaScript dan CSS ini bisa menambahkan atribut HTML async='async' pada JavaScriptnya. Tapi atribut async='async' hanya berfungsi pada Script eksternal atau script yang ada atribut src=''. Berikut ini contoh penerapan menggunakan atribut asynchronous.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Atau bisa menggunakan script berikut untuk JS eksternal, silahkan pilih salah satu. Perbedaan dari kedua script dibawah adalah, script pertama akan mengambil script ekternal setelah semua laman dimuat, sedangkan script kedua, script eksternal dimuat secara bersamaan dengan laman. 

<script type='text/javascript'> //
function parPudi() {
var element = document.createElement("script");                      
element.src = "http://DISINI_URL_SCRIPT_EKSTERNAL.js;
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", parPudi, false);
 else if (window.attachEvent)
 window.attachEvent("onload", parPudi);
 else window.onload = parPudi;
//]]>

Atau anda bisa gunakan script ini. script ini dimuat secara bersamaan dengan laman.

<script type='text/javascript'>
//
var cb=function(){var e=document.createElement('script');e.src='DISINI_URL_SCRIPT_EKSTERNAL.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>

oh iyah, perlu anda ketahui jika anda menggukanakan  atribut asynchronous lebih baik di cek dulu blog atau websitenya apakah bekerja, karena dengan menambahkan atribut asynchronous kemungkina ada kode javascript yang tidak bekerja. kalau tidak bekerja lebih baik pakai kode di atas.

Oke terimakasih sekian tutorial kali ini semoga berhasil.