Cascading StyleSheet (CSS) dan 8 Tips Optimasinya

Cascading StyleSheet

Bagi kita yang terbiasa bergelut dengan themes wordpress, tentu tak asing lagi dengan file yang bernama stylesheet atau biasa dikenal dengan CSS. Bagi yang belum tahu apa itu stylesheet, coba anda buka salah satu halaman web yang mana saja, kemudian simpan (save as type: web page, complete) ke hardisk komputer anda. Setelah itu buka folder yang menyertai file html yang telah anda simpan. Di dalam folder tersebut biasanya akan kita temui bermacam-macam file, antara lain style.css, gambar, file html, java script, icon, dan lain-lain. File yang berekstensi .css itulah yang disebut file stylesheet atau CSS.

Apa itu CSS?

CSS disebutkan oleh wikipedia adalah:

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (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. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout.

Atau istilah gampangnya, CSS adalah sebuah dokumen yang digunakan untuk mendesain atau mengatur tampilan serta tata letak sebuah halaman web, CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.

Selain sebagai pengatur tampilan dan tata letak halaman, CSS juga berfungsi sebagai pengatur besar kecilnya huruf (font), pengatur warna, serta juga sebagai pengatur tata letak gambar dan objek-objek lainnya.

Optimasi file CSS

Setiap kali kita membuka halaman web, maka secara otomatis peramban akan mengunduh setiap file yang dibutuhkan, tak terkecuali file CSS. Besarnya ukuran file CSS (dalam KB) sangat berpengaruh terhadap performa atau kecepatan proses unduh itu sendiri. Makin besar ukuran file CSS, maka semakin lama pula halaman web itu ditampilkan dengan sempurna.

Sekarang timbul pertanyaan, bagaimanakah mengoptimasi file CSS tanpa menghapus sebagian isi dari file CSS tersebut? Berikut ini saya akan mencoba menjelaskan beberapa tips optimasi file CSS (Cascading Style Sheet) pada theme/template wordpress khususnya, dan platform web/blog lain pada umumnya. Diharapkan dengan adanya penjelasan ini, para pemula dapat segera mengoptimalkan blog mereka secara mandiri, tanpa bantuan dari pihak ketiga.

Dan mengingat banyaknya penjelasan yang akan disampaikan, maka perlu sekiranya saya memberikan contoh kongkritnya. File CSS yang akan saya contohkan adalah file stylesheet dari theme default wordpress. Saya kira setiap pengguna wordpress memilikinya. Bagi yang tidak memilikinya, silahkan buka link untuk file style.css theme default wordpress.

1. Panggil file CSS di bagian atas (header.php)

Saya merasa tidak perlu menjelaskannya panjang lebar, karena hampir semua theme wordpress menjalankan file CSS di bagian header ini. Bagi yang ingin melihat seperti apa kode eksekusi CSS di bagian header, silahkan buka file header.php di direktori theme. Biasanya file CSS dieksekusi dengan kode berikut:

<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />

atau

<style type="text/css">
@import url(style.css);
</style>

Tujuan dari perlunya pemanggilan CSS di bagian header adalah agar halaman web dapat lebih cepat terbentuk sempurna sesuai desain yang diharapkan (tidak kacau).

2. Hilangkan space (ruang) “komentar”

Apa yang dimaksud ruang “komentar”? [Lihat contoh style.css] Yang disebut komentar adalah setiap tulisan/huruf yang diawali dengan tanda /* dan diakhiri dengan tanda */ Contohnya:

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

	Kubrick v1.5

http://binarybonsai.com/kubrick/

	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/

	The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

atau

/* Begin Typography & Colors */

Komentar-komentar seperti itu memang berguna bagi kita bila hendak melakukan pengeditan file CSS, namun komentar itu tidak akan terbaca dan tidak berguna bagi peramban. Dengan menghapus komentar berarti kita dapat memperkecil ukuran file CSS, yang tentunya dapat mempercepat proses unduh.

3. Hindarilah penulisan kode yang tidak efektif

Contoh penulisan yang tidak efektif:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Bisa diganti dengan:

margin: 2px 1px 3px 4px (top, right, bottom, left)

4. Hapuslah "white space" (spasi) atau ruang-ruang yang tidak berguna

Sebagai contoh, kode berikut:

#page {
	background-color: white;
	border: 1px solid #959596;
	text-align: left;
	}

