Cara Efektif Mengatasi Render Blocking JavaScript Jquery Library

Jika Anda adalah seorang yang sering mengecek kecepatan situs Anda di PageSpeed Insights pasti sudah tahu kalau blog kita mempunyai javascript eksternal maka pagespeed langsung mendeteksi javascript tersebut termasuk jugalah Jquery Library. Ada beberapa cara untuk mengatasinya, salah satunya dengan cara memuat secara asingkron. Namun, dengan menggunakan asingkron Jquery Library tidak termuat dengan maksimal dan terkadang tidak termuat sama sekali.

Untuk cara efektifnya ialah dengan menyimpan Jquery Library di atas </body>, dengan demikian jquery dulu yang termuat, hal ini akan menghilangkan javascript jquery akan yang memblokir peredaran.

Sebenarnya ini merupakan hasil praktek dari teman saya +Rifan Hidayat yang di publishnya di blognya http://ngudang.blogspot.com/.

Cara Mengatasi Render Blocking Jquery

1. Buka Dasbor Blogger > Template > Edit HTML. Ada baiknya jika file template kalian di back up terlebih dahulu, karena tutorial ini susah bagi yang newbie.
2.  Cari script jquery ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> dengan menggunakan Ctrl + F. Mungkin Anda tidak menemukannya, karena setiap template berbeda-beda versi, intinya cari saja jquery.min.js.
3. Copy <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> kemudian pendahkan script Jquery tersebut di atas </body>.
4. Kemudian pindahkan semua Jquery di bawah script <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> Maka hasilnya seperti di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
Letakan semua Jquery di sini
//]]>
</script>
</body>

Mungkin Anda susah untuk membedakan antara JavaScript dengan Jquery? Jika kesusahan membedakannya, ciri-ciri jquery biasanya diawali dengan $
Misalnya kita mempunyai dua jquery:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var dimension = 160;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]>
</script>
<script>
// TinyNav.js
$(function () {
  $('#menu').tinyNav();
});
</script>

Kemudian gabungkan jquery tersebut, maka hasil akhir setelah digabungkan nanti adalah seperti di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var dimension = 160;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
$(function () {
  $('#menu').tinyNav();
});
//]]>
</script>
</body>

Penting: Semua jquery harus diletakan di bawah script jquery library, jika tidak maka jquery yang tidak diletkan di bawah jquery akan tidak berfungsi.
Dengan demikian, maka kecepatan blog Anda akan makin wuz-wuz walaupun menggunakan jquery. Contoh blog yang sudah saya optimalisasi: link contoh.

Sebagian pembaca pasti menanyakan mengapa blog ini kok tidak dibuat seperti ini? Jawabanya karena template ini sudah terlalu banyak jquery dan banyak CSS dan JavaScript eksternal, walaupun saya gunakan pasti nantinya akan banyak yang tidak berfungsi, oleh sebab itu tidak semua template bisa berhasil dengan tutorial ini.

TAGS :

SHARE

Facebook

Twitter

Jonni Mulyawan

Menulis adalah salah satu cara saya menggunakan waktu luang.

RELATED POSTS