Cara Gampang Minify Html, Css, Javascript Di Gtmetrix
April 22, 2018
Selain mesin pencari pengunjung juga dapat menilainya, terutama bagi para pengunjung gres atau dapat dikatakan kunjungan pertama mereka terhadapblog anda..
Jika blog mempunyai loading yang lambat ini akan menciptakan 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 instruksi tersebut tentu menciptakan blog lambat..
Jadi anda dapat meminifikasi ukuran file file tersebut supaya loading blog menjadi Lebih cepat
Apa yang Dimaksudkan untuk Meminimalkan dan Mengapa Bermanfaat untuk meningkatkan kecepatan?
Minify yaitu istilah pemrograman yang intinya berarti menghapus huruf yang tidak diperlukan.
Untuk meminimalkannya anda dapat :
- Baris kosong berwarna putih
- Komentar
- Garis gres karakter
Nah mungkin dapat kita mulai saja Langsung untuk melaksanakan Minify HTML CSS JavaScript
Cara minify HTML, CSS, JavaScript
Minify HTML
Pertama kita mulai dari minify HTML, Untuk kodenya kurang Lebih bentukannya menyerupai 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 abolisi instruksi menyerupai itu tida akan menciptakan template anda menjadi error Jika dilakukan secara benar..
Jadi setidaknya untuk melaksanakan minify anda mengerti Basic dari HTML.
Selain melkukan peghapusan jarak anda juga dapat melaksanakan abolisi terhada instruksi kode menyerupai ini..
<--! ...NamaKode .. --!>
Kode ini tidak berguna, hanya memberatkan saja
Masih kurang efektif? Baiklah kita coba untuk mencari instruksi menyerupai ini..
<!--</body>--></body>
Jika sudah ketemu pada template anda silahkan hapus dan ganti kodenya menjadi menyerupai ini :
<textarea readonly disabled style='display:none'> <!--</body>--> </textarea> </body>
Nah selesai ... Jika sudah mari kita Lanjut ke Langkah yang selanjutnya.
Minify CSS
Untuk melakukannya tidaklah jauh berbeda dengan melaksanakan minify HTML. Cara nya tetap sama dengan menghapus Jarak.
Untuk instruksi CSS Sendiri biasanya terletak pada pecahan Tag Kode <Style> atau .]]><b:skin>
Kurang lebih bentuknya menyerupai ini :
.Kotak.biru { display: block; background: white; position: z-index; width: 120%; float:none }
Kode diatas hanyalah contohNah selanjutnya Tinggal kita minify Lagi saja dengan melaksanakan penghpausan baris instruksi kode tersebut..
d
.Kotak.biru { display: block;background: white; position:z-index; width: 120%; float:none }d
Setelah itu cari Lagi instruksi menyerupai ini : /* ... /*
Contoh :
/*SyntaxHighligher/*
sebab tidak ada gunanya.. Terkecuali anda mempunyai template premium yang dapat mengedit tanpa harus masuk ke HTML Mode.Jika sudah kita lanjutkan ke langkah yang ketiga
Minify JavaScript
Java script memang sudah tidak dapat lagi dihilangkan dari suatu Blog atau website.. Dan JavaScript sendiri sudah menyerupai menjadi momok untuk para blogger..
JavaScript mempunyai ukuran yang besar.. Sekita 2-3 lebih besar dari pada HTML Dan CSS.. Jika tidak ada Java Script blog akan mengalami banyak sekali masalah..
Beberapa Penyebab Blog anda menjadi berat lantaran Java Script..
- JavaScript belum dikompress
- Penggunaan yang berelebihan
- JS Yang dihosting diluar
Lihat instruksi berikut ini :
**Kode mempunyai banyak Jarak.<script type='text/javascript'> var obj0=document.getElementById("post1 <data:post.id/>"); var obj1=document.getElementById("post2 <data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>
Sekarang kita minify dengan menghapus Jarak jarak tersebut..
<script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>
Mudah sekali bukan? ..
Oh ya bagi anda yang mengalami duduk kasus ini lantaran script eksternal khususnya jQuery, anda dapat mengatasinya dengan cara berikut.
Pertama, cari instruksi jQuery yang ada di blog anda. Kurang lebih bentuknya menyerupai 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 menyerupai ini:
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Gimana? Sangat gampang bukan?? anda dapat melihat hasil tamat dari blog yang sudah saya minify html dan Javascriptnya
Penutup
Gunakan instruksi kode menyerupai CSS Dan JavaScript seperlunya saja, Jangan berlebihan.. apalagi instruksi kode yang dipasang untuk dekorasi pada blog yang terbilang tidak penting..Selain memberatkan Pengunaan yang hiperbola dapat Mengganggu para pengunjung Blog.. Sekian Terimakasih