#header {
	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
	}

bisa kita hilangkan spasi-spasinya, menjadi:

#page{background-color:white;border:1px solid #959596;text-align:left;}
#header{background:#73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;}

Cara seperti ini biasa disebut dengan kompresi CSS. (Kompresi dalam hal penulisan, bukan kompresi dalam hal ukuran file). Kita bisa melakukannya secara manual, ataupun menggunakan online tool yang menyediakan layanan kompresi file CSS.

Ada dua situs yang saya ketahui menyediakan layanan kompresi CSS secara online, yaitu CSSdrive dan CSSoptimiser.

5. Gunakanlah kode CSS sesuai dengan kebutuhan halaman web

Hampir kebanyakan dari theme wordpress mempunyai satu buah file CSS. Di dalamnya terdapat seluruh kode CSS untuk tampilan halaman depan (homepage), halaman posting (single), komentar, sidebar, footer, dan lain-lain. Semuanya menyatu dalam SATU BUAH FILE CSS. Sebagai contoh:

1 buah file CSS mempunyai ukuran file 20 KB, yang berisikan:

Kode untuk tampilan halaman depan (homepage) ==>> 6 KB
Kode untuk tampilan halaman posting (single) ==>> 6 KB
Kode untuk tampilan sidebar ==>> 3 KB
Kode untuk tampilan komentar ==>> 3 KB
Kode untuk tampilan footer ==>> 2 KB

Sehingga berjumlah total = 20 KB

Jika kita membuka halaman depan (homepage), maka peramban pun akan mengunduh file CSS tersebut (20 KB), yang pada kenyataannya tidak semua kode dalam file CSS itu digunakan, mengingat di halaman depan tidak terdapat komentar maupun halaman posting. Solusi ~~praktis~~ efisien-nya adalah dengan membuat file CSS yang berbeda. Masing-masing file CSS tersebut hanya berisikan kode-kode yang dibutuhkan saja.

Sebagai contoh, di rismaka.NET tampilan halaman depan sangat berbeda dengan tampilan single, dan berbeda pula dengan tampilan halaman (page). Oleh karenanya saya menggunakan tiga buah file CSS yang berbeda (style_home.css, style_single.css, dan style.css). Masing-masing dari file CSS itu hanya berisikan kode-kode yang dibutuhkan saja.

Untuk menjalankannya, saya menggunakan fungsi sebagai berikut:

< ?php if (is_single() ) { ?>
<link rel="stylesheet" href="/style_single.css" type="text/css" media="screen" />
< ?php } else if ( is_home() ){ ?>
<link rel="stylesheet" href="/style_home.css" type="text/css" media="screen" />
< ?php } else { ?>
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
< ?php } ?>

Keterangan: Jika seseorang membuka halaman depan (homepage), maka yang akan terunduh adalah file style_home.css, jika halaman posting (single) yang dibuka, maka yang akan terunduh adalah file style_single.css, sementara jika membuka halaman-halaman selain keduanya, maka yang akan terunduh adalah file style.css.

Dengan cara ini penggunaan file CSS dapat lebih maksimal dengan ukuran file yang minimal.

6. Gabunglah dua buah (atau lebih) file CSS menjadi satu buah file CSS

Jika ada dua atau beberapa file CSS yang dibutuhkan, alangkah baiknya untuk menggabung semua file CSS tersebut menjadi satu. Hal ini terkait dengan pentingnya upaya untuk menjaga jumlah HTTP request agar tetap dalam kisaran minimal. Untuk lebih jelasnya, silahkan baca artikel sebelumnya, HTTP request , Faktor Paling Utama Penentu Performa Web.

(Katakanlah ada 3 file CSS yang akan dikombinasikan. style1.css, style2.css, dan style3.css) Cara menggabungnya bisa dilakukan dengan berbagai cara penulisan:

Cara 1

<style type="text/css">
< ?php 
include ('style1.css'); 
include ('style2.css'); 
include ('style3.css'); 
?>
</style>

Cara 2 (hampir sama atau bisa dikatakan sama persis)

Buatlah file php, berilah nama (contoh= css.php), kemudian tulislah kode berikut:
```
< ?php 
include ('style1.css'); 
include ('style2.css'); 
include ('style3.css'); 
?>
```
[Keterangan: style1.css, style2.css, dan style3.css adalah file CSS yang akan dikombinasikan]. Kemudian save (simpan) file css.php tersebut.

Untuk menjalankannya sebagai file stylesheet, panggillah file CSS itu dengan kode berikut:
```
<link rel="stylesheet" href="/css.php" type="text/css" media="screen" />
```

7. Kompresslah ukuran file CSS

Agar file CSS dapat cepat terunduh, maka file CSS tersebut haruslah berukuran seminimal mungkin. Walaupun cara-cara di atas seperti menghapus karakter yang tidak berguna sudah dilakukan, file CSS itu masih dapat kita minimalkan lagi ukuran filenya, yaitu dengan cara mengkompres (memadatkan) ukuran file CSS tersebut.

Ada dua macam kompresi yang dikenal, yaitu kompresi dengan menggunakan mod_gzip dan dengan mod_deflate. Mod_gzip adalah metode kompresi yang paling terkenal dan lebih efektif dibandingkan dengan mod_deflate. Dengan menggunakan mod_gzip, ukuran file yang dikompress dapat diperkecil sampai dengan 70%. Hal ini tentu saja dapat mempercepat proses unduh dan juga menghemat bandwidth.

Pembahasan mengenai kompresi akan dituangkan di lain kesempatan. Namun pada kesempatan kali ini akan dijelaskan secara singkat bagaimana mengkompress file CSS menggunakan kedua metode di atas.

Menggunakan mod_deflate

Editlah file .htaccess di direktori utama blog anda. Kemudian tambahkan beberapa baris kode berikut. Setelah itu save (simpan) file .htaccess tersebut.
```
# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<files *.html *.php *.css>
SetOutputFilter DEFLATE
</files>
```
Keterangan: Saya belum pernah mengaplikasikannya secara langsung pada blog ini.
Menggunakan mod_gzip

Buatlah sebuah file php (contoh: css.php). Kemudian ketikkan kode berikut pada css.php. Setelah itu copy semua kode pada file CSS yang akan dikompress, kemudian paste tepat di bawah kode berikut.
```
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
{ ob_start("ob_gzhandler");
} else {
ob_start();
} ?>

/* Kode CSS di sini */
```
Untuk menjalankannya, panggillah css.php tersebut dengan menggunakan kode berikut:
```
<link rel="stylesheet" href="/css.php" type="text/css" media="screen" />
```

8. Memanggil file CSS yang diupload di domain/subdomain yang berbeda

Maksudnya adalah bahwa file CSS yang kita panggil di dalam file HTML, itu berasal dari alamat URL yang berbeda. Sebagai contoh, dalam blog ini, saya menggunakan subdomain blog.rismaka.net untuk mengupload file-file yang dibutuhkan seperti CSS, java script, gambar, dan lain sebagainya.

Mestinya dalam header.php saya memanggil file CSS sebagai:

<link rel="stylesheet" href="http://www.rismaka.net/wp-content/themes/nama-theme/style.css" type="text/css" media="screen" />

Namun, saya memanggil file CSS yang ditempatkan pada alamat URL yang berbeda:

<link rel="stylesheet" href="http://blog.rismaka.net/wp-content/themes/nama-theme/style.css" type="text/css" media="screen" />

Adapun tujuan dari pemanggilan file CSS dari alamat URL yang berbeda adalah agar file CSS dapat ter-cache oleh peramban. (Cache=disimpan sementara selama jangka waktu tertentu). Sehingga ketika seseorang membuka halaman blog ini untuk yang kedua kalinya (secara berurutan dalam jangka waktu pendek), maka peramban tidak perlu mengunduh file CSS, karena peramban telah menyediakannya berupa cache dari pembukaan halaman yang lalu.

Manfaatnya adalah, selain mempercepat proses unduh halaman, cara ini juga dapat menghemat bandwidth.

