June 21, 2009 — CSS (Cascading Style Sheet) adalah sebuah dokumen yang digunakan untuk mendesain tampilan dan tata letak halaman web, CSS ini bersifat embeded pada tag HTML. bagaimanakah mengoptimasi file CSS tanpa menghapus sebagian isi dari file CSS tersebut?. Cascading StyleSheet (CSS) dan 8 Tips Optimasinya diulas oleh rismaka pada June 21, 2009. Berikut ulasan selengkapnya.
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.
Pingback: Mempercepat Loading WordPress dengan HTTP Compression | RISOFTE
Pingback: Optimasi JavaScript (1) : Pendahuluan | RISOFTE
Pingback: Optimasi JavaScript (1) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer | RISOFTE
Pingback: Tips Menghemat Paket Bandwidth » Kalamsoft Webhosting
Pingback: Kamus Besar Istilah Blogger | RISOFTE
Pingback: Mempercepat Loading WordPress dengan HTTP Compression | RISOFTE
Pingback: Kamus Besar Istilah Blogger « halimicirebon
Pingback: Guzztu Blog - Mempercepat Loading WordPress dengan HTTP Compression