Memahami Terlebih dahulu Remove Render Blocking Javascript blogger
Jika anda meletakkan javascript eksternal di dalam elemen html template blogger anda, maka bisa di pastikan anda telah melanggar minimal 1 rules dari google speed insights yaitu remove render blocking javascript. Hal ini lah yang menyebabkan loading blog anda akan bertambah lola, lemot,lama. Kenapa bisa begini ?. Karena sebelum browser menampilkan suatu halaman kepada visitor yang mengunjungi halaman blog, terlebih dahulu browser akan membaca seluruh dokumen dalam html template halaman tersebut. Jika html template tersebut mempunyai script eksternal di dalam nya, maka browser akan berhenti load sejenak untuk membaca sumber atau source dari javascript eksternal, setelah terbaca semua, barulah browser load lagi dokumen html yang tadi sempat terhenti. Jika terlalu banyak banyak script eksternal dalam html template blog, maka akan semakin sering browser berhenti sejenak untuk membaca source dari script eksternal “ ini lho yang menyebabkan loading template Sobat jadi lama“. Hal seperti ini akan terulang lagi jika pengunjung blog melihat halaman yang lain dari blog tersebut.
Hal lainnya yang tidak bisa di pisahkan untuk meningkatkan kecepatan loading suatu blog adalah dengan mengoptimalkan pengiriman CSS di html template blogger.
>>> Cara Remove render Blocking Javascript.
Setidaknya ada dua cara yang saya pahami untuk menghapus penghambat javascript eksternal saat browser load html template blogger ini. Dan untuk selanjutnya akan saya jelaskan satu persatu tentang 2 cara ini untuk diterapkan di blogger. Berikut ini 2 cara remove render blocking javascript blogger:
1. Inline Small Javascript.
2. Defer loading of Javascript.
1. Inline Small Javascript.
Inline small Javascript yang dimaksud di sini adalah membuat javascript eksternal di html template blog menjadi javascript internal. Untuk lebih memudahkan anda memahami tentang cara inline small javascript di blogger ini, setidaknya ada 3 sub bagian yang telah saya buat.
>>> Bentuk Javascript eksternal itu seperti apa.
>>> Bagaimana cara melihat sumber atau source javascript eksternal.
>>> Bagaimana cara membuat javascript eksternal menjadi internal.
>>> Bentuk Javascript Eksternal dalam HTML Template Blogger.
Untuk bisa membuat javascript eksternal menjadi internal di html template blog kita, terlebih dahulu kita harus mengenali bagaimana bentuk javascript eksternal tersebut. Javascript eksternal yang paling sering saya jumpai di blogger terletak di antara kode <head> dan </head> tapi tidak menutup kemungkinan javascript juga di letakkan di antara <body> dan </body>.Bentuk javascript eksternal nya adalah seperti di bawah ini ( lihat kode script "<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/> " ):
>>> Cara melihat sumber atau source dari javascript eksternal.
Setelah anda mengetahui bentuk javascript eksternal di html template blog anda sendiri. Sekarang saat nya anda lihat sumber dari javascript eksternal tersebut.
1. Buka HTML Template Bloggeranda.
2. Copy url (setiap url javascript eksternal di akhiri dengan .js) yang ada di src='Copy url ini'
3. Silahkan buka tab baru di browser anda dan pastekan url .js tadi kemudian klik enter.
4. Seharusnya saat ini anda akan melihat sederetan kode script dalam tab baru tersebut.
Sebagai contoh jika saya ingin mengetahui source dari javascript eksternal <script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>, maka saya akan copy url javascript eksternal tersebut yaitu https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.jsdan paste kedalam tab baru browser. Hasilnya deretan kode yang terlihat adalah seperti di bawah ini:
Catatan Penting:
Anda harus parse html jika di dalam sumber javascript eksternal terdapat karakter ini: <, ", &, ', >
Anda harus parse html jika di dalam sumber javascript eksternal terdapat karakter ini: <, ", &, ', >
5. Selesai dan anda pun telah mengetahui cara melihat sumber atau source javascript eksternal di dalam template anda sendiri. Sekarang saatnya anda mengubah javascript eksternal tersebut menjadi internal dalam html template.
>>> Cara membuat javascript eksternal menjadi internal di blogger.
Anda telah mengetahui bentuk javascript eksternal di html template blogger, anda juga telah mengetahui cara melihat sumber javascript eksternal tersebut. Sekarang saat nya anda membuat javascript eksternal tersebut menjadi javascript internal di html template blogger anda. Berikut ini 2 langkah yang sangat mudah anda terapkan:
1. Copy kode script di bawah ini dan pastekan sebelum tag penutup </body>.
<script type='text/javascript'>
</script>
</script>
2. Copy semua deretan kode sumber atau source dari url javascript eksternal html template blog anda tadi di antara 2 kode script no 1 di atas. Sebagai contoh saya akan letakkan deretan kode sumber dari https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js, hasilnya akan seperti dibawah ini:
<script type='text/javascript'>
</script>
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this).stop(true, false).animate({
right: 0
}, 500);
}, function () {
jQuery("#facebook_right").stop(true, false).animate({
right: -200
}, 500);
});dan seterusnya dan seterusnya.......... </script>
3. Hapus kode javascript eksternal yang sebelumnya ada di antara kode <head>dan </head>atau di antara <body>dan </body>di html template tadi. Klik preview dan lihat jika fungsi javascript masih bekerja dengan baik klik Save Template. Selesai.
Contoh jika bentuk html template blog sebelumnya adalah seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
Kode meta content blogger disini.
<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>
</head>
<body>
Kode body blogger di sini.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
Kode meta content blogger disini.
<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>
</head>
<body>
Kode body blogger di sini.
</body>
</html>
Maka bentuk akhir dari html tenplate blog sekarang adalah seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
Kode meta content blogger disini.
</head>
<body>
Kode body blogger di sini.
<script type='text/javascript'>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
Kode meta content blogger disini.
</head>
<body>
Kode body blogger di sini.
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this).stop(true, false).animate({
right: 0
}, 500);
}, function () {
jQuery("#facebook_right").stop(true, false).animate({
right: -200
}, 500);
}); dan seterusnya dan seterusnya.......... </script>
</body>
</html>
Cek dan ricek lagi apakah javascript eksternal yang telah anda ubah tadi tetap bekerja dengan baik di blog anda. Memang cara saya ini akan menambah ukuran blog anda tapi hal itu sama sekali tidak mempengaruhi kecepatan loading blog anda.
2. Defer loading of javascript.
Cara ke dua untuk remove render blocking javascript di blogger adalah dengan menunda pemuatan loading javascript eksternal. Artinya semua javascript eksternal yang terdapat di html template blogger akan di load atau di muat paling akhir oleh browser (setelah browser memuat semua elemen html internal di blog, maka berikutnya yang di load adalah javascript eksternal tersebut).
Dengan kata lain, kita akan membuat browser menampilkan seluruh konten blog kita terlebih dahulu kepada pengunjung blog, barulah browser memuat javascript eksternal. Hal ini sangat berguna untuk menghindari "LAYAR PUTIH" yang terlalu lama saat visitor mengunjungi blog kita.
>>> Cara defer loading javascript di blogger.
Untuk memerintahkan browser agar memuat javascript eksternal paling akhir setelah semua elemen html internal di load, anda bisa tambahkan async='true' di dalam kode javascript eksternal blog anda. Sebagai contoh jika bentuk javasript eksternal blog adalah seperti di bawah ini:
<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>
Maka hasil akhir kode script eksternal tersebut setelah di defer loading adalah seperti di bawah ini:
<script type='text/javascript' async='true' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>
Catatan:
- Jika sumber atau source javascript eksternal blog anda menggunakan document.write{ } di dalamnya, maka tidak di sarankan menggunakan cara defer loading of javascript ini. Sebaiknya anda menggunakan cara pertama saya dengan inline smalljavascript di atas.
Jika anda melakukan 2 cara mudah ini sesuai dengan apa yang telah dijabarkan di atas, mestinya akan terjadi perubahan blog anda sekarang ini, loading blog anda menjadi lebih cepat dari sebelumnya. Silahkan test lagi loading blog anda di speed insights google dan lihat perubahan skor untuk loading blog anda............
Semoga bermanfaat
Semoga bermanfaat