Mungkin akan ada pertanyaan, bukankah file CSS yang dipanggil dari alamat yang sama juga bisa dicache oleh peramban? Mungkin ada benarnya. Tapi berdasarkan apa-apa yang telah saya lakukan, cara tersebut mampu menghemat konsumsi bandwidth blog ini sampai dengan 90%. Artinya proses cache yang terjadi dengan cara ini jauh lebih efektif dibandingkan dengan proses cache pada file CSS yang dipanggil dari alamat yang sama. Tidak percaya? Silahkan buktikan sendiri.

Referensi:

http://dindasmart.com Dinda Watson

using Opera Mini 4.2.14320 on J2ME/MIDP Device
Mencoba memahami… meskipun ga faham – faham…

Thank’s… akan kucoba pahami lagi.. agar benar – benar bermanfaat

oh iya kak.. aku menemukan dari catatanrudy.com optimasi wordpress dengan HTTP Compression… kayaknya seru tuh kak…
http://blogiologi.com abbie

using Firefox 3.0.11 on Windows XP
Wuih.. maknyus tenan.
Baca sekali belum mudeng bgt. Kyknya susah bgt gtu Gan.

Numpang save as boleh gak?
Ini bermanfaat bgt bt sy. Thx yah. ;)
http://taman-islam.com Bang Dje

using Firefox 3.0.11 on Windows XP
file yang layak untuk di-copy …
http://rismaka.net rismaka

using Firefox 3.0.10 on Windows XP
@dinda:
Silahkan dibaca dan dipahami lagi. Intinya adalah berani mencoba, dan jangan takut gagal. Ok nanti saya mampir ke rudy.
@abbie, @Bang Dje: Silahkan dicopy :mrgreen:
http://id.crazsite.com ryan

using Firefox 3.0.10 on Windows XP
wah sudah lama tidak bergelut dengan css, terakhir ketika saya menjumpai sebuah blog lalu tertarik dengan tema yang digunakan blog tersebut,, saya cari2 trus download temanya, ternyata tema hasil downloadan tidak sama persis, akhirnya terpaksa sy edit2 cssnya sambil ngintip dikit css tema blog itu lewat css validator, dan hasilnya mirip 98 % :D (wah komentarnya masih nyambung gk ya :P )
- http://rismaka.net rismaka
  
  using Firefox 3.0.10 on Windows XP
  Kok bisa tau 98% bung? Kenapa ga 99% aja? :D
  - http://id.crazsite.com ryan
    
    using Firefox 3.0.10 on Windows XP
    feeling :P
http://blog.sumberide.com nomercy

using Firefox 3.0.11 on Linux Mint 7
oya mas .. mohon pencerahannya nih …
saya pernah mengkompres css dengan menghilangkan semua bagian yang tidak penting … termasuk juga mengenai ‘spasi’ itu … nah, yang bikin masalah adalah ketika saya menghilangkan spasi tersebut malahan membuatnya tidak jalan …
contohnya:
#penting ul .post-line { bla bla bla } … diganti jadi:
#penting ul.post-line { bla bla bla } malah gak jalan … atau kejadiannya terbalik dari itu, ada yang harus meniadakan spasi baru bisa jalan …
- http://rismaka.net rismaka
  
  using Firefox 3.0.10 on Windows XP
  Biasanya kode CSS yang didahului tanda titik adalah sebuah CLASS. Kalau spasi yang memisahkannya dihapus, browser mendeteksinya sebagai nama, bukan class, sehingga tidak jalan.
  
  Memang yang terbaik adalah mengkompress menggunakan tool online mas. Saya biasa menggunakan CSS Drive sebagai salah satu tool favorit saya. Kalau menghapus secara manual resikonya terjadi human error
  - http://gandamanurung.com ganda
    using Internet Explorer 8.0 on Windows XP
    bukannya kode
    
    #penting ul .post-line { bla bla bla }
    
    berarti kita memiliki struktur html,misalnya seperti ini. (sebuah elemen dengan id penting, sebuah unordered list, dan sebuah elemen lain [apa saja, contoh elemen li], yang menggunakan kelas post-line.)
    
    <div id="penting"> <ul><li class="post-line"></li></ul> </div>
    
    sedangkan kode css
    
    #penting ul.post-line { bla bla bla }
    
    itu strukturnya jadi seperti. (sebuah elemen dengan id penting, sebuah unordered list dengan kelas line-post)
    
    <div id="penting"> <ul class="line-post"></ul> </div>
    - http://rismaka.net rismaka
      
      using Firefox 3.0.10 on Windows XP
      Hmm.. :thinking:
      - http://gandamanurung.com ganda
        
        using Internet Explorer 8.0 on Windows XP
        yah. kek gitu lah. :D
    - http://blog.sumberide.com nomercy
      
      using Firefox 3.0.11 on Linux Mint 7
      ya ya … hahaha … saya coba benar juga bang … thanks
      - http://gandamanurung.com ganda
        
        using Internet Explorer 8.0 on Windows XP
        hehehe.. jadi malu… :D wakakakaka… *di lempar monitor sama bang adi*
  - http://id.crazsite.com ryan
    
    using Firefox 3.0.10 on Windows XP
    sudah sy coba css drivenya, ukuran css dari 19 KB berkurang jadi 14 KB, lumayan :D
