Mengatasi Render-Blocking Javascript Dari Jquery

Render-Blocking Javascript Dari Jquery
Sebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript Dari Jquery perlu diperbaiki ketika blog dicek di PageSpeed. Karena saya pikir saya sudah memasang Jquery ini dengan benar. Namun kelamaan kepikiran juga bagaimana caranya untuk mengatasi Render-Blocking Javascript Dari Jquery ini. Mungkin karena saya takut salah dalam mengatasinya sehingga keberanian untuk mencoba mengatasinya menjadi hilang.

Akhirnya saya mencoba mengatasi ketakutan saya ini dan mencoba menerjemahkan isi halaman dari panduan Google untuk mengatasi Render-Blocking Javascript dengan alamat berikut: https://developers.google.com/speed/docs/insights/BlockingJS

Di situ saya menemukan petunjuk untuk menggunakan atribut HTML async pada Jquery-nya. Sebelumnya Jquery saya simpan di edit HTML sebagai berikut:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kemudian saya mencoba menambahkan atribut HTML async menjadi seperti berikut:


<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kemudian saya mengujinya pada halaman postingan blog untuk memastikan semua elemen blog berjalan seperti sebelumnya. Dan hasilnya halaman postingan tidak mengalami kendala apa pun, berjalan seperti sebelumnya. Namun ketika saya mencoba pada halaman depan blog, javascript pada post untuk mengatur gambar thumbnailnya agar naik dan turun ketika dihover menjadi tidak berjalan, namun saya biarkan terlebih dahulu. Kemudian saya cek blog di PageSpeed untuk memastikan apakah Render-Blocking Javascript dari Jquery ini sudah teratasi atau belum. Dan hasilnya cukup menakjubkan, seperti pada gambar di bawah ini.

Page speed Kompi Ajaib 1
Render-Blocking Javascript Dari Jquery sebelum diatasi.

Page speed Kompi Ajaib 2
Lihat skornya setelah Render-Blocking Javascript Dari Jquery diatasi.

Dengan mengatasi satu hal tersebut, skor speed blognya naik dengan menakjubkan. Tentunya ini menjadi hal yang cukup bagus untuk blog Kompi Ajaib sendiri. Namun permasalahan masih tersisa di homepage blog, untuk mengatasi javascript yang mengatur thumbnail untuk naik turun ketika dihover, saya akhirnya menggunakan CSS untuk mengatur naik turun thumbnail ketika dihover dan menghapus javascriptnya itung-itung untuk merampingkan size blog juga.

Bagaimana dengan blog Anda? Jika mengalami hal yang sama seperti Kompi Ajaib yaitu Render-Blocking Javascript dari Jquery, coba saja pengalaman saya ini siapa tahu bisa berhasil juga pada blog Anda.

Untuk Render-Blocking Javascript itu sendiri jika diartikan itu adalah javascript tersebut menyebabkan loading pada halaman blog ketika diakses baik melalui handphone, ipad, atau desktop. Loading itu sendiri disebabkan karena browser harus mendownload terlebih dahulu javascriptnya sebelum halaman berhasil dimuat.

Tertunya hal ini akan berakibat kurang baik di mata search engine khususnya Google. Jika kita peduli dengan peringkat blog di serp, tentunya hal ini harus diatasi karena Google akan menyingkirkan blog atau web dari serp yang memiliki loading lambat atau blog yang menyebabkan pengunjungnya harus menunggu waktu yang lama untuk membuka suatu halaman sebagaimana yang ditunjukan di PageSpeed seperti gambar di atas tadi.

Update:
Setelah saya baca beberapa argument di beberapa forum, ternyata asynchronous pada jquery library ini tidak baik karena jelas akan mengganggu element blog yang menggunakan jquery. Untuk saat ini belum ada solusi yang terbaik untuk mengatasi render-blocking js dari jquery ini.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments