Beranda  ›  Blogger  ›  Tips Blogger  ›  Tutorial Blog

Percepat Loading blog dengan cara compress template

by -
percepat-loading-blogBanyak 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 :

-  Cara upload File, CSS, Java Script pada Google Drive dengan benar. 
-  Tips dan cara mempercepat loading blog
-  6 tips optimalkan gambar guna meningkatkan traffik blog

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.

Related:Cara membuat Twitter Fans Box melayang
 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.
#header h1{
margin:0 5px 0;
Related:Cara membuat animasi burung twitter di blog
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
}
Related:Cara memasang Widget Recent Tweet melayang
#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)

Related:Cara membuat widget Email Subscription [4 style]
#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.

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 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.

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

Last Words

Bagaimana? cukup mudahkan cara-cara diatas? Jadi intinya, semua proses kompresi diatas mempunyai cara kerja yang sama yaitu menghapus line breaks (baris), menghapus tab, menghapus spasi dan sebagainya. Itu karena line breaks, spasi dan tab menambah ukuran loading blog anda. Coba saja download template anda sebelum di kompresi dan sesudah dikompresi. Ukurannya akan berbada. Cek kecepatan loading blog anda di Pingdom Tools. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya ! 

Sekian post tentang Percepat Loading blog dengan cara compress template. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Percepat Loading blog dengan cara compress template. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close