http://fanari-id.com fanari

using Firefox 2.0.0.17 on Windows XP
terimakasih bro, saya gak pernah kepikiran pakai conditional tags buat file CSS yang berbeda-beda hehehe makasi banyak :)
- http://gandamanurung.com ganda
  
  using Internet Explorer 8.0 on Windows XP
  klo saya mah, malasnya dulu yang kumat. hahahaha
  - http://rismaka.net rismaka
    
    using Firefox 3.0.10 on Windows XP
    Wahhhh.. gimana siy? Padahal master CSS.. :D
    - http://gandamanurung.com ganda
      
      using Internet Explorer 8.0 on Windows XP
      Lagi kumat males saya. Dua theme yang saya garap belum juga saya selesaikan. :D Lagi pengen cuti. argh!!!!!! Capek kerja kantoran nih.. :D
http://abrari.wordpress.com abrari

using Firefox 2.0.0.16 on Windows XP
Pake nama class-nya yang pendek2 aja, misalnya cuma 1 karakter :)

Optimasi dengan kompresi penulisan, penghilangan komentar, dll cuma baik bagi mesin (komputer). Sedangkan berefek sebaliknya bagi manusia. Tidak human-readable. Kalo kata dosen Ilkom, kode tanpa komentar itu merusak peradaban :)
- http://rismaka.net rismaka
  
  using Firefox 3.0.10 on Windows XP
  Pemakaian nama class yang hanya 1 karakter itu juga merupakan ketidakberadaaban yg pernah dipikirkan oleh manusia brar :D
  Udah lah ga usah nurut sama dosen ilkom -IPB pula- */lagi sensi sama IPB/*, toh dosen bukan nabi :D
- http://daniiswara.com/ dani
  
  using Namoroka 3.6.3 on Arch Linux
  kalau masih semantik/bermakna, kan ngga masalah. Semantik kan memang bertentangan dengan aksesibilitas/waktu muat dan ukuran berkas. :)
Pingback: Mempercepat Loading WordPress dengan HTTP Compression | RISOFTE
http://www.darmanet.co.cc BLOGNYA DARMA

using Mozilla Compatible on GNU/Linux
Kalo untuk blogspot gimana?
- http://rismaka.net rismaka
  
  using Firefox 3.0.11 on Windows XP
  Kalau blogspot saya kurang tau. Tapi secara garis besar, kurang lebih sama kok mas.
http://blogpede.blogspot.com BLOG PEDE

using Mozilla Compatible on GNU/Linux
Klo untuk css yg langsung menyatu dengan kode html itu sendiri,apa bs di optmsi?
- http://rismaka.net rismaka
  
  using Firefox 3.0.11 on Windows XP
  Bisa, yaitu dengan teknik kompresi, seperti yang sudah dijelaskan di atas.
http://ryandi.com ryan

using Firefox 3.0.11 on Windows XP
bung, saya kan pakai tema baru, di tema tersebut semua link/anchor text akan bergaris bawah, saya coba hilangkan tapi di file style.cssnya tidak ada tulisan “underlined”, jadi bingung harus ngedit yang mana,, ini file cssnya http://crazsite.com/css.txt ,, ditunggu bantuannya :)
- http://rismaka.net rismaka
  using Firefox 3.5 on Windows XP
  Sudah saya lihat bung. Element a , secara default memang underline. Untuk mengubahnya, perlu penambahan element baru.
  Ganti saja element berikut:
```
a{color:#807D7A;}
```
  dengan:
```
a:link, a:visited {
	color: #3300FF;
	text-decoration:none
	}

a:hover, a:active {
	text-decoration:none
	}
```
  Untuk pewarnaannya, bung ryan yg lebih tau apa baiknya. Jadi silahkan diutak-atik sendiri, semoga sukses :)
  
  */ada beberapa element yg perlu diubah, yaitu dibagian basic, sidebar, layout, dlsb.*
  - http://ryandi.com ryan
    
    using Firefox 3.0.11 on Windows XP
    terima kasih atas bantuannya :D
