Pemahaman Tentang Remove Render Blocking Javascript blogger
Jika Anda pernah meletakkan javascript eksternal di dalam elemen html template blogger ,maka bisa di pastikan anda telah melanggar minimal 1
rules dari google speed insights yaitu remove render blocking javascript. Hal
ini menyebabkan loading blog anda akan bertambah lama,lambat,lemot,lola.... Apa penyebabnya ?. Karena sebelum browser menampilkan suatu halaman Web atau Blog kepada visitor, terlebih dahulu browser akan membaca seluruh dokumen
dalam html template halaman tersebut. Jika html template halaman 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. Semakin banyak script eksternal dalam html template blog, maka akan
semakin sering browser berhenti sejenak untuk membaca source dari script eksternal, ini lhooo.. penyebab loading Blog jadi lama.
Hal seperti ini akan terulang lagi jika pengunjung blog melihat halaman yang
lain di Web atau Blog Anda.
Hal lain yang juga tidka dapat dipisahkan untuk meningkatkan kecepatan loading Blog adalah dengan mengoptimalkan pengiriman CSS di html template blogger.
Berikut
ini adalah 2 Cara Remove render Blocking Javascript.
Ada dua cara yang saya ketahui untuk menghapus penghambat javascript eksternal saat browser load html template blogger ini. Dan untuk selanjutnya akan saya jelaskan satu persatu bagaimana menerapkannya 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 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 :
>>>
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.
Sebelum Anda 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 berwarna merah yang bercetak tebal ) :
<?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>
>>> 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:
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:
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..........
Catatan
Penting:
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>
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'>
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..........
</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" ?>
<?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>
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'>
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 ..........
</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).
>>> 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: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.
<script
type='text/javascript'
src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>
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 sesuai dengan apa yang telah dijabarkan di
atas, seharusnya ada perubahan mencolok dari blog anda sekarang ini yaitu loading blog
anda menjadi lebih cepat dari sebelumnya. Silahkan test lagi loading blog anda
di speed insights google dan lihat apakah ada perubahan skor untuk loading blog
anda.
Semoga bermanfaat........
EmoticonEmoticon