Cara mengatasi render blocking JavaScript Jquery dan CSS

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'/>

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>, karena ini juga merupakan salah satu penilaian dan saran dari PageSpeed Insights (Prioritaskan konten PA).

Sekarang masalah CSS yang memblokir render, saran dari PageSpeed Insight seperti ini muncul karena sobat menggunakan CSS eksternal atau CSS yang bukan inline sehingga memblokir perenderan, seperti fonts googleapis atau bootstrap font awe some. Saran saya kalau memang file CSS nya sedikit, lebih baik sobat jadikan inline. Jika di template sobat terdapat CSS eksternal coba sobat buka dan lihat apakah file nya sedikit atau banyak, untuk cara membuka file CSS ekternal sobat cukup copy URL CSS nya kemudian paste pada browser sobat dan tekan Enter. Contohnya, untuk fonts googleapis link nya mirip seperti ini.

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

Kalo filenya tidak banyak copy paste aja ke template sobat, masukkan didalam tag < style> selain menghilangkan render blocking, cara ini juga sudah 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. Tenang dulu sob jangan panik, sobat bisa mengatasinya dengan menambahkan script ke dalam template sobat. Berikut ini contoh penggunaan scriptnya untuk CSS Bootstrap cdn.

<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>

Silahkan sobat ganti URLnya dengan URL CSS sobat. Semoga dengan tips yang singkat ini dapat membantu mengatasi masalah Render Blocking pada blog/web sobat. Semoga membantu.