http://www.indohijau.net aldy

using Firefox 3.0.11 on Windows XP
Mas, mohon share…jika saya katakanlah mengambil theme gratis, kemudian saya oprek sedemikian rupa sehingga bentuk asalnya udah berubah, bahkan codingnya juga sebagian besar saya ubah, apa masih harus dicantumkan template asal ?
- http://rismaka.net rismaka
  
  using Firefox 3.5 on Windows XP
  Etika-nyasiy begitu mas. Tapi itu terserah mas Aldy yg sudah mengeditnya. Saya sendiri tetap mencantumkan nama dan link pembuat theme yg saya pakai walau hampir semuanya sudah saya ubah, karena saya menyadari betapa sulitnya membuat theme itu :)
Pingback: Optimasi JavaScript (1) : Pendahuluan | RISOFTE
http://www.indohijau.net aldy

using Firefox 3.0.11 on Windows XP
Makasih atas pencerahannya mas.
Pingback: Optimasi JavaScript (1) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer | RISOFTE
http://www.indohijau.net aldy

using Firefox 3.0.11 on Windows XP
maaf mas, masih gak mudeng. dengan perintah berati file css-nya simpan pada blog.rismaka.net ?
http://www.indohijau.net aldy

using Firefox 3.0.11 on Windows XP
maaf…maaf, penulisan sniplet-nya salah, seharusnya :
dengan penulisan ini :
<link rel="stylesheet" href="http://blog.rismaka.net/wp-content/themes/arthemia-premium/style.css" type="text/css" media="screen" />
Berati file CSS-nya di simpan di :blog.rismaka.net ?
- http://rismaka.net rismaka
  using Firefox 3.5 on Windows XP
  Iya mas, betul. Saya menempatkan file CSS di luar alamat rismaka.net. Saya menggunakan subdomain blog.rismaka.net sebagai tempat/sumber CSS eksternal.
  
  Asumsi saya adalah dengan meletakkan CSS di luar alamat domain utama, file CSS dapat ter-cache oleh browser lebih cepat. Sehingga browser tidak perlu memanggil file yg sama berulang-ulang setiap kali kita mengakses halaman tsb.
  
  Utk penulisan sniplet pada komentar, sebaiknya penulisan kode tsb dituliskan setelah kode “<code>” dan sebelum kode “</code>”. Hasilnya akan terlihat seperti ini:
