Percepat Loading Blog dengan Optimalisasi/Kompres CSS

CSS Compression-Kompresi CSS, Percepat Loading Blog
Apa hubungan CSS dengan load time (waktu muat) halaman blog? Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.
Setelah ganti template beberapa waktu yang lalu, masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan  kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang kedua, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO lemah.
Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya).
Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.
Lalu bagaimana cara mengurangi ukuran file CSSnya?

1. Lakukan Editing CSS Secara Manual.
Ada beberapa contoh aturan berikut ini:
Misalnya aturan pada header-wrapper,
#header-wrapper {
background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}
Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:
#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}
Pada contoh styling berikut:
{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }
Style margin di atas dapat kita rampingkan dengan CSS short-hand dan mengurangi spacenya:
{Margin:15px 10px;}
Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, sudah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan? ^^ Untuk melakukan cara-cara lain dan jika tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online
Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:
Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:
a. Copy semua aturan CSS dari template HTML/XML.
b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.
c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.
d. Download backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.
Clue
Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.
Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.
Semoga bermanfaat dan Good luck.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Percepat Loading Blog dengan Optimalisasi/Kompres CSS
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 50 Comment(s):

diarykudiblog said...

kalo saya biasa pake online yui css/javascript compressor lbh simple mas. Thanks ya

Unknown said...

@ diarykudiblog: oke, bro. trimakasih buat tambahan referensinya. Thanks dah mampir dan commenting...

Avizena Ridwan said...

tapi q koq masih bingung mas ya.., kalau misalnya di html nya di header waper gak ada ukuran high nya cuman width aja, padahal q pingin mengurangi highnya itu, gmn?

Unknown said...

@ Avizena Ridwan : langsung dikasi aja, di override, jadi kalo gada heightnya, dikasi sendiri. itu nantinya akan meng-override default css-nya. oke? good luck,,kasih tau kalo sudah berhasil. :P

qudrat said...

Ini informasi yang saya cari, terima kasih atas sharing ilmunya, akan saya coba terapkan di Blog saya, Oya kapan2 datang ya ke Blog saya di :
http://qudrat-inspirasi.blogspot.com
Salam.....

bar said...
This comment has been removed by the author.
Share With Irfan said...

Wah..makasih ilmunya mas, mau dicoba dulu sepertinya blog saya sudah mulai berat loadingnya nih !

attarbiyah said...

info yang sangat menarik...hanya sayangnya saya belum paham/nggak ngerti dengan bahasa pemrogramannya..nggak ngeh sama sekali..untuk belajar bahasa pemrogramannya saya harus belajar apa ya mas? duh ternyata pengetahuan saya belum ada apa-apanya..desain blog saya pun masih bawaan dari bloggernya hehe..kapan2 kalau ada waktu lihat ke blog saya dan ditunggu arahan/bimbingannya ya mas...wassalamu'alaikum

Unknown said...

@Irfan: Yup silahkan dicoba bro.

@Attarbiyah: Ini sama sekali tidak berkaitan dengan bahasa pemrograman, karena programnya adalah browser, sedangkan kode hanyalah bahasa yg dibaca oleh bwser agar menampilkan struktur (HTML, PHP, ASP, ASPX, dll), fungsi (javascript), dan yang berkaitan dengan di atas adalah style tampilan (CSS). Mudah kok. Untuk memulai belajar, silahkan kunjungi w3schools.com.

SERIBU PERNAK PERNIK PONSEL ANDROID said...

MANTAPP mas... lengkap beneer dah...
mkasih..

Ahmad Halim Sholeh said...

uda di cek di iwebtool speed test n loadingnya cepat, tapi tanda loading terus berputar gimana itu agar tanda loadingna tidak terus berputar? solusinya,
silahkan di cek http://sekedarwawasan.blogspot.com/

Unknown said...

itu hanya karena browser dan loading internet anda saja. prosesnya sudah selesai. tanda loading itu adalah gambar gif, seharusnya jika proses selesai dia hilang. tapi karena faktor browser dan koneksi, tanda itu gak hilang.

Unknown said...

banyak sekali caranya jadi bingung mau pilih yang mana

Solichin Toip Musik said...

Salam kenal. Tutorialnya sgt membantu gan.

Mas Lihin (Solichin Toip ) said...

Sy sdh cb test pake Pingdom Tools. Cara mencari & menghapus file yg bertanda seru (!) gmn, Gan? Tlg bantu yh ?

unik dan menarik said...

om yang di copy semua yang di html atau bukan..abis sya compress.. trs sya paste, di save kq ga mau ya? errol xml gt..

Dilla AS said...

bagaimana dengan padding, apakah sama juga cara dan aturan penulisannya?, btw bedanya margin dan padding dimana yaH?

Unknown said...

@Dilla: Liat referensi tentang CSS padding & margin disini:
http://buka-rahasia.blogspot.com/2011/01/mengenal-elemen-elemen-wrapper-css-di.html
http://buka-rahasia.blogspot.com/2011/08/modifikasi-tampilan-header-sidebar-blog.html

Jackysan Dofollow said...

Saya biasa pake css compressor kang... hasilnya lumayan mantab meski pake yg standard compression..
utk ngecheck kecepatan loading enaknya pake gtmetrix ato tools.pingdom.com?

waloetz said...

oohh berarti spasi cukup mempengaruhi juga ya mas ??

kalo javascript gmna mas ? apakah mempengaruhi load juga ?
sya ada beberapa widget menggunakan javascripst...

Yudo Wijaya said...

ribet caranya ?

Lust & Love said...

nice share... thank u

