March 7, 2018

Cara Mudah Melakukan Minifikasi HTML, CSS, dan Javasricpt Secara Otomatis Untuk Memperingan Loading Blog

Cara Minifikasi HTML, CSS, dan Javasricpt - Seperti yang sudah kita ketahui, bahwa salah satu penyebab beratnya loading suatu blog disebabkan karena HTML, CSS, dan Javasricpt yang belum di minifikasi.. Minifikasi sebenarnya merupakan pengukuran ukuran/size dengan menghapus kode-kode yang tidak terlalu dibutuhkan seperti tag, space, dan komentar. Kode-kode tersebut nantinya bakal terhapus saat proses minifikasi sehingga ukurannya menjadi lebih kecil.

Cara Minifikasi HTML, CSS, dan Javasricpt Untuk Memperingan Loading Blog
Sumber gambar : pexels.com

Sebenarnya Minifikasi ini bisa dilakukan secara manual jika memang Anda benar-benar ahli dalam dunia coding. Namun bagi anda seorang pemula sebaiknya anda melakukan minifikasi HTML, CSS dan javascript secara otomatis dengan menggunakan tools sehingga mampu untuk memudahkan Anda. Perlu diketahui, melakukan minifikasi secara otomatis bisa saja merubah tampilan pada blog anda. Untuk itu sebaiknya backup dulu template anda sebelum melakukan minifikasi ini

Minifikasi HTML


Pertama kita melakukan minifikasi HTML dengan menggunakan tools html compressor. Sebelumnya perhatikan contoh kode HTML di bawah ini :

<div class='gmr-col-1-2' id='header-right'>

     <div id='gmr-header-search'>

      <form action='/search' class='gmr-pull-right' id='search-form' method='get' target='_top'>

       <input id='search-text' name='q' placeholder='Search and enter' type='text'/>

      </form>

     </div>

    </div> <!-- End header-right -->

   </div> <!-- End gmr-row -->

  </div> <!-- End gmr-header-inside -->

  <!-- End Header Layout -->

Kode <!-- ....... !--> merupakan tag komentar yang sebenarnya tidak diperlukan sehingga perlu dihilangkan dengan cara di minifikasi. Selain itu pada kode-kode tersebut juga banyak terdapat space atau jarak sehingga juga perlu untuk dihilangkan.

Sekarang langsung saja ikuti langkah-langkah dibawah ini :


  • Buka situs minifikasi HTML di HTML compressor maka anda akan tertuju pada tampilan seperti di bawah ini

Cara Minify HTML
Sumber gambar : htmlcompressor.com

  • Pada code type silahkan pilih x/html dan drag and drop charset ubahlah ke UTF-8
  • Selanjutnya copy kode HTML di atas pada kotak yang tersedia
  • Pilih compress dan tunggu prosesnya
Jika berhasil maka hasilnya seperti dibawah ini


<div class='gmr-col-1-2' id='header-right'>
<div id='gmr-header-search'>
<form action='/search' class='gmr-pull-right' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search and enter' type='text'/>
</form>
</div>
</div>
</div>

Dari 2 kode tersebut sangat terlihat sekali perbedaannya. Dimana kode yang kedua sudah tidak terdapat tag komentar serta tidak ada lagi space/jarak antar kode

Catatan : jika anda ingin minifikasi kode html dalam jumlah yang banyak pada code type pilih blogger bukan x/html lagi 


Minifikasi CSS dan Javasript


Mengapa pembahasan tentang minifikasi css dan javascript ini dijadikan satu? Hal ini dikarenakan kita akan menggunakan tools yang sama untuk melakukan proses minifikasi.

Sebelumnya anda harus mengetahui kode-kode seperti apa css dan javascript itu. Kode css adalah kode yang berada diantara kode <b:skin><![CDATA[ dan ]]></b:skin> atau diantara kode <style> dan </style> dan juga kode yang berada diantara <style type="text/css"> dan </style juga merupakan kode css. Sedangkan javascript merupakan kode yang berada diantara kode <script type='text/javascript'> dan </script>

Oke, langsung saja kita ke prakteknya saja..


Minifikasi ini menggunakan tools yang sama yaitu minifier.org 


Untuk Minifikasi CSS


Coba perhatikan kode css dibawah ini :

  <style type="text/css">

    p{

      font-family: roboto;

      line-height: 1.75em;

      font-size: 16px;

    }

    i {

      font-family: sans;

      color: blue;

    }

  </style>

Untuk melakukan minifikasi lakukan langkah-langkah berikut ini :

  • Copy semua kode tersebut ke dalam kotak yang telah disediakan. Karena css yang diminifikasi maka pilih css (lihat gambar dibawah untuk lebih jelasnya)

Cara Minifikasi CSS Dengan Minifier.org
Sumber gambar : minifier.org

  • Selanjutnya klik minify dan tunggu prosesnya.


Jika sudah selesai maka hasilnya akan seperti ini
<style type="text/css">p{font-family:roboto;line-height:1.75em;font-size:16px}i{font-family:sans;color:blue}</style>

Untuk Minifikasi Javasricpt


Langkah-langkahnya hampir sama seperti melakukan minifikasi css.

  • Copy semua kode dibawah ini ke dalam kotak yang tersedia


 <script type='text/javascript'>

function mainmenu(){

$(" #nav ul ").css({display: "none"}); // Opera Fix

$(" #nav li").hover(function(){

  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

  },function(){

  $(this).find('ul:first').css({visibility: "hidden"});

  });

}



 $(document).ready(function(){

 mainmenu();

});

</script>


  • Pilih javascript (lihat gambar  untuk lebih jelasnya)

Cara Minifikasi Javasricpt Dengan Minifier.org
Sumber gambar : minifier.org


  • Terakhir klik minify dan tunggu hingga proses minifikasi selesai.


Maka kode javascript tersebut akan berubah menjadi seperti ini setelah diminifikasi
<script type='text/javascript'>function mainmenu(){$(" #nav ul ").css({display:"none"});$(" #nav li").hover(function(){$(this).find('ul:first').css({visibility:"visible",display:"none"}).show(400)},function(){$(this).find('ul:first').css({visibility:"hidden"})})}
$(document).ready(function(){mainmenu()});</script>

Bagaimana mudah bukan? Setelah melakukan minifikasi tersebut anda bisa rasakan sendiri blog anda mampu berloading lebih cepat dari sebelumnya.

Note : kode-kode HTML, CSS, dan Javasricpt yang terdapat pada artikel ini bukanlah kode yang dibuat oleh admin namun admin ambil dari berbagai sumber yang ada diinternet

Ingin tau tutorial mempercepat loading blog lainnya? Bacalah pada artikel-artikel dibawah ini

Mempercepat Loading Blog Dengan Lazy Load


Mempercepat Loading Blog Dengan Optimasi Gambar


Demikian sedikit artikel tentang cara melakukan minifikasi HTML, CSS, dan Javasricpt untuk memperingan loading blog semoga bermanfaat bagi pembaca.

Jika ada yang ingin ditanyakan bisa disampaikan melalui kolom komentar tersedia.

Komentarlah yang sopan
Jangan spam
Dilarang gunakan link aktif
Dilarang komentar yang menyinggung SARA dan berkonten negatif

Terima kasih :)