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.