Agung Talaga said...

Untuk sementara saya mau coba dulu cara yg pertama di blogq dan untuk cara2 yg berikutnya, nanti saya coba kalo sdh seleai saya coba lakukan cara2 yg pertama. makasih ya atas infonya.....

Unknown said...

ko pke css compressor hasilnya template malah jdi acak-acakan ya?

Johny said...
This comment has been removed by the author.
ninik said...

sy jg mau berbagi pengalaman om & ini didpat dr diri sendiri & jg teman2 blogger lainx.., cara compress CSS diatas katanya justru akan merusak CSS.., cz ada sebagian kode2 CSS yang dimatikan.., kyk kemarin2 slider sy gk berjalan & msh bnyk kode2 CSS lainx yg gk berfungsi...
mohon solusi thanks

Unknown said...

@ninik: benar yang anda, makanya saya cenderung menomorsatukan cara manual.

Adhi Ibra said...

saya sudah mencobanya dengan cara manual gan, thank's infonya.

Nasruddin said...

Terima kasih om atas tipsnya, saya berhasil...

sniper said...

mksih tipsnya :)

siapa aja boleh said...

thanks gan infonya bwat ane ini sngat berarti.......

Unknown said...

terimakasih atas artikelnya,izin copas untuk menambah sumber saya sertakan LInk Anda di blog saya .. sukses selalu ..

Unknown said...

gan, kalo mau di edit secara manual tuh, prinsip-prinsipnya apa aja?

Unknown said...

gan ijin copas ya? artikelnya bermanfaat banget :D ntar ak edit dkit pake bahasaku, & ak sertain Link abang :D

http://tak-atik-blog.blogspot.com/

Indraka said...

Artikelnya sangat bermanfaat :) thanks gan sudah share
Indrek's Blog

belajar said...

tool kompress onlin di atas tuh yg paling bagus yg mana om...?

Odingk said...

Terimakasih infonyaaa,,, ini sangat bermanfaat skali bagi newbie seperti saya,,,...

abang said...

sekedar berbagi,
untungnya blog saya beratnya masih terbilang aman.

Batuahku said...

besar halaman homepage ane 15,27kb, itu menurut mas sudah kecil atau masih besar?!

Fauzie said...

thanks gan.. dgn smua artikel agan saya bnyak terbantu... mohon kritik dan saran agan dgn blog saya sbb SEO saya gak naik2, (newbe gan) hehehe,

Unknown said...

mas azmi.. kira2 dengan mengkompres css ada pengaruhnya negatif tidak? klau mang ada, kira2 pengaruh negatifnya apa mas? soalnya saya masih ragu2 melakukan itu.
mohon pencerahannya mas azmi.
n makasih sebelum na.

Unknown said...

@all: kompresi CSS memang gampang-gampang susah. Kalo pake tool emang biasanya banyak yang harus dibenerin lagi karena ada beberapa yang salah merampingkan (kelemahan tool disini). Oleh karena itu saya tidak menyarankan secara penuh cara ini.
Cara kompresi CSS paling bagus adalah manual. Tapi sobat harus mengerti dasar-dasar bahasa CSS dan konsep CSS shorthand. Jadi bagi yang belum menguasai, saya sarankan maksimalkan konten blog dulu, sebelum mengutak-atik CSS. Misalnya, yang paling berat biasanya adalah gambar, maka lakukan kompresi gambar. Ada banyak tool online untuk melakukan ini dan mudah.
Mengenai kompresi CSS, ke depan akan saya tuliskan mengenai konsep2 dasar CSS dan CSS shorthand secara lebih detil sehingga sobat mendapat masukan kompresi CSS secara manual.

Semua browser sekarang sudah canggih, sehingga bisa membaca kode apapun tanpa adanya spasi (white space), dan mampu membaca semua CSS shorthand. Jadi tidak ada efek buruk jika CSS dirampingkan. Tapi ya itu tadi, ketahui dahulu dasar-dara CSS agar bisa mengedit secara manual, karena pake tool banyak tidak akuratnya.

Unknown said...

ijin nyoba ilmunya mas,habs gnti tmplate bener-bener berat loadnya.

Anonymous said...

Ini yang saya cari2,, blog saya lagi berat2'nya jadi mesti di kompress..

Unknown said...

Mohon pencerahannya, menurut mas blog saya idbloggertrick(dot)blogspot(dot)com gimana ? apakah ada kekurangan yang parah ( dalam kecepatan blog ? dan maksudnya HTTPS request itu gimana ?

Unknown said...

http request itu intinya jumlah request ke server. Kalo saya cek sih tidak begitu berat, tapi saya pake satelit jadi tidak terasa bebannya. Coba dicek dengan tool2 untuk mengecek berat blog, ada banyak cari di google.

Anonymous said...

info yang sangat menarik...hanya sayangnya saya belum paham/nggak ngerti dengan bahasa pemrogramannya..nggak ngeh sama sekali..untuk belajar bahasa pemrogramannya saya harus belajar apa ya mas? duh ternyata pengetahuan saya belum ada apa-apanya..desain blog saya pun masih bawaan dari bloggernya hehe..kapan2 kalau ada waktu lihat ke blog saya dan ditunggu arahan/bimbingannya ya mas...wassalamu'alaikum

Gigih Kurniawan said...

thanks infonya, semoga blog saya semakin cepattt. ;)

Produksi Sukabumi said...

ok sip thanks gan

Unknown said...

info yang sangat baik, terimakasih atas info nya, sekarang blog saya jadi lebih cepat loading nya

terimakasih juragan..

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap