Kompres CSS Untuk Mempercepat Loading Blog

Viyan Pradita Rabu, Juni 08, 2011 ,

Kompres Code CSS Untuk Mempercepat Loading Blog, kiranya itulah yang akan saya bahas malam ini, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog With CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.

Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:
  • Seperti biasa, Login ke akun blogger sobat
  • Masuk Rancangan/Layout
  • Pilih Edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Perhatikan Langkah-langkah berikut ini

1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.
  • Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
  • Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
  • Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:
<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'

Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

  • Terakhir klik Simpan

Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.


2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML

Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:

Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:
  • Blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
  • Buka situs CSS compressor disini
  • Settingnganya rubah seperti berikut:

Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'

  • Kemudian tempatkan hasil kompresannya diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

  • kemudian potong kembali pada kode diantara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

  • Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
  • Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>

  • Terakhir klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan Alhamdulillah tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS Untuk Mempercepat Loading Blog yang saya lakukan.
Selamat mencoba Sobat... Semoga bermanfaat.

Article Information:
Description: Kompres CSS Untuk Mempercepat Loading Blog
Reviewer: Viyan Pradita - Itemreviewed: Kompres CSS Untuk Mempercepat Loading Blog - Rating: 4.5

Ditulis Oleh :

Artikel Kompres CSS Untuk Mempercepat Loading Blog ini dipublish pada hari: Rabu, Juni 08, 2011. Semoga artikel ini bermanfaat untuk Anda. 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.

