Cara Gampang Melaksanakan Minifikasi Html, Css, Dan Javasricpt Secara Otomatis Untuk Memperingan Loading Blog

Baca Juga

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

Sumber gambar : pexels.com

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

Minifikasi HTML

Pertama kita melaksanakan minifikasi HTML dengan memakai tools html compressor. Sebelumnya perhatikan teladan arahan 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 bekerjsama tidak diharapkan 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 pribadi saja ikuti langkah-langkah dibawah ini :

• Buka situs minifikasi HTML di HTML compressor maka anda akan tertuju pada tampilan menyerupai 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 arahan HTML di atas pada kotak yang tersedia
• Pilih compress dan tunggu prosesnya

Jika berhasil maka akhirnya menyerupai 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 arahan tersebut sangat terlihat sekali perbedaannya. Dimana arahan yang kedua sudah tidak terdapat tag komentar serta tidak ada lagi space/jarak antar kode

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

Minifikasi CSS dan Javasript

Mengapa pembahasan perihal minifikasi css dan javascript ini dijadikan satu? Hal ini dikarenakan kita akan memakai tools yang sama untuk melaksanakan proses minifikasi.

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

Oke, pribadi saja kita ke prakteknya saja..

Minifikasi ini memakai tools yang sama yaitu minifier.org 

Untuk Minifikasi CSS

Coba perhatikan arahan 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 melaksanakan minifikasi lakukan langkah-langkah berikut ini :

• Copy semua arahan 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 akhirnya akan menyerupai 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 menyerupai melaksanakan minifikasi css.

• Copy semua arahan 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 arahan javascript tersebut akan menjelma menyerupai ini sesudah 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 gampang bukan? Setelah melaksanakan minifikasi tersebut anda bisa rasakan sendiri blog anda bisa berloading lebih cepat dari sebelumnya.

Note : kode-kode HTML, CSS, dan Javasricpt yang terdapat pada artikel ini bukanlah arahan yang dibentuk oleh admin namun admin ambil dari banyak sekali 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 perihal cara melaksanakan minifikasi HTML, CSS, dan Javasricpt untuk memperingan loading blog biar bermanfaat bagi pembaca.

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