Cara mudah minify HTML, CSS, JavaScript di GTmetrix

Salah satu cara google dan search engine lainnya untuk menentukan nilai blog anda adalah Kecepatan.


Selain mesin pencari pengunjung juga bisa menilainya, terutama bagi para pengunjung baru atau bisa dikatakan kunjungan pertama mereka terhadapblog anda..

Jika blog memiliki loading yang lambat ini akan membuat pengunjung menjadi tidak betah.. Dan kemungkinan besar mereka akan keluar dari blog anda sebelum membaca artikel..

Internet sendiri sudah terlalu banyak gangguan..Jadi tidak ada alasan bagi para pengunjung untuk menunggu terlalu lama

Suatu blog pastilah wajib memuat banyak file, Termasuk jenis HTML, CSS, Dan Java Script. Jika terlalu banyak kode tersebut tentu membuat blog lambat..

Jadi anda bisa meminifikasi ukuran file file tersebut agar loading blog menjadi Lebih cepat

Apa yang Dimaksudkan untuk Meminimalkan dan Mengapa Bermanfaat untuk meningkatkan kecepatan?

Minify adalah istilah pemrograman yang pada dasarnya berarti menghapus karakter yang tidak diperlukan.

Untuk meminimalkannya anda bisa : 

• Baris kosong berwarna putih
• Komentar
• Garis baru karakter

Nah mungkin bisa kita mulai saja Langsung untuk melakukan Minify HTML CSS JavaScript

Cara minify HTML, CSS, JavaScript

Minify HTML

Pertama kita mulai dari minify HTML, Untuk kodenya kurang Lebih bentukannya seperti ini...

<div class="kotak"> ada banyak
spasinya jadi
bisa dikurangin
</div>

Jika anda lihat Kode tersebut punya banyak jarak

<div class="kotak"> ada banyak spasinya jadi bisa dikurangin</div>

Jarak menjadi lebih rapat dan terlihat leih rapih

Melakukan penghapusan kode seperti itu tida akan membuat template anda menjadi error Jika dilakukan secara benar..

Jadi setidaknya untuk melakukan minify anda mengerti Basic dari HTML.

Selain melkukan peghapusan jarak anda juga bisa melakukan penghapusan terhada kode kode seperti ini..

<--! ...NamaKode .. --!>

Kode ini tidak berguna, hanya memberatkan saja

Masih kurang efektif? Baiklah kita coba untuk mencari kode seperti ini..

&lt;!--</body>--&gt;&lt;/body&gt;

Jika sudah ketemu pada template anda silahkan hapus dan ganti kodenya menjadi seperti ini :

&lt;textarea readonly disabled style=&#39;display:none&#39;&gt; &lt;!--</body>--&gt; &lt;/textarea&gt; &lt;/body&gt;

Nah selesai ... Jika sudah mari kita Lanjut ke Langkah yang selanjutnya.

Minify CSS

Untuk melakukannya tidaklah jauh berbeda dengan melakukan minify HTML. Cara nya tetap sama dengan menghapus Jarak.

Untuk kode CSS Sendiri biasanya terletak pada bagian Tag Kode <Style> atau .]]><b:skin>

Kurang lebih bentuknya seperti ini :

 .Kotak.biru                                                                                                                         { display: block;                                                                                                          background:                                                                                                              white; position:                                                                                                        z-index; width: 120%; float:none }

Kode diatas hanyalah contoh

Nah selanjutnya Tinggal kita minify Lagi saja dengan melakukan penghpausan baris kode kode tersebut..
d

 .Kotak.biru  { display: block;background: white; position:z-index; width: 120%; float:none }

d
Setelah itu cari Lagi kode seperti ini : /* ... /*

Contoh :

/*SyntaxHighligher/*

sebab tidak ada gunanya.. Terkecuali anda mempunyai template premium yang bisa mengedit tanpa harus masuk ke HTML Mode.

Jika sudah kita lanjutkan ke langkah yang ketiga

Minify JavaScript

Java script memang sudah tidak bisa lagi dihilangkan dari suatu Blog atau website.. Dan JavaScript sendiri sudah seperti menjadi momok untuk para blogger..

JavaScript memiliki ukuran yang besar.. Sekita 2-3 lebih besar dari pada HTML Dan CSS.. Jika tidak ada Java Script blog akan mengalami berbagai masalah..

Beberapa Penyebab Blog anda menjadi berat karena Java Script..

1. JavaScript belum dikompress
2. Penggunaan yang berelebihan
3. JS Yang dihosting diluar

Untuk cara mudah kita bisa melakukan compress pada JavaScript, Untuk caranya sendiri sama seperti 2 kode sebelumnya..

Lihat kode berikut ini :

<script                                                                                                                                                        type='text/javascript'> var obj0=document.getElementById(&quot;post1                                                                                                                                             <data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2                                  <data:post.id/>&quot;); var s=obj1.innerHTML;                                             var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0)                                                                                                           {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

**Kode memiliki banyak Jarak.

Sekarang kita minify dengan menghapus Jarak jarak tersebut..

<script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

Mudah sekali bukan? ..


Oh ya bagi anda yang mengalami masalah ini karena script eksternal khususnya jQuery, anda bisa mengatasinya dengan cara berikut.

Pertama, cari kode jQuery yang ada di blog anda. Kurang lebih bentuknya seperti ini: (atau mirip)

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js' type='text/javascript'/>

Sekarang tambahkan .min sebelum akhiran url, sehingga bentuknya menjadi seperti ini:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Gimana? Sangat mudah bukan?? anda bisa melihat hasil akhir dari blog yang sudah saya minify html dan Javascriptnya

Penutup

Gunakan kode kode seperti CSS Dan JavaScript seperlunya saja, Jangan berlebihan.. apalagi kode kode yang dipasang untuk dekorasi pada blog yang terbilang tidak penting..

Selain memberatkan Pengunaan yang berlebihan bisa Mengganggu para pengunjung Blog.. Sekian Terimakasih

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: