Kompres css Blog Agar Loading Blog Tidak Berat
Alasan saya menulis tentang kompres css blog agar loading blog tidak berat ini karena tadi waktu lagi iseng surfing kesana-kemari saya nemu blog (ramlantjong.com) yang pada salah satu postingannya membahas tentang “mengurangi jarak pada css agar gak berat”. Dari sana maka terbersit ide untuk menulis postingan tentang hal serupa yang berhubungan dengan mengurangi jarak css blog dengan tujuan agar loading blog menjadi ringan, namun berbeda dengan sobat ramlantjong.com yang hanya memberikan garis besarnya saja maka pada postingan ini saya ingin mengulasnya lebih dalam yaitu meng-kompres css dengan cara otomatis, bisa anda bayangkan kalau anda harus mengkompress css blog anda secara manual, upss benar-benar tidak efektif dan makan banyak waktu. Cara ini sudah lumayan lama saya terapkan, saya sendiri sampai lupa darimana sumber blog yang mengajarkan saya tentang kompres css blog ini.
Ariel nyeletuk : “Apakah benar pengaturan jarak dalam css berpengaruh terhadap kecepatan
loading blog ?”
Luna : “ Lha ? Mana gue tahu”
Yupps, saya sendiri juga ga’ tau apakah cara ini akan berhasil, satu-satunya alasan kenapa saya melakukan kompress css pada template blog saya adalah karena para ahli, master, dan para guru yang merekomendasikannya. Saya hanya menuruti apa yang pernah saya baca 3 tahun yang lalu.
Sebenarnya, satu hal yang pasti untuk mengatasi loading blog yang berat adalah dengan mengurangi beberapa widget blog yang kurang penting. Saya paham kalo anda pengen blog anda kelihatan keren, ciamik, cantik dan oke punya, tapi siapa yang akan melihat dan menikmatinya kalo pengunjung blog anda keburu ngacir begitu datang karena loading blog anda yang terlalu lama/berat. Saya tau ini berat karena saya salah satu orang yang suka menghiasi blog dengan widget yang ga’ ada gunanya sama sekali, contohnya widget kalender, “siapa yang butuh kalender !!?”
Halaaah kebanyakan ngomongnya, langsung aja deh berikut ini cara membuat ringan loading blog dengan mengkompres css template blog secara ‘otomatis’ :
1. Sebelum anda kebanyakan melancarkan aksi, lebih baik cek atau ukur dulu berat blog anda sehingga anda tau berapa lama loading blog anda, saya sendiri biasa menggunakan :
Ariel nanya lagi : “kenapa harus diukur ?”
Luna menjawab : “untuk jadi patokan ‘sebelum dan sesudah’ css blog kamu dikompres ntar”
2. Setelah mengukur loading blog anda, pikirkan kembali untuk menyingkirkan widget di blog anda yang tidak terlalu penting.
4. Masuk ke Rancangan >> Edit HTML
>> Bagi anda pengguna draft blogger yang baru maka bisa mengakses Edit HTML dengan cara :
>> Pada Address Bar ketik : http://draft.blogger.com/html?blogID=2330173393363331430
>> Ganti tulisan yang berwarna MERAH dengan blogID akun blogger anda
5. Klik "Download Template Lengkap" untuk mem-Back Up template anda, simpan juga semua kode css blog anda di notepad untuk jaga-jaga.
PENTING : Setelah dikompres nanti kode css template blog anda akan menjadi hampir tidak memiliki jarak, karena kompres css yang dilakukan disini prinsipnya adalah memadatkan/mengurangi jarak pada css blog, salah satunya adalah menghilangkan spasi pada kode css blog anda. Artinya hal ini akan membuat anda sedikit kurang nyaman atau pusing ketika akan kembali meng-editnya kelak. Karena itulah back-up sangat diperlukan disini.
6. Centang kotak Expand Template Widget
7. Cari (Ctrl+F) kode : <b:skin><![CDATA[/*
Perhatikan di bawah kode tersebut, jika css blog anda tidak mengandung "tag variable definitions" seperti di bawah ini :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
----------------------------------------------- */
/* Use this with templates.html */
body#layout #subscription,body#layout #topsearch,body#layout #footer,body#layout #footer2 {display:none;}*{margin:0;padding:0}#
/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6 bla-bla-bla
maka AMBIL semua kode CSS dari setelah kode <b:skin><![CDATA[/* sampai pada kode sebelum ]]></b:skin>
CONTOH :
<b:skin><![CDATA[/*
| AMBIL DARI SINI
.....................
SAMPAI DISINI | ]]></b:skin>
| AMBIL DARI SINI
.....................
SAMPAI DISINI | ]]></b:skin>
Namun jika tepat di bawah kode <b:skin><![CDATA[/* terdapat "tag variable definitions" seperti di bawah ini :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla bla bla bla...
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#000000"/>
bla bla bla bla...
PERHATIKAN tag Variable definitions tersebut dan JANGAN DI IKUT SERTAKAN UNTUK DI KOMPRES !! Jika dilihat dengan seksama maka "anak dari tag Variable Definitions" memiliki bentuk penulisan kode seperti ini :<Variable name="keycolor" dst.. . Nah perhatikan saja kode-kode dengan penamaan seperti itu untuk diabaikan lalu ambil kode tepat di bawah setelah tag variable definitions tersebut berakhir.
CONTOH :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla-bla-bla..
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla-bla-bla..
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
| AMBIL DARI SINI
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
SAMPAI DISINI | ]]></b:skin>
8. Buka dan kompres kode-kode tersebut di situs : [CSS compressor]
9. Ganti settingan compress css menjadi seperti ini :
- Compression mode = pilih 'Super Compact'
- Comments handling = pilih 'Strip ALL comments'
Kemudian klik "Compress-it!
10. Kemudian tempatkan hasil kompresannya di tempat semula kode itu berasal.
CONTOH :
<b:skin><![CDATA[/* |TARUH DISINI
..................... SAMPAI DISINI |
]]></b:skin>
..................... SAMPAI DISINI |
]]></b:skin>
11. Masih belum selesai, sekarang cari kode <body> atau </head>
kemudian AMBIL semua kode setelah <body> atau </head> hingga sebelum </body>
CONTOH :
<body> |AMBIL DARI SINI
..................... SAMPAI DISINI | </body>
..................... SAMPAI DISINI | </body>
13. Copy paste-kan kode hasil kompresan tersebut ditempat semula yaitu diantara setelah kode <BODY> hingga sebelum kode </BODY>
CONTOH :
<body> |TARUH DISINI ..................... SAMPAI DISINI | </body>
14. Klik >> Simpan
15. Ukur kembali berat loading blog anda, cara menimbang berat loading template anda masih sama seperti cara di atas, buka saja salah satu website pengukur loading blog berikut ini :
”horeeeee” Ariel bersorak kegirangan seolah baru bebas dari penjara.
“ono opo kangmas?” tanya Luna
“Ini lho, loading blog-ku pasti jadi secepat kilat setelah dikompres.” jawab Ariel
“ngimpiiiiiii kaleeeee” cibir Luna
Ariel garuk-garuk kepala : “Emangnya kenapa?”
Luna menghela napas : “Kompres kode css yang barusan kangmas laku’in ga’ terlalu berdampak besar terhadap loading blog, coba deh lihat berapa persentase hasil dari kompres tersebut”
Ariel : “Hmmm, cuma 4,2% doank”
Luna : “Nah lho”
Menyimak perrcakapan tidak penting antara Ariel dan Luna di atas, bisa disimpulkan bahwa compress css blog yang baru saja anda terapkan tidak menjamin blog anda akan menjadi secepat kilat dalam seketika. Intinya dalam melakukan kompress css pada blog ini adalah untuk memaksimalkan/optimasi semua hal yang berhubungan dengan css template di blog anda dengan tujuan sebagai salah satu cara untuk membuat loading blog menjadi ringan. Mungkin hasilnya tidak terlalu signifikan, tapi setidaknya kita sudah berusaha semaksimal mungkin, seperti kata Ariel berikut ini : “Namanya juga usaha….”
Intinya, agar blog tidak berat adalah memperhatikan bagaimana penampilan blog anda, tidak ada langkah yang lebih jitu untuk mempercepat loading blog selain memperhatikan apa yang memang anda tampilkan. Gambar, iklan (PPC), banner, semuanya dapat membuat loading blog menjadi berat, jadi perlakukan blog anda dengan bijak.
TIPS : Cobalah untuk selalu mem back-up dulu template anda sebelum di utak-atik sekedar untuk berjaga-jaga. Gunakan juga tombol Preview/Pratinjau sebelum menyimpan template yang baru saja anda edit, dengan begitu anda sudah berusaha untuk meminimalisir resiko jika terjadi kesalahan dalam pengeditan.
Kompress css TIDAK MERUBAH CSS TEMPLATE BLOG ANDA ! Melainkan hanya mengatur kembali penulisan css anda ke dalam bentuk yang padat dan ringkas, jadi kalo dalam pengaplikasian tutorial ini anda masih menemukan pesan error berarti bukan kompressnya yang bermasalah melainkan (mungkin) karena anda kurang berhati-hati selama proses pengambilan dan penempatan kembali kode yang di kompres. Sekian, dan semoga artikel “kompres css blog agar loading blog tidak berat” ini bisa bermanfaat bagi sobat blogger. Tags: loading blog, kompres css, kompres css template, compress css blogger, kompres css untuk mempercepat loading blog, css agar blog tidak berat, compress css agar blog ringan, compress css agar blog tidak berat, mempercepat loading blog, template blog ringan |
 | Setiap tutorial atau file download yang Anda temukan pada blog ini bebas digunakan untuk apapun sesuai dg keinginan anda, baik dengan maupun tanpa kredit ke blog ini. Tentang | Profil Google | Profil Blogger | Berlangganan via email |
Anda dapat meninggalkan komentar, atau trackback dari blog anda.
terima kasih gan buat infonya...
di tunggu kunjungan baliknya..
http://xmantan.blogspot.com
Terima kasih jg sdh berkunjung kemari..
happy blogging :D
@ Asmara Susanto : yang dikompres ckup yg dibawah skin aja sob, kode diatas skin seperti meta-tag,meta-content ga' perlu dikompres. simplenya nih : cukup ambil dari bawah skin(pembuka) sampai diatas skin(penutup);;(kode "skin" tidak termasuk.)
semoga membantu
wah itu sama aj sob,,
Baca juga yang ini nih sob : http://panduan-info.blogspot.com/2011/08/firebug-pagespeed-analisa-performa-blog.html
mdh2an membantu :D
tampilan blog ku berubah jadi versi teks semua bro setelah compress ! untung i backup
keren infonya brow.....lain kali ane berkunjung lagi ah ke blog ini
ijin gan....
pengen coba tipsnya abis blog sy msih berat sangat....
ijin gan....
pengen coba tipsnya abis blog sy msih berat sangat....
keren infonya,..
lagsung ke tkp
erorrrrr...
nurul : Silahkan di baca kembali, tutorial di atas sudah saya beri tambahan yang mungkin bs membantu.Saya cm bisa menebak sepertinya anda menyertakan tag variable definitions untuk dikompres jg yg akhirnya menyebabkan css blog anda tidak dpt dibaca.
ketika mengubah di head dan body :( templateku berubah
seep gan...
sukses koq...
buat temen² yg gagal...
sekali lagi BACA yg TELITI dan IKUTI dengan TERATUR caranya....
salam dari siomponk.com
Saya sudah mencobanya berulang kali dan tetap sukses, silahkan dibaca kembali poin ke 7 dg lebih cermat. semoga membantu dan terima kasih atas kunjungannya :D
Terima kasih Sob atas infonya,,,
Izin Copas Ya Buat Tambah Tambah Posting ... :D
hehehe..
Happy Blogging...
@╚══█▓▒╣ NAUFAL PRIBADI ╠▒▓█══╝ Oke oke om.. silahkan dicopas, semoga sukses..:D
thanks sobat, informasinya sangat bermanfaat.....
sukses slalu gan...
nice info
Mantab gan artikelnya, JELAS abis!!!
Satu yang guwe suka.
Gaya bahasa elu dan selera humor lu bagus gan!!!
wkwkwkw :D
gan thank,s banget neh.. udah w coba lumayan deh. berhasiiiil... cuma w mo nanya gan tanda ( --> ) di pojok kiri paling atas di ilanginnya gimana gan? w udah cari-cari gak ketemu tuh tanda yang salah prosedur itu. Thank's
iJin NyiMak Gan,,,,
Cobak terapkan TapY mata Pee Sakiiit niie
hehe