43 komentar
Terjun Ke Kolom Komentar

  1. Saya sudah mencobanya & sedikit berhasil. Blogwalking Me...

    BalasHapus
  2. Terimakasih sob atas tutorial dan tipsnya, saya sudah follow, kiranya berkenan untuk follow baik di blog sederhana saya, dan sudah saya link di blogroll di sidebar kanan, semoga berkenan untuk melink balik, terimakasih dan salam sukses selalu

    BalasHapus
  3. Info bagus mas, saya pernah coba memang cepat sih, tapi ribet sewaktu2 mau ngedit kode css nya, ya maklumlah namanya juga nubi

    BalasHapus
  4. @Euis Ryan: Sip, makasih kunjunganya :)

    @Blog Bisnis: Dengan senang hati mas bro, cek saja, sudah saya pajang di bootom kiri blog saya. Dan follback sukses. Thank

    @Kang Amphi: Iya betul mas, itulah hasil kompress'nya. memang sulit untuk dibaca kalau tidak faham betul :D

    BalasHapus
  5. Er-r.. emang aneh template punyaku :(( gak bisa-bisa.. jadi penasaran.. tapi yaa.. gpp. bagus banget tutorialnya viyan!! jempol!

    BalasHapus
  6. @Nurmayanti Zain: Hehhe, kemarin saya sempat dunlud tempate punya Mbak, memang rada beda tempaltenya.
    Saran: templatenya rada berat tuh Mbak, kalo bisa dikurangi untuk header blognya, dibuat lebih minimalis. Hihihi
    tp sudah bagus tuh mbak, bila cara kompres gak bisa, mending apa adanya aja, sukses slalu !! ;))

    BalasHapus
  7. pengetahuan orang itu emang berbeda-beda ya... tadi sebelum ke blog ini pas banget mampir ke blog yang bahas agar loading blog lebih cepat..., tapi bukan pake css... eh gak tahunya blog dia tetap lama padahal saya pake evdo smart... mungkin compressing css emang lebih ampuh ya.... bisa diaplikasikan ke joomla gak nih mas?

    BalasHapus
  8. @Eko tri: Thank gan

    @wicker furniture: Sebenarnya blog ini juga file'nya masih berat mas, untuk kompres menurut saya jg belum maksimal :D
    lebih ringan lagi (untuk mengurangi berat blog) dgn CSS external.
    Untuk masalh jomla, saya masih belum menguasai, karna jarang banget pakek jomla mas.

    BalasHapus
  9. wah tutorial disini mantepp,.,semua say acoba dan working 100%,.

    BalasHapus
  10. @arif nur: sip, makasih sob :)

    BalasHapus
  11. Makasih bos infonya ! Nice info ! No more comments ! :)

    BalasHapus
  12. @obinhut: Sip, sama2 mas bro! :)

    BalasHapus
  13. gk bisa mas bro, saya pake template dari blogger trus saya cut mulai dari

    gk bisa tulisannya gk nginput, mohon bimbingannya bro. Bales masuk ke http://www.musicandnews.co.cc/ tulis dibuku tamunya

    BalasHapus
  14. Thank's Buat infonya.... :) 8-}

    BalasHapus
  15. @Asmara Susanto: Di tempate bawaan blogger biasanya ada kode CSS "variable" /untuk warna dan ukuran text. itu jgn ikit di compress sob.
    hasilnya pasti berantakan :D
    Cukup mulai dari "body {" saja sob.

    @Nickshensa: Sama2 sob, thank kunjugannya.

    BalasHapus
  16. Mantabs infonya...langsung praktek ternyata hasilnya lumayan cepet lah..

    makasih sob...

    BalasHapus
  17. @Asmara Susanto: Sip, sama2

    @ubae: sama2 sob, makasih kunjugannya :)

    BalasHapus
  18. keren infonya bro... langsung ke TKP nich...

    BalasHapus
  19. Maknyus mas brow.... visit back djie-xtray.blogspot.com

    BalasHapus
  20. Mantep Gan!! :)) Cepet Banget, hehehe mampir yukk ke website ane :D xixixixi ohya izin comot yah :p

    BalasHapus
  21. @Agoes Cho: Sip... :D

    @Djiextray: Ok.. thanks yua

    @Menitnetwork.com: Ok, makasih juga udahberkunjung sob, salamkenal :)

    @Recha Seprina: Sama2... :)

    BalasHapus
  22. kk,, lebih cepat mana cara pertama sama cara kedua kak?? aku mau coba takut gagal.. heheheh;))

    BalasHapus
  23. iYa mas, kalau compress css hasilnya tidak terlalu memusingkan, tapi kalau html ny.... waduhhh.. harus beli obat pusing.... :(

    BalasHapus
  24. @feeder: mending cobain dulu yg cara 1, kalau cara dua rada ribet tar kalo mau edit2 template, dan juga akalo terjadi error bisa bikin pusing tar :D

    @Rizki Fawqo: ya kalo pingin nyoba jg gak paap sob, tp resiko ditanggung sendiri,, hhihii :D cuma ribet kalo mau editnya, coz bnar2 jadi gak ada spasi untuk kode2nya.

    BalasHapus
  25. terimakasih saranya gan, tapi itu nanti tidak ada efek apa2 pada blog kan?
    maklum pemula

    BalasHapus
  26. @indonesian people: Efek dari cara ini yaitu memperkecil jumlah file.KM CSS atau HTML template kita, pastinya ngaruh di loading blog.

    Kalau effek bila salah menempatkan script/cssnya berubah pasti tampilan blog akan menjari berantakan. :)

    BalasHapus
  27. makasih mas, ahirnya aku berhasil. dua blog ini udah tak coba tak hasilnya tetep beda karena yang satu gak pake kode sidebar

    http://gtmetrix.com/reports/pendaftaranregistrasionline.blogspot.com/2COqgTy3

    BalasHapus
  28. kok warnanya jadi ilang n fontnya jadi agak besar ya mas??

    BalasHapus
  29. ane pernah nyoba, tapi sering gagal.

    BalasHapus
  30. siiiipp sobat, triknya,,,,, trma kasih buanyak,,,,,,

    BalasHapus
  31. di compressssssss kok malah eror

    BalasHapus
  32. Terima Kasih telah membagikan ilmu anda, Informasi yang
    sangat berguna dan bermutu. mari kita saling kenal jauh
    melalui jaringan blogspot ini dengan saling follow

    Follow di blog saya : http://jejakservicepc.blogspot.com/

    semoga kita bisa saling berbagi ilmu yang tiada hentinya
    mengalir dalam dunia ini.

    BalasHapus
  33. wah makasih sekali ya tutorialnya..sangat membantu..coba dlu dah
    http://tutorialogi.blogspot.com/2012/11/template-blogger-super-seo-easy-loading.html

    BalasHapus
  34. gan ikut lomba seo http://akramberbagi.blogspot.com/2012/12/kontes-seo-januari-2013.html

    BalasHapus
  35. tq gan udah mau kasih tips. blog ane jadi tambah cepat

    BalasHapus
  36. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  37. ma kasih atas infonya.. http://seokasturi.blogspot.com

    BalasHapus
  38. Bagus caranya gan :-bd ijin repost ya gan..

    http://www.mestiqui.com/

    BalasHapus
  39. kurang paham ih... maksudny atu kode html kita di masukan kesini bukan



    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers