Mengatasi Render Blocking CSS dan Javascript - Setelah saya mencoba mengecek kecepatan blog saya di PageSpeed Insights. Ternyata terdapat beberapa masalah di blog saya yang membuat loading blog saya agak lamban. Yaitu adanya render blocking pada javascript. Sebelumnya, saya tidak tau apa itu render blocking.
Render Blocking artinya pemuatan. Jadi, jika javascript membuat blocking, itu berarti javacript-nya menahan halaman dari loading. Google sendiri menganjurkan untuk menghapus javascript yang dapat mengganggu dalam pemuatan konten halaman web anda. Secara khusus, jika Google melihat bahwa halaman web anda tidak memuat baik untuk perangkat tertentu, misalnya iPad, mereka tidak akan menyertakan web anda dalam hasil karena Google tidak ingin mengirim si penggguna untuk memperlambat halaman atau halaman menyebabkan pengguna menunggu cukup lama untuk konten tersebut. Dan ini biasanya disebabkan oleh render blocking itu sendiri.
Tapi, seringkali ini diabaikan oleh banyak orang. Padahal, jika kita mengetahui makna masalahnya, pasti masalah tersebut bukan masalah sepele.
Dan penyebab render blocking pada javascript ini biasanya berasal dari jQuery yang merupakan file javacript yang digunakan oeh sebagian besar halaman web. File javascript ini memang lumayan besar, bakan ini mungkin menjadi file terbesar dalam halaman web anda saat sedang loading memuat halaman anda, di mana harus didownload dulu oleh browser.
Baik, untuk cara mengatasinya, silahkan tambahkan atribut async='async' pada jQuery-nya. Misal, pada mulanya jQuery-nya seperti ini.
Setelah ditambahkan atribut async, akan menjadi seperti ini.
Atribut tersebut lumayan untuk memperingan beban blog anda dan render blocking dari jQuery ini juga bisa teratasi. Tapi, perlu diingat. Mungkin setelah menambahkan atribut async pada jQuey-nya, ada beberapa javascript yang berada di atas </head> tidak bekerja dengan baik. Maka dari itu, pindahkan javascript tersebut di atas </body>.
Sekarang, kita beranjak ke masalah render blocking pada CSS. Ini biasanya terdapat CSS yang tidak terbuka atau berbentuk eksternal. Seperti misalnya,
CSS tersebut belum terbuka. Masih tersimpan di dalam link. Ini bisa saja menyebabkan render blocking pada CSS-nya. Solusinya, silahkan masukkan CSS yang ada di dalam link CSS tersebut. Copy linknya yang berawalan http tersebut dan taruh di address bar. Anda akan menemukan CSS yang tersimpan dalam link tersebut. Dan letakkan CSS di atas ]]></b:skin>.
Contoh kedua, yaitu pada link Google Font. Misal seperti ini.
Dan penyebab render blocking pada javascript ini biasanya berasal dari jQuery yang merupakan file javacript yang digunakan oeh sebagian besar halaman web. File javascript ini memang lumayan besar, bakan ini mungkin menjadi file terbesar dalam halaman web anda saat sedang loading memuat halaman anda, di mana harus didownload dulu oleh browser.
Baik, untuk cara mengatasinya, silahkan tambahkan atribut async='async' pada jQuery-nya. Misal, pada mulanya jQuery-nya seperti ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Setelah ditambahkan atribut async, akan menjadi seperti ini.
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Atribut tersebut lumayan untuk memperingan beban blog anda dan render blocking dari jQuery ini juga bisa teratasi. Tapi, perlu diingat. Mungkin setelah menambahkan atribut async pada jQuey-nya, ada beberapa javascript yang berada di atas </head> tidak bekerja dengan baik. Maka dari itu, pindahkan javascript tersebut di atas </body>.
Sekarang, kita beranjak ke masalah render blocking pada CSS. Ini biasanya terdapat CSS yang tidak terbuka atau berbentuk eksternal. Seperti misalnya,
<link href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>CSS tersebut belum terbuka. Masih tersimpan di dalam link. Ini bisa saja menyebabkan render blocking pada CSS-nya. Solusinya, silahkan masukkan CSS yang ada di dalam link CSS tersebut. Copy linknya yang berawalan http tersebut dan taruh di address bar. Anda akan menemukan CSS yang tersimpan dalam link tersebut. Dan letakkan CSS di atas ]]></b:skin>.
Contoh kedua, yaitu pada link Google Font. Misal seperti ini.
<link href='http://fonts.googleapis.com/css?family=Tahoma' rel='stylesheet' type='text/css'/>
Link di atas bisa menyebabkan render blocking. Maka dari itu, silahkan inline-kan CSS di dalamnya dan taruh pada CSS yang ada di Edit HTML. Sama dengan yang sebelumnya, silahkan copy linknya dan taruh di address bar, lalu enter. Silahkan copy CSS nya dan taruh di bagian atas sendiri dari CSS yang lain. Ditaruh di atas karena ini merupakan link Google Font, agar browser bisa cepat dan langsung mengetahui font yang digunakan dalam blog kita. Misalnya seperti ini.
Blogger Template Style
Name : ..........
Author : ..........
Url : ..........
----------------------------------------------- */
@font-face {
font-family: 'Tahoma';
font-style: normal;
font-weight: 400;
src: local('Tahoma'), url(http://themes.googleusercontent.com/licensed/font?kit=SR1FNt_uUWzf7Ux9q0xdEg) format('woff');
}
....................
....................
CSS-CSS yang lain
....................
....................
]]></b:skin>
Sebenarnya, tidak hanya itu saja yang menjadi masalah render blocking pada CSS. Tapi, minimal itu sedikit contoh dari saya. Jika anda ingin mengetahuinya lebih jauh, silahkan cek kecepatan loading blog anda di PageSpeed Insights. Anda akan tau apa saja masalah yang terdapat dalam blog anda, yang menyebabkan kecepatan blog anda tidak maksimal. Perlu kita ketahui, CSS atau javascript yang disimpan di Google Drive pun juga memungkinkan adanya render blocking. Untuk itu, silahkan cek sendiri di sana. Dan untuk blog ini pun, juga masih ada beberapa masalah di sana.
Sekian. Semoga bermanfa'at.
Sekian. Semoga bermanfa'at.
Referensi : http://www.kompiajaib.com/2014/02/mengatasi-render-blocking-javascript.html