```
<link rel="stylesheet" href="http://blog.rismaka.net/wp-content/themes/arthemia-premium/style.css&quot; type="text/css" media="screen" />
```
  */maaf, utk komentar mas Aldy yg lain saya jawab nanti ya, saya lagi sibuk banget sekarang.. Harap maklum :) /*
http://www.indohijau.net Aldy

using Firefox 3.0.11 on Windows XP
Gak apa-apa mas….saya “langganan langsung kok” :D
http://www.syafiiq-aqil.web.id/ syafiiq

using Firefox 3.0.11 on Windows XP
terima kasih lagi tipsnya kak, dah nyoba nih filenya berkurang 30%
http://saungweb.blogspot.com Saung Web

using Firefox 3.5.1 on Windows XP
waduh mudeng juga.. tapi kayaknya ok nih tipsnya ntar2 dicoba ah..
http://abuabdurrahman.wordpress.com muhammad taufiq

using Firefox 3.0.13 on Windows XP
assalamu alaikum

akhi rismaka apa bagaimana kabarnya?

saya ingin merubah seluruh file html (exs: cinta) dalam satu folder, yg memiliki CSS. ada satu kalimat yg ingin saya hapus bagaimana caranya/kodenya?, karena saya coba otak-atik dengan terkaan lalu membuka file html tadi kembali memang yg ingin saya hapus sdh tidak kelihatan, lalu saya copas ke word juga tdk terbaca hanya samar-samar seperti coretan lurus tegak, namun ketika di copas ke notepad ternyata masih ada. objek yg saya maksud misalnya: #penjelasan…. mohon jawabannya tolong di forwad juga ke email saya untuk arsip. terima kasih.
- http://cerita.rismaka.net/ rismaka
  
  using Firefox 3.5.1 on Windows XP
  Wa’alaikumussalam warahmatullah
  
  Alhamdulillah kabar saya baik mas :)
  
  Mengenai pertanyaanya, saya agak kurang paham maksudnya. Mungkin bisa dikirimkan contoh file html tersebut ke email saya akh? Terus dijelaskan apa yang ingin diganti dalam file html tersebut.
http://liliek.muntilanation.org/ Oelil

using Firefox 3.5.3 on Windows XP
kuikuti langkah demi langkah…ternyata cukup berhasil
trims mas infonya…
Pingback: Tips Menghemat Paket Bandwidth » Kalamsoft Webhosting
http://yosbeda.com yos

using Firefox 3.5.5 on Windows 7
coba2 malah error, mucul pesan “theme req not found” hahahaa :-D, untung punya backup’anya :-D,,,
http://wp.me/pO0bx-5C sqa indonesia

using Firefox 3.0.18 on Ubuntu 9.04
Baru tahu aq klo css ku tidak efektif karena terlalu banyak spasi… terima kasih infonya :D
Pingback: Kamus Besar Istilah Blogger | RISOFTE
Pingback: Mempercepat Loading WordPress dengan HTTP Compression | RISOFTE
http://adhani.com adhani

using Firefox 3.6 on Windows XP
sebelumnya saya hanya tahu menghapus ruang space yang kosong, terima kasih infonya bermanfaat
http://somethingonmymind.com On My Mind

using Firefox 3.6.10 on Windows XP
dah dari dulu ane coba mempelajari yang satu ini. tapi tetap aja ga bisa, terkadang ampe puyeng ini pala
Pingback: Kamus Besar Istilah Blogger « halimicirebon
Pingback: Guzztu Blog - Mempercepat Loading WordPress dengan HTTP Compression

rismaka .NET

Me, WordPress, and My Empty Boring World

Cascading StyleSheet (CSS) dan 8 Tips Optimasinya

Apa itu CSS?

Optimasi file CSS

1. Panggil file CSS di bagian atas (header.php)

2. Hilangkan space (ruang) “komentar”

3. Hindarilah penulisan kode yang tidak efektif

4. Hapuslah "white space" (spasi) atau ruang-ruang yang tidak berguna

5. Gunakanlah kode CSS sesuai dengan kebutuhan halaman web

6. Gabunglah dua buah (atau lebih) file CSS menjadi satu buah file CSS

Cara 1

Cara 2 (hampir sama atau bisa dikatakan sama persis)

7. Kompresslah ukuran file CSS

Menggunakan mod_deflate

Menggunakan mod_gzip

8. Memanggil file CSS yang diupload di domain/subdomain yang berbeda

Referensi:

Apa itu CSS?

Optimasi file CSS

1. Panggil file CSS di bagian atas (header.php)

2. Hilangkan space (ruang) “komentar”

3. Hindarilah penulisan kode yang tidak efektif

4. Hapuslah "white space" (spasi) atau ruang-ruang yang tidak berguna

5. Gunakanlah kode CSS sesuai dengan kebutuhan halaman web

6. Gabunglah dua buah (atau lebih) file CSS menjadi satu buah file CSS

Cara 1

Cara 2 (hampir sama atau bisa dikatakan sama persis)

7. Kompresslah ukuran file CSS

Menggunakan mod_deflate

Menggunakan mod_gzip

8. Memanggil file CSS yang diupload di domain/subdomain yang berbeda

Referensi:

Tulisan yang Terkait

Bagikan Ke: