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

Baca Juga Artikel Berikut Ini

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.

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

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)

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)

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.