Percepat Loading blog dengan cara compress template





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.


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

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 ToolsOh 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!






Artikel Menarik Lainnya :



24 comments

avatar
06 July, 2013

Coba dulu mas .. :D

BalasHapus
avatar
06 July, 2013

trimakasih banyak mas yoyo akan saya coba mudah2an stabil...

BalasHapus
avatar
yoyo suharyo Author
06 July, 2013

monggo mas.. ati ati nyobanya..

BalasHapus
avatar
yoyo suharyo Author
06 July, 2013

sama sama gan.. semoga berhasil gan..

BalasHapus
avatar
07 July, 2013

makasih infox bro bermanfaat :D

gw belajar dari blog ente :D

www.lifes-and-healthy.blogspot.com

BalasHapus
avatar
yoyo suharyo Author
07 July, 2013

Sama gan, wah seneng banget ada yang belajar dari blog saya. padahal saya juga masih belajar dan hanya meneruskan postingan dari blog bahasa asing ke bahasa Indonesia..

BalasHapus
avatar
10 July, 2013

hehe, saya juga belajar banyak dari tulisan2 anda..
soalnya saya newbie...
banyak hal yang belum saya ketahui...

BalasHapus
avatar
yoyo suharyo Author
10 July, 2013

terima kasih teteh.. Alhamdulillah ternyata tulisan tulisan saya berguna

BalasHapus
avatar
27 July, 2013

terimakasih gan atas ilmunya
mampir juga http://roufcrack.blogspot.com/

BalasHapus
avatar
28 July, 2013

boleh juga.. ane coba dulu deh..

BalasHapus
avatar
yoyo suharyo Author
29 July, 2013

sama sama kang.. saya sudah meluncur barusan :)

BalasHapus
avatar
yoyo suharyo Author
29 July, 2013

sumangga kang.. awas ati-ati, backup template terlebih dahulu :D

BalasHapus
avatar
23 December, 2013

Wah Makasih Agan, Informasinya sangat Bermanfaat. Membuat Blogger saya 2x Lebih cepat, Nice kwkw

Salam Sahabat Blogger: http://kara1007.blogspot.com/ Kalau ada luang waktu mampir donk sob :)

BalasHapus
avatar
01 February, 2014

sangat bermanfaat gan....

BalasHapus
avatar
29 October, 2014

Thank's Gan Infonya.. Patut Di Coba Neh.. Btw Blog Agan Loading Cepet Bener Pakai Apa Ya Gan Biar Cepet Loading Nya.. Mohon Pencerahannya Ya Gan?? Thank's..

BalasHapus
avatar
12 December, 2014

Thanks infonya gan...

visit : http://animagnia.blogspot.com/

BalasHapus
This comment has been removed by the author.
avatar
10 February, 2015

terimakasih gan atas ilmunya
mampir juga http://arijumadi.co.vu

BalasHapus
avatar
25 February, 2015

maaf ap yg dmaksud ccs compressi itu cm buang spassi? sori newbie.

BalasHapus
avatar
29 March, 2015

makasih sob sudah dibuktikan di template blog saya
setelah css dan hrml dikompress ukuran template berkurang
walaupun cuma 9,5% tapi menurut saya sangat bermanfaat apalagi kalau pageviewnya banyak
silakan mampir http://www.pedialicious.web.id

BalasHapus
avatar
22 April, 2015

Bagus, http://penuhmakanan.blogspot.com/

BalasHapus
avatar
22 April, 2015

Bagus, http://penuhmakanan.blogspot.com/

BalasHapus
avatar
11 June, 2015

Yang untuk body mengurangi banyak, tapi merubah tampilan blog bro.

BalasHapus
avatar