Terlebih dahulu Memahami apa itu 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 satu aturan 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 dalamnya, 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 Blog Anda jadi lama “. Hal seperti ini akan terus terulang lagi jika pengunjung blog melihat halaman yang lain dari blog Anda.
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.
2. 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'/> " ):
3. 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 Blogger
anda.
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.js dan 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.
4. 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.
5. 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.
6.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 small
javascript di atas.
Jika
anda melakukan 2 cara mudah ini sesuai dengan apa yang telah dijabarkan di
atas, harusnya telah 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............
Silahkan share kepada sahabat Anda mungkin membutuhkan informasi ini, Silahkan share pada social bookmark dibawah ini.
Silahkan share kepada sahabat Anda mungkin membutuhkan informasi ini, Silahkan share pada social bookmark dibawah ini.
wah mantaf boss... :D tutorial yg 'SUPEER SEKALI" blog ane langsung sdikit wus wus wus bablas angine..
ReplyDeleteBlognya boos usman 'ane ' bookmark deh.. (biar cepet mampir lagi kemari)
Oh ya boss seumpama beberapa artikel nya ane comot dan pajang di blog ane boleh ya?? terutama yg (INFO IT) itu loh ntr ane tulis link sumbernya milik boss..
bolehkan kan bosss?? boos kan baik... he..he..he..
Monggo..silahkan di copas yang penting link sumber tetap dicantumkan " tidak ada masalah ".
DeleteJIka dihilangkan LINK SUMBER-nya saya mungin akan melaporkannya ke Google DMCA.
Terima kasih kunjungannya
Thank you sangat mas,blogsaya udah kenceng nihhhh,hheehe
ReplyDeleteThanks informasi keren nya..sangat berguna..
ReplyDelete