bagaimana caranya? blogging

Cara Meng Kompres CSS Pada Blog Agar Loading Blog Makin Cepat

15:08 Ardiya


Beginilah 
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 terlalulama/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 bloganda yang tidak terlalu penting.

3.  Login ke akun blogger anda.

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


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

<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"/>

*/

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

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>

12. Selanjutnya buka dan kompres kode-kode tersebut di : [HTML Optimizer]

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’ terlaluberdampak 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 bahwacompress 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 untukmemaksimalkan/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.Senyum kutu buku


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.


sumber:http://panduan-info.blogspot.com/2011/07/mempercepat-loading-blog-kompres-css.html Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...

You Might Also Like

20 comments

  1. Anonymous7 February 2012 at 15:14

    Wah Trik Ini Berhasil Di situs Saya ,hebat sob!

    ReplyDelete
  2. Rina As4 March 2012 at 19:29

    Blog saya belum sekalipun di kompress css-nya, ini membuat loading blog tetap lambat
    trims atas tutorial di atas, mohon izin untuk mem-bookmark

    ReplyDelete
  3. Ardiya5 March 2012 at 17:55

    yah gapapa di bookmark moga bermanfaat ya !kecepatan blog mungkin lebih cepat 4% saja

    ReplyDelete
  4. Fauzy11 March 2012 at 07:36

    Ctrl+D dlu sob,, makasih infonya yah ..

    ReplyDelete
  5. Eka2 April 2012 at 01:29

    makasih tutorialnya sobat, sangat membantu sekali ... :)

    ReplyDelete
  6. AbduGreen-Blog7 April 2012 at 06:40

    Info Yang bagus.. mampir ya sob..

    ReplyDelete
  7. Johny14 April 2012 at 15:06

    makasih banyak gan...
    saya masih newbie banget nih di dunia blog. baru 2 minggu ...dan langsung mraktekkin.dan hasilnya dari 395.00 kb/0.59 s
    jadi 307.64 kb /0.43 s
    makasih ya....
    kalau ada kesempatan blogwalking saya ya..
    kritik dan sarannya yang positif saya tunggu, maklum masih newbie.... :)))))))

    ReplyDelete
  8. DriZZling26 April 2012 at 15:41

    Manntabzz , terimakasih ...
    Indonesia kembali memiliki orang yang saling berbagi ilmu dan ilmunya hebat

    ReplyDelete
  9. Anonymous28 May 2012 at 20:44

    makasih infonya, saya belum dikompress

    ReplyDelete
  10. Darmawan Saputra14 June 2012 at 17:28

    terima kasih atas artikel yg bermanfaat ini..

    ReplyDelete
  11. Ardiya20 June 2012 at 15:32

    trims semua teman yang sudah komen di Blog Ini jangan lupa klik iklannya ya ..

    ReplyDelete
  12. Bobby Pangeran Kodok27 June 2012 at 23:56

    waah..Nice Info gan,, soal nya Site ane berat banget.. :D

    ReplyDelete
  13. belajar1 August 2012 at 22:07

    sudah ane kompress om,,dan ane cek ternyata super fast haha

    ReplyDelete
  14. Faiq Noor18 August 2012 at 10:07

    terima kasih udah saya coba dan berhasil.. :)

    ReplyDelete
  15. Ardiya18 August 2012 at 13:37

    Tetep semangat blogging ya... Makasih yang dah komen .. kalo ada info lebih share lagi kesini ya!

    ReplyDelete
  16. Asih Pujiariani15 September 2012 at 19:40

    Sangat bermanfaat

    Salam kenal dan tolong kasih pendapat tentang tampilan blog ku dong! Apakah sudah cukup oke?
    http://artikel-kependidikan.blogspot.com/
    thx b4

    ReplyDelete
  17. Newbiexpose24 November 2012 at 17:38

    bagus banget gan, tapi masih saja sy belum berhasil....

    ReplyDelete
  18. Admin7 September 2013 at 03:58

    Artikel yang sangat membantu sob....

    Ohya cuman sedikit menambahkan... Untuk mengompres CSS anda tidak usah kawatir... Ada Monster yang akan sangat memanjakan anda di sini http://www.upzzzz.com/2013/08/compresor-beautify-full-css-code.html

    Monster itu Multi Fungsi, yang pertama akan mengompres Css anda, Kemudian Hebatnya lagi dia bisa Mengembalikan CSS yang sudah terkompres Menjadi Cantik Kembali balik dalam keadaan seperti semula....

    Jadi mungkin bagi sahabat yang CSS nya Sudah Terkompres sulit untuk di edit lagi silahkan menggunakan monster itu secara auto CSS anda akan di tata seperti semula

    ReplyDelete
  19. Ardiya8 September 2013 at 10:57

    info yang bagus lutfi.. thanks ya

    ReplyDelete
  20. Baru Tahu Belajar Kompress30 June 2014 at 23:05

    Wah baru tahu saya ternyata ada tips seperti ini yah untuk mempercepat loading halaman blog,,, terima kasih ..

    ReplyDelete

boleh komen ,asal pakai hati ya...dan blog ini sudah dofollow

note:blog ini tidak membatasi orang yang berkomentar dengan nama Anonymous, seperti blog yang lain,jadi silahkan berkomentar sesuka hati ..!

Popular Posts

Contact Form