Senin, 26 Desember 2016

Cara Remove Render Blocking Javascript


Ketika anda memeriksa kecepatan akses blog atau website anda pada tool seperti Google page speed insight, biasanya anda akan mendapatkan warning "should fix!" Eliminate render-blocking JavaScript and CSS in above-the-fold content, ternyata ini merupakan salah satu faktor yang sangat berpengaruh pada kecepatan akses dari blog atau website anda. Pada tulisan ini Lombok blogger akan membahas bagaimana cepat mengatasi permasalahan ini.

Sebelum browser menampilkan sebuah halaman website, terlebih dahulu script yang ada pada website tersebut akan di-parse/diuraikan (Javascript dan css) baru kemudian ditampilkan. Jadi selama proses penguraian tersebut, jika ditemukan script yang dipanggil dari sumber external, maka proses penguraian akan dihentikan untuk mendownload script terlebih dahulu, baru kemudian proses penguraian dilanjutkan kembali. Ternyata proses ini sangat berpengaruh pada kecepatan blog atau website ketika diakses.
Kecepatan loading website merupakan salah satu faktor utama website layak berada pada halaman pertama pada hasil pencarian. Perusahaan Search engine tentu tidak ingin mengecewakan user dengan menampilkan website yang memiliki loading halaman lambat pada halaman pertama hasil pencarian.

lombok blogger
Lombok blogger pada page speed insight, setelah dilakukan pengoptimalan Javascript dan css.
Blog lombok blogger (sebelum menambahkan beberapa gambar dengan ukuran diatas 100KB) mendapatkan lampau hijau pada Google page speed insight, baik pada versi desktop maupun versi  mobile. Tapi setelah menambahkan postingan yang mengharuskan untuk menggunakan gambar dengan ukuran yang cukup besar, maka sekarang berada dilevel 80-an/100.

Perlu diketahui, selain javascript dan css external, gambar juga memiliki pengaruh yang cukup besar pada kecepatan loading website. Pastikan anda menggunakan gambar dengan kompresi maksimal, dan selalu tampilkan gambar pada halaman dengan ukuran original ( tidak dikecilkan atau dibesarkan).

Cara Menghilangkan Render-blocking JavaScript and CSS in above-the-fold content


Untuk mengatasi masalah ini, caranya sebenarnya cukup sederhana, masalah ini mucul karna anda memanggil script javascript dan css dari sumber luar atau eksternal, maka untuk mengatasinya, kita hanya perlu memasang script tersebut pada blog atau website anda, caranya.

Remove Render Blocking JavaScript pada Blogger



Perhatikan gambar diatas, pada text yang berwarna biru "Remove render-blocking Javascript" terdapat link javascript yang dipanggil ketika browser menguraikan halaman website, jadi kode javascript ini tidak terdapat pada website, akan tetapi terdapat pada sumber luar, dan akan dipanggil jika browser menguraikan halaman website untuk ditampilkan.

Silahkan copy link javascript tersebut, kemudian buka tab baru pada browser anda, selanjutnya paste dan tekan enter untuk melihat isi dari script tersebut. Maka akan terlihat seperti gambar dibawah berikut.


Langkah selanjutnya, copy semua baris script pada browser, dengan menekan tombol ctrl+a pada keyboard. Code Javascript yang sudah di Copy selanjutnya anda pasang diantara kode berikut  

<script type="text/javascript"> Pasang kode javascript disini </script>

Ganti text yang berwarna merah dengan kode javascript yang sudah anda kopy sebelumnya. Selanjutnya kopi semua code setelah digabungkan.

Masuk kehalaman dashboard blogger, kemudian pilih menu Tata Letak, lalu tambahkan widget HTML/Javascript, kemudian paste kode javascript yang sudah anda kopi pada widget tersebut, Pada kolom judul dikosongkan saja, kemudian tekan tombol save.

Sekarang coba anda lakukan pengetesan pada google page speed insight,  error render blocking javascript seharusnya tidak muncul lagi.

Penutup

Untuk Optimasi CSS Delivery, akan dibahas pada postingan berikutnya, jika ada yang masih kurang jelas dan perlu ditanyakan pada postingan cara remove render blocking javascript ini, silahkan tinggalkan pesan pada kolom komentar. Suka dengan postingan ini, silahkan like fapage facebook kami Lombok Blogger, dapatkan informasi terupdate tentang tutorial SEO dan Blogger, terimakasih

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Masih aktif menulis dibeberapa Blog dan website. Menjadi web designer di Sasambo Desain. Hobi travelling, reading, climbing, camping, hiking, swimming, and boxing

1 komentar so far

wah mantep gan.. tapi di halaman blognya apakan ga akan muncul sebuah kololm widget..? atau ini seperti hidden script pada histats?

Terimkasih sudah berkunjung ke Lombok Blogger. Budayakan untuk berkomentar yang baik dan sesuai dengan materi postingan, komentar yang terlalu singkat kami anggap Spam dan tidak kami tanggapi
EmoticonEmoticon