10/18/09

Compress CSS Sebagai Upaya Optimasi Blog.


Masih sekitar Berat Blog atau Blog yang Ringan, kali ini  tentang upaya agar blog kita gak terlalu berat sehingga Loading Blog nya agak cepat dan salah satu cara untuk itu yaitu dengan mengkompress CSS, untuk itulah kali ini sengaja saya posting  tentang Compress CSS Sebagai Upaya Optimasi Blog .

Oh ya kalau ada yang masih bingung dengan CSS, baiklah CSS itu kependekan dari Cascading Style Sheet yaitu   sebuah bahasa pemograman atau dokument yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web atau blog. Salah satu cara optimasinya adalah dengan mengkompresnya agar  ukurannya menjadi lebih kecil , sehingga tidak terlalu membebani loading blog, dengan demikian diharapkan loading blog menjadi lebih cepat lagi karena sizenya telah berkurang setelah di compress. Gitu lho ceritanya….


Langkah atau cara Compress CSS Sebagai Upaya Optimasi Blog adalah sebagai berikut :


  1. Login ke Blogger lalu pilih Lay Out dan klik Edit HMTL


  2. Jangan lupa backup template dulu dengan Download Full Template , siapa tahu nanti malah berantakan.


  3. Cari kode CSS nya , biasanya terletak antara kode :<b:skin><![CDATA[/*  dan  ]]></b:skin>


  4. Kalau CSS nya sudah ketemu tinggal di blok , lalu ambil atau Cut ( klik kanan Mouse anda lalu Cut ) dan simpan dulu di Notepad , akan lebih baik lagi bila notepadnya di save sebagai backup , siapa tahu  nanti diperlukan lagi. 


  5. Jika sudah baru kita masuk ke CSSdrive.com untuk mengkompresnya, disitu akan ada kotak bertuliskan Insert CSS Code


  6. Copy CSS yang tadi disimpan di Notepad tersebut kemudian pastekan ke kotak Insert CSS Code.


  7. Nanti ada beberapa pilihan seperti di bawah ini : (Untuk pemula sebaiknya pilih Light dan Don strip any comments saja dulu , supaya masih tetap terbaca jika nanti kita mau utak-atik-utek CSS lagi).


    Compression mode: (?)

    Light
    Normal
    Super Compact


    Comments handling: (?)
    Don't strip any comments
    Strip ALL comments
    Strip comments at least  chars long (NOT counting line breaks within comment)


  8. Klik Compress it yang ada dibawah kotak tersebut
  9. Tunggu sebentar sampai proses compress selesai , kalau dah selesai dibawahnya suka ada keterangan seperti ini :


    Compression results

    Original size: 14487 bytes

    Compressed size: 12357 bytes

    Savings: 2130 bytes (15%)

  10. Copy hasil compress tersebut dan pastekan ke tempatnya semula yaitu antara : <b:skin><![CDATA[/*  dan  ]]></b:skin>
  11. Jika semua sudah selesai jangan lupa Save Templates
  12. Selesai , selamat mencoba untuk Compress CSS Sebagai Upaya Optimasi Blog
  13. Jika mau tahu Seberapa Berat Blog Sobat, Klik aja Posyandu



  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Compress CSS Sebagai Upaya Optimasi Blog., bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

78 comments:

  1. (maaf) izin mengamankan PERTAMA dulu. Boleh kan?!
    Info yang bagus, nih. Walau urusan CSS gak ada sangkut pautnya dengan blog WP saya yang gratisan tetapi lumayanlah nambah pengetahuan. Biar bisa kayak ahli.
    Wakakakakaak

    ReplyDelete
  2. wah hebat informasinya,,trims sobat,,nyoba ahh,,,

    ReplyDelete
  3. @ Alamendah : Makasih sobat.. postingan tentang Jalak Balinya ok banget tuh.. saya teringat saat 6 hari seminar keliling mulai Tretes-Malang lanjut ke Baluran- Situbondo terus nyebrang ke Tamnas Bali Barat.. tempat habitat aslinya burung indah ini hehe...
    @ Bandung Bisnis : Silahkan dulur.. pokoknya I Love Bandung

    ReplyDelete
  4. Biar blog lebih ringan ya? Terima kasih infonya

    ReplyDelete
  5. @ Muchlisin : Yups benar sekali sobat.. luayan bisa ngurangi size blog

    ReplyDelete
  6. aduh kang... ku abdi parantos di cobi, tabi beut error, naha nya kang ?

    ReplyDelete
  7. @ Lisand : saya juga gak bisa masuk ke blognya tuh.. ada eror URL nya sobat... ttg CSS ini mungkin ada kode yg gak ter cut.. ingat letak CSS itu antara <b:skin><![CDATA[/* sampai ]]></b:skin>

    ReplyDelete
  8. link web ini telah saya save.. terima kasih..
    link balik yahhh ..

    ReplyDelete
  9. Knp bingun gini, gak paham Mas. Tp terima kasih infonya, sapa tahu besok otak ini bisa terbuka biar bisa paham, mklum pemula.

    ReplyDelete
  10. Kalo pake Wordpress gimana ya mas? Cukup pake plugins ada gak ya?

    ReplyDelete
  11. @ Direktori Bisnis Online : makasih sobat... langsung dah di linkback...
    @ Wong Jalur : Hehe... enjoy aja sob.. gak usah bingung2.. hehe
    @ mbak maya : waduh mbak kalau untuk WP sy kurang paham tuh... coba aja swan ke oon google..

    ReplyDelete
  12. Wah Hebat, dapat info dari forum, sungguh bermanfaat trim banget

    ReplyDelete
  13. mantab kang infonya :)...makasih informasinya :)

    ReplyDelete
  14. Efeknya apa Kang? Apa blog jadi ringan atau gimana? Trus kalau sudah di kompres, bisa dikembalikan kesemula lagi tak..??

    ReplyDelete
  15. @ yoyon : @ jhonson blog : Sama 2 sobat.. itulah indahnya berbagi

    @ Adrie : Efeknya.. yaah.. mengurangi size blog sehingga ada efeknya sedikit thd loading blog.. walaupun ini ukan satu2 nya cara utk mempercepat loading.. kalau dah di compres.. ya gak bisa dikembalikan lagi.. untuk itu kita harus backup dulu css aslinya.. siapa tahu nanti diperlukan lagi..

    ReplyDelete
  16. Siap Kang..Dipelajari dan dipraktikkan. Thanks berat... :-)

    ReplyDelete
  17. Kang kalo di compress gitu ada efek sampingnya nggak terhadap tampilan blog? misalnya gambar jadi pecah atau yang tadinya detil jadi kabur?

    ReplyDelete
  18. @ Edwin Prasetia : Sama2 sobat silahkan di gunakan. semoga bermanfaat
    @ tukangpoto : Oh gak tuh.. kan yg di compres hanya CSSnya aja... seperti blog ini juga cssna di compress. Ohya sebaiknya CSS aslinya di backup dulu.. siapa tahu nanti kita butuh lagi...

    ReplyDelete
  19. tolong cobain punyaku donk....berat nggak

    ReplyDelete
  20. Makasi infonya mas. Langsung saya coba nie!

    ReplyDelete
  21. Bos trimakasih udah ad link baner saya.
    Mungkin kita bisa saling bantu nih.
    Ternyata dengan membuat link teman dengan scrol dsb,memang enak dilihat tapi menghalangi crawl search engine itu terjadi pada blog saya. setelah gogling kesana kemari akhirnya saya temukan jawaban . Agar search engine dapat mencari tautan link maka kita harus membuat widget link default aja. maka pada blog saya halaman link sahabat tidak saya hilangkan untuk sahabat yang pake baner bisa tetep lihat banernya dihalaman itu. Tapi Pada widget ling ditampilkan hanya teks saja.Diblog saya tampilkan dibawah.
    Tolong koreksi kalo ada kesalahan minta komentnya yah emailok atau tulis di komentar bos
    Keep bloging.Kita jalin persahabatan lewat Blog.
    http://mymp3colection.blogspot.com/

    ReplyDelete
  22. Hai, salam kenal, artikel anda ada di

    sini

    ayo gabung bersama kami dan promosikan artikel anda ke semua pembaca. Terimakasih ^_^

    ReplyDelete
  23. @. kak Roni : blognya cukup ringan bos. aizenya hanya 115.08 KB, loading 0.33 seconds , atur aja pola makannya jangan sampe gembrot
    @ Dunia komputer : yups sama2 bos. makasih ya
    @ Suparno 168 : waduh bener ga tuh,, justru dulu link sahabat itu saya pindahkan ke area posting , justru katanya kalau di blogroll kurang memberi efek terhadap back linknya, kan kasihan ama sobat2 tuh,, disamping itu bisa untuk mengurangi berat blog. intinya lebih bagus di hal posting.. bingung juga mana yg bener nih ??.
    Oh ya.. kok sy gak bisa coment di blognya ya.. kenapa tuh ??
    @ info gue : Lam kenal kembali, boleh juga tawaran yang bagus tuh.. langsung meluncuuur...

    ReplyDelete
  24. wah sangat bermanfaat nich, btw lumayan cepet juga nich load nya thx infonya

    ReplyDelete
  25. wah infonya sangat berguna,,,,tq

    ReplyDelete
  26. Makasih sobat.kayaknya masuk akal juga.Segera ak coba.

    ReplyDelete
  27. bro, sudah dicoba. memang agak cepetan dikit sih...tapi tetep sepi pengunjung

    ReplyDelete
  28. @ Ngobrol seputar bisnis :
    @ aceh Deign
    @ Mrxxx
    @ rosi
    Thanks atas komentnya ya..
    @ carbuzz : hehe.. kok di blognya gak ada fasilitas utk komen ???

    ReplyDelete
  29. Sepertinya aku perlu ikutan anak-anak muda....,ternyata pinter-punter....

    ReplyDelete
  30. Contoh kode CSS nya gimana yah kang?

    ReplyDelete
  31. Wah, terimakasih mas info'nya... saya barusan nyoba, dan ternyata blog saya bisa lebih cepat, walaupun sedikit tapi lumayanlah untuk efisiensi waktu.... hehe

    ReplyDelete
  32. wow nice info gan
    PERTAMA aku ngrasa kok loading blogspotku lama banget eh ternyata menjadi lebih cepat sekarang
    main=main ke blogku dong
    Free News Update

    ReplyDelete
  33. hmm... saya baru mo test seo blogspot nih, abis banwit saya abis... make wp

    salam

    ReplyDelete
  34. thx, udah praktek n berhasil.. lumayan blog sy http://kamuspenemu.blogspot.com udah rada kencang larinya..he he, ehhh loadingnya ha ha

    ReplyDelete
  35. asiiikkk....mantep banget nih untuk blogger pemula spt saya...
    15% adalah angka yang lumayan untuk dikompres mas..hehehe

    ReplyDelete
  36. bos mau konsultasi ne, blogku loadingnya lama pada waktu klik /mau masuk ke halaman posting, sementara blog penyedia tempalatenya http://entertainmenttemplate.blogspot.com/ loadingnya bisa lebih cepat, padahal blognya lebih banyak flashnya dll, mengapa ya???? padahal udah aku kompres css nya, jika berkenan mohon diberikan masukan buat blogq, http://siap-bos.blogspot.com

    ReplyDelete
  37. mantap neeh tutorialnya :-) langsung praktek aj ah mkasih bang saung tutorialnya

    ReplyDelete
  38. Mantabh bro tips nya...
    Thank's berat ya, blog ane jd lumayan turun berat badan..!

    Today Infolicious

    ReplyDelete
  39. Baru saja pinjam tips dari sini.... bermanfaat. sukses selalu sob!

    ReplyDelete
  40. thx hib, langsung ke te ka pe...

    ReplyDelete
  41. wah keren infonya berguna banget makasih ya

    ReplyDelete
  42. kalo css terbaru masih bisa ya?? kemaren pernah coba tapi malah error

    ReplyDelete
  43. hemm..sya mo tanya nie...
    bingung.a pas cari cssnya
    klo yang ]]> cari itu bsa
    letaknya dama..msh bngung...

    ReplyDelete
  44. @ Arifudin Zain : mencari code itu . Copas aja sob.., trus pakaictrl+F , nah pasekan aja dikotak yg tersedia

    ReplyDelete
  45. Perlu dicoba nih,,, agar blog loadingnya lebih yahut,,,,

    ReplyDelete
  46. wahh....
    seep nie infonya...
    makasi tas infonya ya sob... :)
    akan di coba secepatnya.. :)

    ReplyDelete
  47. Mohon restunya, smg diberi kemudahan dlm ngotak-atik blog. Maklum .. betul2 new blogger .. dari nol sama sekali ... Makasih Pak Saung ..

    ReplyDelete
  48. terima kasih tipsnya, bagaimana kalau wordpress self host ?

    ReplyDelete
  49. Nice Info. walaupun gak begitu paham dengan CSS. Tadi udah sempat di Compres tapi kok gak terlalu ngaruh.

    ReplyDelete
  50. keren ..
    kunjungi juga ya nitedec.co.cc :D

    ReplyDelete
  51. kayaknya bisa dicoba nih. wah saya ijin mau nyoba dulu ya gan

    ReplyDelete
  52. keren gan infonya..
    langsung ke tkp..

    info jual murah buku:
    http://abadiorkes.blogspot.com/2011/08/buku-dan-e-book-pemimpin-cerdas.html

    ReplyDelete
  53. Wah makasih informasinya ya, bloggku masih lumayan berat nih....

    ReplyDelete
  54. saya bingung ,,, punya saya ga bisa, berat banget

    ReplyDelete
  55. Salam blogger.....

    Sobat...
    Sudah saya coba Comprest CSS nya, tp Kenapa Setelah Penyimpanan Teplate Kok katanya Tak bisa..

    Atas Jawaban nya Sebelumnya Saya Ucapkan Banyak Terima Kasih.

    Salam Blogger.....
    ainstsetia

    ReplyDelete
  56. ane mau coba gan..makasih buat infonya

    ReplyDelete
  57. ijin sedot ilmu ya gan..trims tutorial nya..lgs meluncur ke tkp..trims n salam..

    ReplyDelete
  58. selalu galat om... maklm newbie hehe

    ReplyDelete
  59. Wuihh... Keren, beat blog ane turun 2kb, thank gan..

    ReplyDelete
  60. mau nyobain juga ni yang akunya lemot banget, thanks seblmnya.... buat om admin

    ReplyDelete
  61. makasih bnyak bro ud share,lumayan nambah wawasan saya :)

    ReplyDelete
  62. hmm Punya saya di Kompress Hilang Semua Pengaturan template nya mas..hmm :/

    ReplyDelete
  63. Maaf saya mau tanya bisa nggak css pada blogspot dijadikan external (external link)..

    Salam kenal Desainew

    ReplyDelete
  64. Sob cara ini bisa ga diterapkan untuk website, karena css-nya di bagi per file

    ReplyDelete
  65. Vyoprk [url=http://hermeskelly.finniwolf.com][b]authentic hermes bags[/b][/url] hermes perfume http://hermeskelly.finniwolf.com Shnapb Mvbske hermes birkin

    ReplyDelete
  66. Salam Kenal Mas Saungweb. ijin saya simak artikel Mas yang sangat bermanfaat ini buat saya, oh yah ijin Follow Blog Saungweb, agar saya banyak belajar tentang blogging di blog, Mas, Motivasi dan bimbingan saya tunggu di Blog saya, terima kasih.

    ReplyDelete
  67. Artikelnya Menarik dan sangat mendidiik buat Blogging pemula seperti saya Mas. terima kasih yah semoga saya bisa di terima gabung bareng di Saungweb. salam Hormat buat Mas Admin. saungweb

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger