Solusi dan Cara Minify JavaScript di PageSpeed Insights

Hampir sama seperti Minify CSS, Minify JavaScript atau dalam bahasa Indonesianya Memperkecil JavaScript adalah masalah loading blog pada Google PageSpeed Insights yang disebabkan oleh JavaScript blog itu sendiri.

Javascript memang suatu hal yang tidak bisa dipisahkan dari blog. Tanpanya, blog akan mengalami masalah, seperti beberapa widget yang tidak work, tombol balas pada komentar tidak work, dan lain-lain.

Tetapi tentu pemakaian Javascript ini harus disertai dengan perilaku yang baik, seperti mengkompresnya terlebih dahulu, penempatannya di dalam HTML, dan lain lain. Bila tidak, maka blog akan bertambah masalahnya, yaitu loadingnya yang menjadi lambat.

Langsung saja, berikut beberapa penyebab blog berat karena Javascript:

1. JavaScript belum dikompres
2. Penggunaannya yang berlebihan
3. Terjadi duplikat / 2 (atau lebih) Javascript yang sama
4. Javascript yang dihosting di luar
5. Javascript yang terpisah-pisah

Kelima masalah diatas harus segera ditangani dan diatasi dengan baik bila terjadi di blog kesayangan anda, tentunya agar waktu loadnya menjadi ringan dan cepat. Berikut cara mengatasinya.

1. JavaScript belum dikompres

Silahkan anda cek satu persatu Javascript yang ada di blog anda, apabila ada yang berbentuk kurang lebih seperti ini:

<script type='text/javascript'>//<![CDATA[
$(function(){
   if ($('#PopularPosts1').length) {
      var el = $('#PopularPosts1');
      var stickyTop = $('#PopularPosts1').offset().top;
      var stickyHeight = $('#PopularPosts1').height();

      $(window).scroll(function(){
          var limit = $('#blog-pager').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop();

          if (stickyTop &lt; windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("sticky");
          }
          else {
             el.css('position','static');
          }

          if (limit &lt; windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]></script>

Segera anda copy semua kode dari setelah //<![CDATA[ sampai sebelum //]]>, buka tool pengkompres ini, pastekan disana, lalu kompres Javascript tadi. Kemudian silahkan anda hapus kode diatas dan ganti dengan yang hasil kompresan tadi.

Hal ini bertujuan untuk memperkecil size Javascript pada blog anda. Javascript yang tidak dikompres tentu berukuran besar dan dapat memperlambat loading blog anda.

Tenang aja... pengkompresan gak membuat javascript error kok...

2. Penggunaannya yang berlebihan

Dari yang gak perlu-perlu bener sampe yang tidak digunakan masih aja nempel Javascriptnya di blog.

Saya sarankan sekarang juga anda melakukan bersih-bersih template, sekaligus melakukan penyisihan...

...mana Javascript yang memang benar-benar diperlukan, mana yang tidak terlalu digunakan. Apalagi memang tidak pernah digunakan/tidak work.

Dulu juga saya pernah melakukan bersih-bersih Javascript. Javascript untuk menu dropdown saya hapus (baru saya ganti menu tanpa Javascript), Script yang membuat Back to Top smooth saya hapus, jquery tambahan, javascript eksternal, dan masih banyak lagi.

Alhasil, blog saya waktu loadnya lumayan cepat sekarang. Berkurang sekitar 0.3-0.4 detik.

3. Terjadi duplikat Jquery

Duplikat disini berarti dobel, alias ada lebih dari satu padahal yang diperlukan hanya satu.

Misal seperti ini, di dalam tag head atau body di blog anda terdapat kode yang mirip seperti ini lebih dari satu... Silahkan anda cek sekarang.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

Mungkin bila terdapat lebih dari satu, bentuknya seperti ini:

Yang satu:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

Yang satunya lagi:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> 

Hanya berbeda pada versinya saja, yang pertama 3.1.1 yang kedua 1.11.0. Padahal, hal ini tidak terlalu berpengaruh pada blog anda, efeknya sama saja (mungkin berbeda pada widget kasus tertentu), tetapi blog harus merequest dan mendownload keduanya.

Tentu hal ini sangat membuang-buang waktu, meload Jquery yang tidak diperlukan.

Saran dari saya, cobalah anda hapus salah satu dari kode diatas (namanya Jquery Library) yang memiliki versi lebih lama, misal 3.1.1 dengan 1.11.0, maka hapuslah yang 1.11.0.

Lalu cek blog anda...

...bila tidak terjadi apa-apa, maka simpan perubahan. Bila terjadi perubahan misal beberapa widget tidak work, maka urungkan penghapusan dan masukkan lagi Jquery Librarynya.

4. Javascript yang dihosting di luar

Nama lain dari Javascript yang dihosting diluar ini adalah external Javascript. Kok bisa, Javascript yang dihosting diluar blog akan memperlambat waktu load ya?

Ya jelas... silahkan anda lihat gambar dibawah ini untuk lebih detailnya.


Blog yang mempunyai Javascript yang dihosting tentu akan memiliki request lebih, selain request ke blognya sendiri. Sehingga hal ini dapat membuang waktu dan kuota lebih.

Cukup Jquery Library saja yang dihosting, kalau Javascript biasa menurut saya tidak terlalu diperlukan penghostingan.

5. Javascript yang terpisah-pisah

Misal di blog anda terdapat kode Javascript yang berhamburan seperti ini:

<html>
<head>...</head>

<body>

<script type='text/javascript'>//<![CDATA[
... A ...
//]]></script>
<script type='text/javascript'>//<![CDATA[
... B ...
//]]></script>
<script type='text/javascript'>//<![CDATA[
... C ...
//]]></script> 

</body>

</html>

 Cukup anda gabungkan semua Javascript diatas menjadi seperti ini:

<html>
<head>...</head>

<body>

<script type='text/javascript'>//<![CDATA[
... A ...
... B ...
... C ...
//]]></script>

</body>

</html>

Selesai...

Nah, bagaimana? Semoga masalah ini cepat terselesaikan oleh blog anda dan terima kasih telah membaca dan mengikuti langkahnya!