Mengatasi Render Blocking JavaScript Jquery dan CSS

Mengikuti saran PageSpeed Insights Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Jika anda menggunakan tools analisis Google PageSpeed Insights, disitu anda akan diberikan beberapa saran untuk memperbaiki kesalahan yang dideteksi oleh PageSpeed Insights. Kali ini saya mau berbagi untuk satu poin saran Google PageSpeed Insights, yaitu Render Blocking JavaScript dan CSS. Untuk mengatasi render blocking JavaScript dan CSS ini anda bisa menambahkan atribut HTML async='async' pada JavaScriptnya, dan untuk CSS nya menggunakan script yang nanti akan saya share dibagian akhir dari artikel ini. Tapi atribut async='async' hanya berfungsi pada Script eksternal atau script yang ada atribut src=''. Berikut ini contoh penerapan menggunakan atribut asynchronous.

Sebelum menambahkan atribut async='async'

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

Setelah menambahkan atribut async='async'

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

Atau anda bisa menggunakan script berikut untuk JS eksternal, silahkan pilih salah satu. Script ini sudah terbukti berhasil, karena script ini dipake buat blog ini. Perbedaan dari kedua script ini 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'> //<![CDATA[
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;
//]]></script>

<script type='text/javascript'>
//<![CDATA[
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>

Perlu anda ketahui, jika sesudah menambahkan atribut asynchronous pada jquery, mungkin ada javascript yang tidak bekerja, untuk memastikan apakah semua berjalan normal setelah menambahkan atribut async ke jquery, coba anda preview dulu. Jika ternyata ada script yang tidak bekerja seperti sebelumnya, anda mungkin bisa mencoba tips berikut. anda cukup memindahkan script jquery nya ke atas tag < b:skin> atau < style>, jika sebelumnya jquery anda tempatkan di atas < /head> atau didalam tag < body>, sekarang coba anda pindahkan ke atas < b:skin> dan untuk javascript yang lain sebisa mungkin anda tempatkan di atas tag penutup < /body>.

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 anda jadikan inline. Jika di template anda terdapat CSS eksternal, coba anda buka dengan menyalin link css eksternal tersebut ke browser kemudian enter. 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'/>

Kalau filenya tidak banyak copy paste aja ke template anda, gabungkan kedalam tag style atau b:skin, karena selain menghilangkan render blocking, cara ini juga mengurangi HTTP Request. Namun jika file CSS nya banyak dan bisa membuat template anda jadi gemuk, lebih baik biarkan tetap eksternal saja. Dan bagaimana mengatasi render blocking CSS.? yang filenya banyak. Silahkan tambahkan script berikut kedalam template anda. Berikut ini contoh penggunaan scriptnya, script berikut saya contohkan untuk Font Awesome 3.2.0.

<script type='text/javascript'>
//<![CDATA[
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>

anda tinggal menyesuaikan URLnya "//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" dengan URL CSS anda.