-->

Cara Melakukan Remove Render Blocking Javascript Pada Blogspot

Ketika melakukan tes kecepatan loading blog dengan Google Speed Insight, kecepatan loading blog tidak optimal.
Untunglah pada tools yang disediakan Google tersebut, disediakan juga saran-saran dan cara mengatasinya. Dan untuk mempercepat loading blog, salah satu saran yang diberikan adalah agar melakukan Remove Render Blocking Javascript.

Saran untuk melakukan Remove Render Blocking Javascript.biasanya diberikan oleh Google Speed Insight apabila pada blog menggunakan kode javascript eksternal. Javascript eksternal bisa cukup mudah dikenali, karena biasanya menggunakan kode .js
Sebagai contoh :

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

Keberadaan Javascript eksternal dalam blog, meski memang punya fungsi tertentu, secara umum akan memperlambat loading sebuah blog.
Saat browser menampilkan sebuah halaman web/blog maka terlebih dahulu membaca semua dokumen dalam html template. Bila dalam html template terdapat script eksternal, maka browser akan berhenti loading untuk sesaat guna membaca sumber javascript eksternal. Baru sesudah kode sumber terbaca semua, browser melanjutkan meloading sampai tuntas.

Sehingga hal ini akan mempengaruhi kecepatan loading blog.
Atau secara sederhana, kecepatan loading blog akan menjadi lebih lambat. Dan semakin banyak Javascript eksternal, maka akan semakin lambat pula loading blog.

Itulah sebabnya Google speed Insight menyarankan supaya melakukan Remove render Blocking Javascript agar kecepatan loading blog semakin baik.
Lihat juga :
> Lebih Google Friendly Dengan Memasang Shema pada Blog

Bagaimana Cara Melakukan Remove Render Blocking Javascript Pada Blogspot ?

Setidaknya ada dua cara untuk Melakukan Remove Render Blocking Javascript Pada Blogspot.
1. Cara untuk Melakukan Remove Render Blocking Javascript dengan Inline Small Javascript.

Yaitu sebuah cara untuk “merubah” kode javascript eksternal menjadi kode javascript internal.
Cara merubah javascript eksternal menjadi javascript internal :

- Kode javascript eksternal pada blogspot biasanya diletakkan antara kode <head> dan </head>
Sebagai contoh :

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

- Copy pastekan pada browser url .js tersebut untuk mengetahui sumber kode ( url source ) secara lengkap. Setelah terbuka maka akan terlihat keseluruhan kode javascripnya.

- Lakukan parse html pada kode javascript eksternal tersebut - letakkan kode javascript yang telah di-parse tadi diantara kedua kode di bawah ini :

&lt;script type='text/javascript'&gt;
kode javascript yang telah diparse
&lt;/script&gt;

- hapus kode javascript yang telah terpasang sebelumnya

- Letakkan kode javascript yang baru tadi sebelum tag penutup </body>

- Selesai, simpan. ( Sebaiknya back up dulu template untuk jaga-jaga seandainya ada kesalahan ).

2. Cara untuk Melakukan Remove Render Blocking Javascript dengan Defer loading of javascript.

Defer loading of javascript secara sederhana dapat digambarkan sebagai menunda pemuatan loading javascript eksternal.
Artinya, browser diperintahkan agar semua kode javascript eksternal yang terdapat pada html template supaya di loading atau di muat paling akhir.
Jadi browser “harus” terlebih dulu menampilkan seluruh konten pada pengunjung blog, baru boleh memuat javascript eksternal. Sehingga pengunjung tidak melihat layer kosong terlalu lama ( karena menunggu dimuat ).

Untuk Melakukan Remove Render Blocking Javascript dengan Defer loading of javascript cara cukup sederhana. Yaitu hanya dengan menambahkan sebaris kode berikut : async='true' pada setiap kode javascript eksternal blog.
Sebagai contoh, pada sebuah javascript eksternal yang asli adalah :

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

Setelah di defer loading dengan menambahkan kode di atas, hasilnya adalah seperti di bawah ini:

<script type='text/javascript' async='true' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

Namun sebagai catatan bila sumber javascript eksternal menggunakan document.write{ }, disarankan menggunakan inline small javascript agar hasilnya lebih optimal.

You may like these posts