Hi kawan, kali ini My-Techno akan share Tips/Cara untuk meringankan loading blog dengan Compress beberapa bagian dari template, seperti CSS, Script, Image, dan HTML.Sebenarnya Pengompressan ini hanya menghapus Spasi, Tab, Enter, karna di pemrosesan sebuah website/blog adalah hitungan per huruf/per kata, jadi pengurangan spasi pun itu dapat mengurangi ukuran loadingnya.
Sekarang kita bahas saja apa yang harus di Compress di dalam template sobat.
Compress CSS
Untuk mempercepat loading blog yang pertama yang harus dilakukan adalah dengan meng-Compress CSS, sebelum sobat melakukan proses peng-Compressan sebaiknya sobat membuat salinan tentang CSS yang mau sobat edit, agar nanti kalo terjadi kesalahan atau kerusakan pada tampilan bisa mengatasinya.My-Techno rekomendasikan umtuk tool Compress CSS-nya, sobat kunjungi CSS Drive dan pilih mana opsi yang Anda inginkan untuk kompresi (saya sarankan Super compact, dan strip all comments). Masukan dan submit CSS ke dalam style sheet (kotak CSS) yang ada, lalu akan terbuka halaman baru berisi CSS yang telah di kompresi.
Untuk CSS biasanya berada di antara tag <b:skin> dan </b:skin>, Copy-kan semua kode nya untuk dikompresi, Alhamdulillah My-Techno juga menggunakan cara tersebut dan berhasil.
Namun untuk blogger pemula mungkin agak bingung dengan hasil compressan tersebut. LIhatlah perbedaan kode CSS hasil kompresi.
#header h1{Setelah di Kompress hasilnya akan menjadi
margin:0 5px 0;
padding:0px 0 0 0px;
font-family:Arial,Helvetica,Sans-serif;
font-weight:bold;
font-size:41px;
color:#003B7A;
text-shadow:0 1px 0 #fff
}
#header .description{
padding-left:5px; color:#003B7A; font-size:12px;
}
#header h1 a, #header h1 a:visited{
color:#003B7A; text-decoration:none
}
#header h1{margin:0 5px 0;padding:0px 0 0 0px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;font-size:41px;color:#003B7A;text-shadow:0 1px 0 #fff}#header .description{padding-left:5px;color:#003B7A;font-size:12px}#header h1 a,#header h1 a:visited{color:#003B7A;text-decoration:none}
Compress HTML
Langkah kedua adalah meng-Compress kode HTML di dalam template sobat, biasanya kode HTML itu berada di antara kode <body> dan </body>, tetapi ada banyak kode yang terselip di sana. untuk mencari biasanya kode HTML itu seperti <div id='body-wrapper'> dan diakhiri </div>.Untuk compress HTML, kunjungi Text Fixer dan masukan semua kode HTML di Kolom yang di sediakan dan tekan Compress HTML
Compress Image
Langkah ke-tiga adalah meng-compress image/gambar. Simpan semua gambar blog Anda ke dalam satu folder, buat dua folder lagi dan pisahkan kumpulan gambar blog anda dengan ekstensi png dan jpg. Masuk ke compresspng untuk kompres gambar berekstensi png. Dan masuk ke compressjpg untuk kompres gambar berekstensi jpg. itu. Layanan tool kompresi gambar ini dibuat oleh Mediafox Marketing. Pilih gambar yang akan anda kompres dengan menekan select files. Lalu tekan tombol Upload Queue untuk mengupload gambar. Tunggu proses upload sampai selesai yang ditandai tanda ceklis pada gambar. Pilih gambar dan akan muncul option pengeditan di bagian bawah. Atur terserah anda optionnya. Tekan tombol selesai dan gambar akan otomatis terdownload.Compress JavaScript
Langkah terakhir adalah meng-compress javascript, biasanya seperti <script src='//www.google.com/jsapi' type='text/javascript'/> dan diakhiri dengan tag </script>.Nah kode seperti diataslah yang perlu di compress di JS Compress. tapi saya ingatkan lagi backup template anda sebelum di compress terutama untuk javascript, karena tidak semua code javascript akan berjalan dengan benar setelah di kompres
Cekidot Test gan (h)
ReplyDeleteMangga gan :>)
DeleteMungkin karena nubie jadi agak sulit mengcompress nya tapi informasi ini bermanfaat.
ReplyDelete