Cara Mengatasi Link JavaScript External Render-Blocking untuk Loading Blog

Ikuti saran PageSpeed Insights Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Jika sobat menggunakan tools analisis Google PageSpeed Insights, disitu sobat 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 sobat 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 sobat 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 sobat 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 sobat preview dulu. Jika ternyata ada script yang tidak bekerja seperti sebelumnya, sobat mungkin bisa mencoba tips berikut. Sobat cukup memindahkan script jquery nya ke atas tag < b:skin> atau < style>, jika sebelumnya jquery sobat tempatkan di atas < /head> atau didalam tag < body>, sekarang coba sobat pindahkan ke atas < b:skin> dan untuk javascript yang lain sebisa mungkin sobat 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 sobat jadikan inline. Jika di template sobat terdapat CSS eksternal, coba sobat 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 sobat, 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 sobat jadi gemuk, lebih baik biarkan tetap eksternal saja. Dan bagaimana mengatasi render blocking CSS.? yang filenya banyak. 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'>
//<![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);
//]]>

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