Banyak developments baru yang muncul terus bergantian di bidang Web Development, banyak peluang baru sekarang tersedia untuk lebih mengoptimalkan halaman blog Anda, saat halaman anda memuat Java Script yang memberatkan loading dan coding sulit bagi orang baru. Dengan menggunakan Kompresi merupakan salah satu cara utama untuk menghilangkan masalah java script, coding, dan akan mempercepat loading blog. Sebenernya sudah banyak postingan untuk tips dan cara mempercepat loading. Saya harap anda juga membacanya supaya lebih mengoptimalkan loading blog anda. Diantaranya :
Sebelumnya anda harus mengetahui apa sih yang dimaksud dengan kompresi ? dalam bahasa inggisnya kita lebih mengenal Compress. Kompresi dalam artian file yaitu memperkecil ukuran file dengan mengurangi kualitas atau kuantitas isi dari file tersebut. Kalau kompresi dalam artian blogger yaitu memperkecil ukuran sebuah kode (template) dengan cara mengurangi spasi, baris, dan kode yang tidak terpakai (kode sampah). Bagaimana sudah mengertikah anda tentang apa yang dimaksud dengan kompresi ? Untuk lebih jelas ikuti saja tutorial dibawah dan lihat hasilnya nanti.
Note: Jangan lupa untuk membackup template anda terlebih dahulu, sebagai jaga-jaga jika terjadi kesalahan. Dibawah ini, tutorial dibagi menjadi empat, yaitu kompresi CSS, kompresi HTML, kompresi Java/script, dan kompresi gambar. Jika anda ingin mengkompresi salah satu kode dari (misalnya) CSS. jangan lupa backup dulu kode css itu kedalam notepad atau apapun itu.
Sebelumnya anda harus mengetahui apa sih yang dimaksud dengan kompresi ? dalam bahasa inggisnya kita lebih mengenal Compress. Kompresi dalam artian file yaitu memperkecil ukuran file dengan mengurangi kualitas atau kuantitas isi dari file tersebut. Kalau kompresi dalam artian blogger yaitu memperkecil ukuran sebuah kode (template) dengan cara mengurangi spasi, baris, dan kode yang tidak terpakai (kode sampah). Bagaimana sudah mengertikah anda tentang apa yang dimaksud dengan kompresi ? Untuk lebih jelas ikuti saja tutorial dibawah dan lihat hasilnya nanti.
Note: Jangan lupa untuk membackup template anda terlebih dahulu, sebagai jaga-jaga jika terjadi kesalahan. Dibawah ini, tutorial dibagi menjadi empat, yaitu kompresi CSS, kompresi HTML, kompresi Java/script, dan kompresi gambar. Jika anda ingin mengkompresi salah satu kode dari (misalnya) CSS. jangan lupa backup dulu kode css itu kedalam notepad atau apapun itu.
CSS Compression:
Mengurangi ukuran halaman bertujuan untuk mengurangi waktu loading saat situs dibuka dan membuat halaman web Anda lebih SEO friendly. Langkah pertama adalah untuk kompres CSS Anda. Saya akan rekomendasikan anda untuk membuat satu salinan untuk diedit lagi nanti, dan satu salinan untuk dikompresi. Pergi ke 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 diantara <b:skin> dan </b:skin>. Masukan semua kode diantara kedua kode tersebut. Saya juga melakukan hal yang sama. Dan alhamdullilah tidak terjadi sesuatu yang merubah kondisi desain blog saya. Mungkin bagi yang baru berkecimpung di dunian blogging akan sedikit kesulitan membaca kode CSS hasil dari kompresi. Lihat perubahan kode yang terjadi setelah kompresi.
Untuk CSS biasanya berada diantara <b:skin> dan </b:skin>. Masukan semua kode diantara kedua kode tersebut. Saya juga melakukan hal yang sama. Dan alhamdullilah tidak terjadi sesuatu yang merubah kondisi desain blog saya. Mungkin bagi yang baru berkecimpung di dunian blogging akan sedikit kesulitan membaca kode CSS hasil dari kompresi. Lihat perubahan kode yang terjadi setelah kompresi.
#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
}
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
}
Jika setelah dikompresi akan menjadi seperti ini : (menjadi satu paragraf dan tanpa baris/enter)
#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}
HTML Compression
Langkah kedua, kita akan kompres kode HTML pada template. Buka Text Fixer. Untuk mengetahui kode HTML di template, biasanya terletak diantara kode <body> dan </body>. Tapi diantara kode tersebut biasanya terselip beberapa kode Javascript. Misalnya Javascript dari komentar blogger, dari page number dan sebagainya. Jada saya sarankan satu persatu, tidak langsung semuanya dicopy. Kode HTML biasanya diawali dengan kode < , misalnya saja <div id="header" class="header"> dan nanti akan diakhiri </div>.
Simpan seluruh HTML Anda di kolom yang tersedian di Text Fixer. Setelah itu klik tombol Compress HTML. Seperti CSS compression, cara kerjanya hanya menghapus semua double spasi, tab, line breaks (baris) dll. Namun, untuk keperluan editing, saya akan tetap menyarankan untuk membuat salinan sebagai jaga-jaga terjadi kerusakan.
Simpan seluruh HTML Anda di kolom yang tersedian di Text Fixer. Setelah itu klik tombol Compress HTML. Seperti CSS compression, cara kerjanya hanya menghapus semua double spasi, tab, line breaks (baris) dll. Namun, untuk keperluan editing, saya akan tetap menyarankan untuk membuat salinan sebagai jaga-jaga terjadi kerusakan.
Image Compression
Langkah berikutnya adalah untuk kompres 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 compresspnguntuk 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.
JavaScript Compression
Langkah terakhir adalah mengkompress JavaScript. Untuk mencari Java script di template anda gunakan fungsi CTRL + F dan cari kode <script type='text/javascript'>. Setiap kode JavaScript diawali dengan kode <script type='text/javascript'> dan diakhiri dengan kode </script>. Masuk ke JS Compress. Simpan kode JavaScript pada kolom yang tersedia dan tekan tombol compress. Tunggu loading dan hasilnya akan muncul. Ingat, tidak semua java script akan bekerja kembali seperti fungsi awalnya (tidak working). Jadi berhati-hatilah dan backup terlebih dahulu ! Oke ? :D
.jpg)
0 komentar:
Posting Komentar