Wp CSS – Plugins Untuk Mengkompress CSS

in Wordpress | 41 Comments
Wp CSS – Plugins Untuk Mengkompress CSS

Sebelum memulai tulisan kali ini, saya mau mengucapkan banyak-banyak terima kasih pada teman-teman yang sudah memberikan saran dan kritik untuk blog saya dan juga sudah mengikuti polling sederhananya. Saya mendapatkan inspirasi dan semangat baru untuk nge-blog, mohon maaf juga sudah 3 hari tidak ada update artikel dari saya :) . Artikel kali ini lagi-lagi saya akan membahas plugin wordpress tapi tentu saja sebelum menulis artikel ini saya sudah mencobanya agar saya tidak memberikan informasi yang kurang akurat untuk anda.

Untuk artikel kali ini juga ada hubungannya dengan artikel saya mengenai Kompresi CSS Untuk Meningkatkan Performa Blog, di artikel tersebut saya menginformasikan mengenai efek yang baik bila anda mengkompress css dan tempat untuk mengkompressnya. Namun kekurangannya apabila kita mengkompress css secara manual, akan menyulitkan anda dalam mengedit css tersebut, karena bila css di kompress secara manual semua spasi atau jarak antara kode-kode css akan di buang/hilangkan.

Kali ini saya menemukan plugin bernama WP CSS yang berfungsi untuk mengkompresi css anda tanpa menghilangkan spasi atau jarak antara kode-kode cssnya, kelebihan dari plugin ini selain source filenya yang hanya berukuran 230kb saja, plugin ini pun mengkompressi css menjadi GZIP dengan tehnik  HTTP_Compression.

Apa itu HTTP_Compression ? HTTP_Compression adalah Cara untuk mengkompresi data-data  yang dikirim dari sebuah web server ke browser. Kompresi yang baik itu bahkan sangat di anjurkan yaitu menggunakan kompresi GZIP, dengan menggunakan GZIP ini sebuah file akan di kompresi lebih dari 80%, tentu saja ini akan menghemat bandwith dan mempercepat loading.

Anda lihat pada gambar diatas, sebuah penelitian sudah dilakukan oleh pencipta plugin WP Css ini, dia tes dengan menggunakan 8 file css yang di simpan dalam satu file css dengan menggunakan metode @import dengan total 33kb. Bila menggunakan WP Css ini, file css tersebut yang berukuran 33kb akan di kompress sebesar 91% dan ukurannya menjadi 3kb saja.

Cara penggunaan plugin ini, setelah anda install. Anda buka file header.php, kemudian ganti code di bawah ini

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

Menjadi

<link rel="stylesheet" href="<?php wp_css('style.css');  ?>" type="text/css" media="screen" />

Plugin ini pun mempunyai fasilitas Cache, yang biasanya ada pada plugin Wp Super Cache. Pembahasan Cache dan Wp Super Cache akan saya bahas di lain kesempatan, dan juga ternyata ada plugin yang lebih baik dari wp super cache yang mungkin anda belum mengetahuinya.

Untuk mendownloadnya silahkan menuju http://wordpress.org/extend/plugins/wp-css/

Semoga bermanfaat !

Penulis: Satrya Bima - http://www.margasatrya.com

Satrya, founder margasatrya.com yang saat ini sedang bekerja di salah satu provider theme e-commerce, Tokokoo.com sebagai Front End Developer. Mau mengenal saya lebih jauh ? Silahkan follow twitter atau kontak saya

Berlangganan Artikel Gratis !

  • budiastawa

    Lama juga nggak berkunjung kesini. Apa kabar, shobatku Satrya?

    Ah, kebetulan nih ada tutorial kompresi CSS. Saya belum pake, akan saya terapkan di blog saya. Informasi yang sangat bermanfaat buat loading blog.

    Terima kasih, Satrya :)

    • http://www.margasatrya.com Satrya

      @budiastawa, alhamdulilah baik bli, saya juga nanya kabar di blog bli :D

      Sama2 :)

  • aming

    dari kemarin nguta-ngatik header.php
    sempet error…

    btw thanks infonya, nanti ta coba

  • ardianzzz

    Wah sepertinya sangat menarik, btw saya juga mulai merambah wordpress :p

    • rismaka

      @ardianzzz, Semoga anda menyukai WordPress mas :) , dan tidak apriori lagi kepada WP :P

      • ghe

        @rismaka, apriori apa kang?

        • rismaka

          @ghe, apriori tuh maksudnya “kurang suka/sentimen”. dulu mas ardian itu kurang suka WP gara2 WP terlalu besar source engine-nya, dan banyak dipakai oleh orang2 :)

          Semoga saja sekarang lebih cinta WP lag ya mas ardian ya? :D

    • http://www.margasatrya.com Satrya

      @ardianzzz, wah asik nih kedatangan tamu baru di dunia wordpress :D
      Rajin2 sharing design wordpress y mas Ardi :D

    • ardianzzz

      @ardianzzz,
      Hehe, gara-gara klien minta dibuatin pake WP :p hehe…

      Selain yang mas Rismaka tuduhkan, saya tidak suka sistem editing layoutnya yang “tercemari” kode-kode PHP. Bikin tambah pusing saja. Kalau ingin membuat custom page harus masuk ke spanel. Saya memilih TxP salah satunya karena hampir semua data (CSS, Pustaka Bahasa, Template dsb) disimpan dalam database. Sehingga lebih hemat space lagi heheh..

      Percuma saya menggunakan dan membanggakan TxP kalau tidak menunjukkan kehebatannya. hehe, siap tantang wordpress nih :p

      • Planet Orange

        @ardianzzz, Ijin komeng ah, kl gitu TxP ini mirip vbulletin ya, semuanya disimpan didalam DB, ada +/- nya sih bro… selain itu meskipun disimpan dalam DB, tapi tetap berupa file kok…

        Mo cobain TxP dulu ah

  • rismaka

    Maaf mas, mau numpang nyepam :mrgreen:
    Untuk mengembalikan CSS yang telah terkompress, bisa menggunakan Styleneat, Online Tool untuk Merapikan Syntax CSS.

    Saya dulu pernah menggunakan plugin ini. Tapi alasan saya melepasnya saat itu adalah karena waktu cache utk menyimpan CSS terkompress terlalu lama, sehingga ketika kita mengganti/edit CSS, tampilannya baru akan berubah setelah waktu cache habis. Semoga saja untuk versi sekarang, plugin ini dilengkapi pengaturan waktu cache-nya.

    Kelemahan dari plugin ini adalah ia tidak secara otomatis mereplace file stylesheet yang berasal dari plugin lain. Walaupun kita sudah mengganti fungsi pemanggilan file CSS theme, namun yang ter-replace adalah file CSS dari theme yang kita pakai, bukan file CSS yang disisipkan oleh beberapa plugin di dalam header. Bisa dilihat di source code blog mas satrya ini. Saya lihat CSS dari plugin wp-pagenavi, contact form 7, dan wp-polls masih ada di header.

    pemanggilan file CSS lebih dari satu juga menambah http request, yang tentunya tidak bagus untuk kecepatan, selain itu kurang efektif.

    Owh iya, saran, paragraf pertama sepertinya terlalu panjang deh, mungkin bisa di-split menjadi dua paragraf :)

    • http://www.margasatrya.com Satrya

      @rismaka, mas sekarang sudah ada setting expiry nya. Iya belum saya panggil semuanya, soalnya masih tahap testing testing mas ..ahhahahha :D
      Tapi lumayan juga mas efeknya terasa di saya, gak tau deh kalo di akses di tempat lain :D

      Iya mas memang akan menambah http request , tapi lumayan lah buat template yang css nya besar ukurannya. :D

      Oia mksih koreksinya mas, saya lagi semangat baru nulis lagi setelah tiga hari ..hahahhaa

      Oia mas, saya sedikit mengambil warna backgroudnya nih, soalnya adem banget kalo baca di blognya mas Adi, gpp y mas :D

      • rismaka

        @Satrya, Ya gpp donk mas. Toh warna blog saya bukan merupakan copyright kok :)

    • http://jurug.blogspot.com jurug

      @rismaka, penjabaran yang bagus.. tapi berhubung blm faham ttg css jadi cuma bisa ngangguk2 saja mas :D

      dulu pernah coba plugin ini buat wp… tapi entah kenapa tampilan mobile blog saya jadi hancur dan bahkan kembali ke default blog asli.. awalnya saya g tahu kenapa, tapi satu persatu plugin saya cek dengan copot-pasang-copot-pasang ternyata permasalahannya ada di plugin wp css ini… css mobile saya terkompress bahkan kembali ke tampilan blog spt di versi dekstop…

      anehnya setelah saya copot tapi masih saja cache ada yang tertinggal…

      jadi kalau mau pake versi mobile terutama pake plugin wp-mobility buat mendulang Admob mending tunda dulu pakai plugin ini…
      :lol:

  • ghe

    wah masih belum paham dengan css….tapi simpen dulu deh pluginya kali” nanti dibutuhkan…. :lol:

    • http://www.margasatrya.com satrya

      @ghe, makan aja dulu ghe pluginnya , nanti klo udah butuh baru muntahin :lol:

  • andre

    makasi infonya, saya coba dulu pluginnya

  • DikMa

    apa perbedaan perubahan mendasar setelah kita menggunakan plugin ini mas ?

    dan saya bingung arti dari kompress yang dimaksud .. apakah FIlenya yang dikompress menjadi file GZIP ato file tetap namun kapasitas yang mengecil :lol: sorri masih bingung sih ..

    • http://www.margasatrya.com Satrya

      @DikMa, saya sudah mencobanya dan cukup memberikan efek yang besar untuk loading.

      Iya nanti file css nya dijadikan GZIP oleh plugin ini mas,dan membuatnya semakin kecil ukurannya. Kompress kan artinya mengecilkan sesuatu yang besar :lol:

  • tomi

    makasih broo infonya.. lmyn nih..
    saat ini saya cuma kompress manual css nya dengan menghilanggkan koment ataupun whitespace

  • Free Blog

    layak dicoba nih broo.. makasih ya

  • Tips trik blogging

    sepp mas..
    baru tau saya :D
    ijin nyoba dahh :D

  • dulqodir

    salam kenal mas :)

  • Catatan Blogger Amphibi

    kebetulan saya sdh pake wp-super cache mas
    thx ya :)

  • van

    ternyata pake wp enak ya bro…
    gak usah manual, langsung pake plugin deh…
    thank rekomendasinya bro… :D

  • Planet Orange

    Kalau saya biasanya mengkompres file CSS itu sebelum saya upload…. editor CSS banyak dilengkapi dengan fitur utk mengkompres CSS

    Tp kyknya plugin ini extreme banget ya ngompressnya, patut dicoba

  • semangat

    terima kasih blog ini saya suka artikelnya berbobot, salam kenal yah. Untuk optimalkan css saya hanya pakai jasa cleancss.com lumayanlah buat kompress.

  • http://ddery.com dery

    yup benar,, website bisa dikompres menggunakan gzip.. tapi biasanya ada beberapa server yang tidak mendukung kompresi seperti ini. Kalo gak salah servernya harus mendukung zlib dahulu, baru bisa terkompres..

    untuk mengkompres css, saya tidak menggunakan plugin,, saya gunakan online css compression, dengan menghilangkan batas antar spasi,,
    terlalu banyak plugin bisa memberatkan blog juga kan? :D

  • PF

    Saya malah bingung mengimplementasikan plugins ini pada theme saya mas satria, soalnya parent themenya menggunakan hybrid :(

  • rickyeka

    sebelumnya ini kunjungan pertama saya, jadi saya ucapkan salam kenal
    saya mau tanya apakah kalo sudah pake wp css trus digabung dengan wp super chace akan bagus hasilnya atau malah crash?
    dipostingan mas diatas disebutkan wp css mirip dengan super chace
    saat ini saya memakai kedua plugin tersebut
    kira-kira uselles ga yah?
    thanks

    • http://www.margasatrya.com Satrya

      Pengalaman saya gak mba/mas, soalnya itu 2 plugin itu masing2 beda kegunaannya. Wp super cache bekerja dengan meng-cache sebuah halaman menjadi halaman HTML statis. sedangkan wp css meng-cache file css dan mengkompresinya.

  • http://tech-news-123.co.cc citromduro

    wah mantabs gan
    bisa semakin wus-wus ni blog
    trims ya, salam dari pamekasan madura

  • Adi

    Terimakasih info nya gan.saya newbe jadi info seperti ini sangat bermanfaat

  • julicavero

    wah saya mau coba dulu mas….mudah2an bs ya

  • disuka

    saya coba sob… klo digabungkan dengan plugin gzip ga apa2 ya

  • disuka

    di theme yang saya pasang ga ada tulisan script kayak gitu.. gimana don’k

  • http://grosirbajumuslimanak.com/ grosiran pakaian anak muslim

    thanks mas infonya :) saya bingung dari kemaren gimana caranya pake wp css. hwewewewe ketemu disini caranya :) . tengkyu ya

  • http://anjrahuniversity.com anjrah ari S

    semoga ini bener-bener solusinya irit bandwidthnya,, makasih,,,

  • http://laporanptk.wordpress.com laporanptk

    info mantapp gan, sya cobak dulu ahhh
    slam kenal….andi61322

  • http://windowsmurah.blogdetik.com Windows Murah

    baru belajar pake wordpress beberapa waktu lalu, banyak yang kudu dikembangkan, salah satunya belajar dari para pakar kayak agan yang satu ini.
    nice sharing, ditunggu ilmu selanjutnya
    tq

  • http://catatankomputer.com/ herlan

    Terima kasih atas infonya gan, lagi diterapkan di blog baru saya. Semoga bermanfaat.