Cascading StyleSheet (CSS) dan 8 Tips Optimasinya

Submitted by rismaka on June 21, 2009 – 7:00 am46 Comments
This entry was writen by Rismaka, The Admin, Biochemist (sometimes) and Data Management Staff of PT. Ex-WF. [Contact: rismaka[at]rismaka.net]

Cascading StyleSheetBagi 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 atau Cascading Style Sheets 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 (Cascading Style Sheet) 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 browser (peramban) akan mengunduh setiap file yang dibutuhkan, tak terkecuali file CSS. Besarnya ukuran file CSS (dalam KB) sangat berpengaruh terhadap performa atau kecepatan proses download 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. Jalankan (eksekusi) 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:

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

atau

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

Tujuan dari perlunya file CSS dieksekusi 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] Komentar adalah setiap tulisan/huruf yang diawali dengan tanda /* dan diakhiri dengan tanda */ Contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
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

1
/* 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 browser. Dengan menghapus komentar berarti kita dapat memperkecil ukuran file CSS, yang tentunya dapat mempercepat proses download.

3. Hindarilah penulisan kode yang tidak efektif

Contoh penulisan yang tidak efektif:

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

Bisa diganti dengan:

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

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

Sebagai contoh, kode berikut:

1
2
3
4
5
6
7
8
9
#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:

1
2
#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
==============================================
Total = 20 KB

Jika kita membuka halaman depan (homepage), maka browser pun akan mendownload 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 blog ini tampilan homepage 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:

1
2
3
4
5
6
7
<?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 tereksekusi adalah file style_home.css, jika halaman posting (single) yang dibuka, maka yang akan tereksekusi adalah file style_single.css, sementara jika membuka halaman-halaman selain keduanya, maka yang akan tereksekusi 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:

a. Cara 1

1
2
3
4
5
6
7
<style type="text/css">
<?php
include ('style1.css');
include ('style2.css');
include ('style3.css');
?>
</style>

b. Cara 2 (hampir sama atau bisa dikatakan sama persis)

Buatlah file php, berilah nama (contoh= css.php), kemudian tulislah kode berikut:

1
2
3
4
5
<?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:

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

7. Kompresslah ukuran file CSS

Agar file CSS dapat cepat terdownload, 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 download 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.

a. Menggunakan mod_deflate

Editlah file .htaccess di direktori utama blog anda. Kemudian tambahkan beberapa baris kode berikut. Setelah itu save (simpan) file .htaccess tersebut.

1
2
3
4
5
6
7
# 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.

b. Menggunakan mod_gzip

Buatlah sebuah file php (contoh: css.php)
Ketikkan kode berikut pada css.php.
Copy semua kode pada file CSS yang akan dikompress, kemudian paste tepat di bawah kode berikut.

1
2
3
4
5
6
7
8
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ ob_start("ob_gzhandler");
} else {
ob_start();
} ?>

/* Kode CSS di sini */

Save (simpan) file css.php tersebut.

Untuk menjalankannya, panggillah css.php tersebut dengan kode berikut:

1
<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 http://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:

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

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

1
<link rel="stylesheet" href="http://blog.rismaka.net/wp-content/themes/arthemia-premium/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 browser. (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 orang tersebut tidak perlu menunggu proses download file CSS tersebut selesai, karena browser 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 browser? 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.

–o0o–

Demikian yang bisa disampaikan mengenai tips atau cara yang bisa dilakukan untuk mengoptimasi file CSS (Cascading Style Sheet) terkait peningkatan performa atau kecepatan loading web. Semoga bermanfaat. Jika ada yang mau menambahkan atau mengoreksi, silahkan ungkapkan melalui kolom komentar di bawah.

Referensi:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://developer.yahoo.com/performance/rules.html
http://www.roscripts.com/How_to_speed_up_your_website-175.html
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

Artikel yang berhubungan:

  1. Mempercepat Loading WordPress dengan HTTP Compression
  2. Optimasi JavaScript (1) : Pendahuluan
  3. TIPS MENINGKATKAN BANDWIDTH
  4. Tips Menginstal File JAD secara offline
  5. 6 Tips Optimasi Gambar Untuk Web
  6. Sembilan Tips Mengamankan WordPress
  7. Tips Menghemat Paket Bandwidth

Berlangganan Artikel

Dengan berlangganan, anda akan dikirim artikel terbaru blog ini secara lengkap. Masukkan alamat email anda, kemudian tekan tombol subscribe:

Cari Artikel

Jika tidak mendapatkan informasi yang diinginkan, anda bisa manfaatkan mode pencarian berikut ini:
Next Post: »
« :Prev Post

46 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.