mas template

Mempercepat Loading Blog dengan CSS Compressor

Terkadang kita bertanya-tanya apa sih yang membuat blog atau website kita kok loadingnya lama? Salah satu faktor yang menyebabkan adalah karena terlalu banyak kode-kode HTML yang kita pasang di blog. Untuk menyiasati agar blog atau website kita mudah atau ringan untuk di load adalah dengan mengoptimalkan file CSS. Salah satu cara agar file CSS anda bisa optimal adalah dengan cara mengkompres file tersebut baik secara manual ataupun secara otomatis dengan menggunakan tool CSS Compressor.

Sebelumnya saya akan memberikan penjelasan tentang CSS itu sendiri, CSS adalah Cascading Style Sheets yang dalam pengertiannya adalah
CSS is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. [Wikipedia]

Berlanjut pada topik utama kita, compress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools compress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :  
a {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}

a:visited {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}

a:hover {
color: #ffffff;
text-decoration: none;
padding: 0px 0px 0px 3px;
}

Setelah diamati, maka dari contoh tersebut kita bisa melihat ada dua bagian CSS yang sama. Bagian itu adalah properti CSS untuk fungsi a dan fungsi a:visited. Nah, kedua properti tersebut dapat disederhanakan dengan menggabungkannya dengan memberi tanda koma ( , ). Sekarang perhatikan kode warna dalam hexa color code #ffffff. Warna juga bisa disederhanakan menjadi seperti ini #fff. Sehingga secara keseluruhan kode CSS tersebut bisa menjadi seperti ini :
a,a:visited{
color:#fff;font-size:12px;
text-decoration:none;
text-transform:title case;
padding:0 0 0 3px
}

a:hover{
color:#fff;
text-decoration:none;
padding:0 0 0 3px
}
Setelah kode CSS tersebut dikompres, terlihat ada pengurangan spasi di antara kode a,a:visited. Nah, berarti bisa diambil kesimpulan bahwa spasi juga berpengaruh terhadap kecepatan loading blog. Maka kode di atas masih dapat disederhanakan lagi menjadi seperti ini :
a:hover{color:#fff;text-decoration:none;padding:0 0 0 3px}
a,a:visited{color:#fff;font-size:12px;text-decoration:none;text-transform:title case;padding:0 0 0 3px}
Dijamin loading blog anda akan menjadi lebih cepat. Akan tetapi, anda akan merasa kesulitan ketika ingin melakukan editing terhadap kode CSS anda. Tapi kalau sudah terbiasa, ga apa-apa sih. Nah, cara di atas adalah cara manual yang bisa anda lakukan untuk mengkompres kode CSS. Namun akan memakan waktu yang lama.

Sekarang kita akan mengkompres kode CSS dengan cara tercepat dan praktis yaitu menggunakan Tool CSS compressor. Namun sebaiknya anda ahrus sudah terbiasa dengan kode CSS. Supaya terbiasa caranya gimana bang? Ya itu tadi, anda harus sering-sering berlatih dengan mengutak-atik template blog anda. Tapi ini cuma saran saja.

Banyak tool CSS compressor yang bisa anda gunakan secara gratis di internet. Cari saja dengan kata kunci "css compressor" atau "free css compressor". Salah satunya adalah CSS Compressor situs yang memang khusus menangani kompresi CSS. Nah, jika anda memang tertarik menggunakan tool ini, maka saya sarankan sebaiknya backup dulu template anda dan simpan di komputer.

Berikut langkah cara kompresi CSS dengan CSS Compressor :
  1. Silahkan kunjungi http://www.csscompressor.com
  2. Pada Compression Mode pilih mode kompresi yang anda inginkan. Ada yang Highest, Hight, Standart, atau Low.
  3. Copy lalu paste kode CSS yang ingin anda kompres ke CSS input.
  4. Kemudian klik tombol Compress.

    css-compressor
  5. Di kolom bawah akan ada hasil kompresi. Sekarang klik tombol Select All. Copy kemudian paste kode tersebut pada template anda yang CSS nya dikompres.

    hasil-css-compressor
  6. Selesai.

Selain tool dari CSS Compressor, anda juga bisa menggunakan tool css compressor lainnya dari CSSDrive.com, Arantius.com, Mabblog.com, CSSOptimiser.com dan lain-lain. Silahkan kunjungi situs-situs di bawah ini untuk mengkompress CSS template blog anda :
  1. http://cssoptimiser.com 
  2. http://mabblog.com/cssoptimizer/compress.html 
  3. http://tools.arantius.com/css-compressor 
  4. http://iceyboard.no-ip.org/projects/css_compressor 
  5. http://www.cssdrive.com/index.php/main/csscompressor
Itu tadi sedikit penjelasan bagaimana mengoptimalkan file CSS dengan CSS Copressor, semoga dengan  tutorial diatas loading blog temen-temen semua menjadi lebih cepat. 

Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

14 comments:

  1. @haluanjutawan:
    Kode css yang biasanya terletak diatas ]]></b:skin>

    Mulai dari kode css
    body{background:#696969;
    terakhir sampe kode diatas diatas ]]></b:skin>

    ReplyDelete
  2. mas cara di atas apakah bisa juga diterapkan untuk wordpress??

    ReplyDelete
  3. maskolis nanya dikit dong..saya rencananya mau make template maskolis yang pakdhe johny, apakah masih perlu saya konpres css nya?
    terimakasih atas jawabannya nanti

    ReplyDelete
  4. setelah saya kompres lumayan gan loadingnya,,,, terimakasih infonya gan sangat membantu....
    sedikit pertanyaan gan,, setelah saya check di PageSpeed Insights ada ringkasan saran
    "Tidak ada konten paruh atas di laman Anda yang dapat dirender tanpa menunggu pemuatan sumber daya berikut. Coba tunda atau muat sumber daya yang memblokir secara asinkron, atau jadikan sebaris bagian penting dari sumber daya tersebut secara langsung dalam HTML.
    Optimalkan Pengiriman CSS yang berikut;"
    mohon pencerahan bagaimana menanganinya,,,,

    ReplyDelete
  5. thanks brow..
    http://thazbhy.blogspot.com/

    ReplyDelete
  6. Pas aku cek di pagespeed insight score rendah, bingung ngatasinya sob. Paham maksud ini gak sob? soalnya gak paham masalah kode
    Hapus JavaScript yang memblokir render:
    Gunakan versi asinkron dari skrip berikut:
    Optimalkan Pengiriman CSS yang berikut:

    ReplyDelete
  7. Cobain dulu mas. sepeertinya sangat membantu saya.

    ReplyDelete
  8. matur suwun kang gonaku tambah cepet 85%

    ReplyDelete
  9. mas... templat yang saya gunakan adalah templatenya maskolis... apakah template itu masih harus disederhanakan lagi...sementara setelah saya cek,, kecepatannya 89%.. apakah perlu beberapa kode css harus disederhanakan lagi..??
    dari : http://miniblogger28.blogspot.com

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete

  11. Hi and thanks for all the information. My problem is a little different. Every morning my fridge seems to be making a whirring sound which goes on and off. When it does so I can also hear a ticking sound when it shuts off and then goes on again. Why is it only happening for a specific short period of time each day? I can understand it if it's continuous but in this case it's not http://homemachine.net

    ReplyDelete
  12. Setelah saya cek kecepatan blog di pagespeed insight memang ada masalah seperti ini. Terima kasih utk tutorialnya, mas.

    ReplyDelete
  13. maaf maskolis ijin menanyakan bagaimana ya cara menempatkan css yang kita rubah tadi misal saat saya cek di pagespeed insight google dan seocentro disuruh mengoptimalkan css ini "https://fonts.googleapis.com/css?family=Droid+Sans:400,700" lalu kalau sudah saya kompres cara merubah ataupun menenpatkannya bagaimana mas terima kasih

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger