5+ Cara Optimasi CSS

Hampir semua situs yang ada telah mengaplikasikan penggunaan halaman berkas penggaya, CSS untuk mempercantik dan memperindah penampilan halamannya.

Hampir semua orang yang bersentuhan dengan HTML, akan bersinggungan pula dengan CSS. Meskipun CSS bukan materi baru dalam dunia Web Design, Tetapi alasan apa yang membuat CSS begitu penting ? dan Kenapa saya berkeinginan menuliskannya kembali disini ?

Perlukah mendesain ulang sebuah Style Sheet ?

Tidak perlu, jika tampilan tersebut sudah menjadi soul atau roh sebuah situs atau blog. Jadi, abaikan tulisan saya ini. Tetapi, seorang pemilik situs atau blog yang suka memanjakan pengunjung dengan sebuah penampilan baru secara berkala, serta concern dengan materi site performance. Maka yang bersangkutan akan selalu merasa perlu untuk melakukan optimasi Cascading Style Sheets.

Sebelum menyebutkan alasan alasan normatif pada materi site performance tentang optimasi CSS, berikut adalah sebuah pertanyaan yang sederhana saja

"Setelah seseorang tidak memerlukan lagi sebuah notebook atau netbook murah, laptop bahkan desktop untuk berselancar didunia maya, dan Sejak gadget-gadget semakin pintar untuk mengakomodasi keperluan yang sudah menjadi kebutuhan sekunder manusia saat ini (bermain internet, kata tetangga), Bagaimana perwajahan situs dan penampilan blog anda disana ?".

Saya pribadi menganggap, bahwa pemahaman tentang hal tersebut diatas yang mungkin menjadi faktor dan alasan lain kenapa Google mulai gencar melakukan kampanye Site Performance dengan Page Speed, setelah Yahoo juga telah melakukannya lebih awal dengan YSlow, ya..apa lagi kalau bukan untuk Messenger andalannya.

Alasan normatif bahwa Optimasi CSS itu penting ?

Hanya untuk CSS, Google dan Yahoo menulis penjelasan secara khusus dan terperinci tentang masalah penanganan, perlakukan dan optimasi Cascading StyleSheets dalam materi site performance.

Percaya atau tidak ?, Setelah merangkum 42 materi untuk improvisasi dan optimasi performa sebuah situs pada tool Page Speed dan Yahoo! YSlow, anda akan menemukan 11 kata CSS sebagai kependekan Cascading Style Sheets dan 1 buah kata styles sebagai akronim kata Styling Sheets.

11+1 = 5 ? Cukupkah Optimasi CSS dengan 5 Trik saja ?

Menggabungkan 12 petunjuk tentang CSS yang terdiri dari 7 petunjuk pada Page Speed dan 5 aturan pada YSlow. Kita akan menemukan persamaan dan kemiripan judul materi pembahasan optimasi CSS untuk meningkatkan performa situs.

Dan berikut adalah 5+ tips Optimasi Cascading StyleSheets untuk Site Performance pada blog dengan engine WordPress. 5 trik ini adalah satu kesatuan yang tidak dapat dipisah-pisahkan, satu tips akan melengkapi trik yang lain.

1. Minimalkan ukuran file CSS

Meminimalkan ukuran file artinya mengurangi jumlah byte pada file CSS. Dalam hal ini, 1 karakter (termasuk sebuah spasi) bernilai 1 byte dan anda lebih memahami ini dibanding saya. Mungkin anda juga mempunyai persepsi dan trik sendiri untuk mengatasi masalah ini. Tapi berikut ini adalah yang saya pikirkan, sekedar contoh saja :

  1. Menghapus semua spasi pembatas antara selektor properti dan properti value, tetapi tidak pada selektor selektor atau value value (dalam 1 properti), contoh :
    /*belum dioptimasi*/
    tag_key selektor   { properti: value value; properti: value }
     /*teroptimasi*/
    tag_key selektor{properti:value value;properti:value}
    
  2. Pada pewarnaan, mana yang anda pilih, {background-color:#aaaaaa}, {background:#aaaaaa}, atau {background:#aaa}. Yang terakhir, adalah jelas yang paling mini, dan tetap valid. Jadi, optimasi bukan alasan untuk menjadi tidak valid.
  3. Membuat nama ID dan nama Class sependek mungkin sebagai tag_key mungkin bermanfaat, tetapi mempertimbangkan sisi pengembangan dan perbaikan akan lebih bermanfaat jika mengabaikan cara ini.
  4. Menghilangkan komentar ( /* komentar pada optimasi CSS layout */ ), juga akan bermanfaat, tetapi sekali lagi, bagaimana dengan sisi development ?
  5. YUI Compressor dan cssmin.js adalah contoh tool kompresi css yang gratis dan bisa di pergunakan siapa saja. Tool ini akan menghapus semua komentar dan spasi pada CSS yang dianggap tidak perlu. Jadi, untuk alasan pengembangan dikemudian hari, sebuah backup file asli CSS tetap perlu didokumentasikan dengan baik sebelum melakukannya.

2. Effisiensi dalam 'Coding'

Effisiensi yang baik adalah meniadakan sesuatu yang memang tidak perlu dan bukan berarti menghilangkan sesuatu yang sebenarnya harus ada, dalam optimasi CSS, coding yang effisien termasuk didalamnya antara lain ;

  1. Memisahkan styling yang tidak diperlukan untuk sebuah halaman dengan membuat sheet yang berbeda, contoh kasus : CSS untuk merender kolom komentar hanya akan dipergunakan pada single.php atau page.php, sebaiknya tidak perlu didownload browser yang hanya membuka halaman front-page atau index.php yang tidak menampilkan baris-baris komentar audience.
  2. Belajar menggunaan selektor secara bijaksana, terletak pada :
    • Tidak menulisan tag_key berlebihan dan atau menyertakan selektor yang berlebihan pula. Menuliskan 1 tag_key + 1 selektor dalam setiap baris kode masih bisa ditolerir untuk menghindari ketidak-effisiensi-an coding pada descendant selectors, adjacent selectors, dan overly qualified selectors. contoh:
      .sebuah_class ul li img{..}
      .sebuah_class > uli > li > img{..}
      form#registrasi{..}
      div.meta div {..}
      

      bagaimana dengan :

      .sebuah_class{..}
      .sebuah_class ul{..}
      .sebuah_class li{..}
      .sebuah_class img{..}
      #registrasi{..}
      .meta div {..}
      
    • Menghindari penggunaan selektor pseudo :hover pada elemen yang tidak dikategorikan sebagai pengait (anchor) <a>. Karena hal ini berpengaruh pada performa halaman, terutama pada halaman strict-doctype yang dirender menggunakan IE7 dan IE8.

3. Menghindari CSS Expressions

Expressions seperti apa yang tidak boleh ? Bagi yang expert pada penggunaan Properti Expressions pada CSS tentu hanya tersenyum. Tetapi bagi saya yang baru kenal, ini harus dituliskan.

Selain properti-properti standar, CSS juga men-support penggunaan properti yang digenerate secara dinamis oleh bahasa program yang lain, seperti javascript. Properti dinamis ini mulai diperkenalkan oleh IE sejak versi 5 (dhtml). Sayangnya beberapa peramban yang lain akan mengabaikan properti ini. Sekalipun pengunjung menggunakan IE, hal ini tetap akan berpengaruh pada speed dan performa. Karena tidak menutup kemungkinan, ekpresi yang digunakan akan menggenerate properti setiap pergerakan mouse pada kanvas halaman.Tegakah anda pada pengunjung anda ?

4. Menggabungkan beberapa CSS dan Membuatnya eksternal

Saya dan anda pengguna WordPress yang memanfaatkannya sebagai sarana menulis dan tidak lebih, tidak perlu memikirkan masalah ini. File CSS didalam tema WodPress yang biasanya anda panggil dari hearder.php dengan cara :

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

atau

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

sudah menunjukkan bahwa file CSS sudah ditulis secara ekternal, dan tidak perlu dioptimasi lagi. Matt dan kawan-kawan sudah memikirkan masalah ini jauh-jauh hari sebelum kita memanfaatkannya. Yang perlu dihindari adalah menuliskan css secara langsung dalam halaman (inline internal CSS), seperti berikut ;

<html>
  <head>
  </head>
<body>
  <!-- konten1 -->
  <style>
    tag_key selektor {..}
    ....
    tag_key selektor {..}
  </style>
  <!-- konten2 -->
</body>
</html>

karena setiap kali halaman dibuka, setiap itu pula style yang ada dalam halaman HTML anda harus di download ulang oleh peramban. Inline Internal CSS dan Ekternal CSS berhubungan erat dengan HTTP Request, beberapa webmaster selalu mengingatkan agar berhati-hati dengan HTTP Request karena ini adalah faktor paling penting sekaligus paling mahal untuk sebuah situs.

Silahkan berimprovisasi. Saya melakukannya dengan modal evaluasi pada jumlah klik dalam setiap kunjungan, dan sekedar saran :

5. Meletakkan CSS diantara elemen head dalam dokumen

Rasanya tidak ada yang perlu dijelaskan untuk trik ke-5 pada optimasi CSS untuk site performance ini. Pada contoh diatas, ketika peramban menemukan inline style dalam elemen <body> maka peramban harus menunda proses render –konten2– dan atau mengulang proses rendering –konten1– ( reflows pada konten1 and shifting pada konten2 ).

  1. Page Speed menulis Put CSS in the document head dan YSlow menulis Put CSS at top. Yup!,.. Letakkan CSS diantara elemen <head></head> sebuah dokumen html. Tapi sebenarnya dari mana acuan resmi YSlow dan Page Speed ? Jawabnya adalah : Spesifikasi HTML dari W3C.

    Berbeda dengan link pada anchor <a>, sebuah [Link] sebaiknya hanya diletakkan pada elemen head sebuah dokumen.

    “Monolog : Ach,.. Saya selalu senang, kalau sebuah standarisasi dijadikan sebagai sebuah pedoman. [mode-on : narsis]”

  2. Jika dalam sebuah keadaan terpaksa harus menempatkan pula request untuk javascript pada elemen head, sebaiknya mendahulukan CSS seperti ilustrasi berikut, ini adalah How to optimize the order of your styles and your scripts.
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet1.css" />
    <link rel="stylesheet" type="text/css" href="stylesheet2.css" />
    <link rel="stylesheet" type="text/css" href="stylesheet3.css" />
    <script type="text/javascript" src="scriptfile1.js" />
    <script type="text/javascript" src="scriptfile2.js" />
    </head>
    

Rasanya cukup sekian saja tulisan tentang 5 tips optimasi CSS untuk site performance yang saya pelajari. Untuk master-master CSS silahkan tambahkan kalau ada kekurangan.

5+ Cara Optimasi CSS

Published on : Jan 19, 2010. Last modified at : Apr 24, 2010.


Click to share on twitter , digg it, or save this article to del.icio.us.

article Navigation

Related to “5+ Cara Optimasi CSS”.

31 Opinion for “5+ Cara Optimasi CSS”.

Ajib, PakDhe, panjangnya… :)

→ Terkait poin 1b dan 1c:
Menurut saya, poin 1 b menganjurkan ringkas. Tapi poin 1c mendahulukan semantik, walau berpeluang menjadi tidak ringkas lagi. Jika hitungan per bit sangat diperhitungkan.

→ Terkait ‘http request’, berkas CSS eksternal multipel berarti multi ‘request’ juga, kan? :) Tulisan Mas Choen di idtutorial.com juga sempat membahas tentang Inline CSS.

Optimasi yang sedikit agak panjang – Rayimas,.. Saya selalu berusaha menulis yang pendek tapi bermanfaat, tapi tidak pernah bisa. terpaksalah.. meskipun tetap tidak bermanfaat juga buat rayimas. :)

Optimasi point 1 atau keseluruhan ? – Sebenarnya sudah diedit beberapa kali untuk menuliskannya kembali dengan obyektif, tetapi selalu kesulitan menahan kata hati tentang ‘semantik’ mu. Membahas tentang ‘tetap semantik tapi juga ringkas’ jadi ketemu ide baru nich, siapin ach ? :)

Box terakhir hanya illustrasi, jika ada yang merasa terpaksa untuk melakukannya. Untuk menghindari multiple css, Saya sendiri justru menjadi nakal dengan mengedit – hapus berkas css yang ditambahkan oleh beberapa plugins terpakai.

Terima kasih info tentang idtutorial.com, nanti dikunjungi.
Terima kasih juga untuk sepenggal kata dari komentarmu terdahulu, ‘Opera’ – Mudah-mudahan floating footer-nya Yrrah tidak mengganggu lagi.

Bermanfaat kok, Pakdhe. :) Wah ditunggu itu ide barunya. Waduh, saya masih nyicil ngedit CSS saya. Pokoknya bakal selalu versi beta.

Hayahhh,…
Betul pokoknya bertha terus, Oops.. beta terus.
Udah ach, ‘heating’ kedua cukup dengan Optimasi CSS saja.
monolog : HTML sudah, CSS tinggal nunggu evaluasi.
Bantu ide rayimas,.. jangan cuma mencibir aja.

Jangan kebanyakan diulik, PakDhe. Konversinya bagaimana? mau dibawa ke arah mana blog ini?

Mau ngikuti konsep mana? SEO? Standar W3C? Trafik?

Mau lolos tes mana? W3C? Validome? Nibbler Silktide? Basic Website Review? ATRC? Ready.mobi?

Semuanya sah aja tergantung yang punya. Saya kan di luar sistem. Bukan mencibir. Hanya berusaha lateral thinking saja. :)

Mission Accomplished. Hmm… 2 bulan baru berani jawab.coba kalau sampai 5 ?
1). PR nya kebanyakan. 2). Mengerjakannya juga disempat-sempatin.
Syukurlah… pertanyaan beratmu bisa saya selesaikan meski masih amburadul.
W3C=Strict, Trafik=jeblok, CSS=level3, Validome=Strict, Nibbler Silktide=7.4, BWR=95.83, Ready.mobi=burung blekok, ATRC WCAG-A2=3 masalah, yg susah untuk saya hapus karena saya masih butuh servisnya feedburner, 508 & WAI ngikut kena imbas gara-gara aku ga bisa kasih [Label] yang udah dipake untuk default email komentator WP.
Apalagi ya ? Printability sudah juga udah. Tinggal didokumentasikan satu-satu nanti sekalian dengan Optimasi CSS lanjutan. Kalau sempat… :(
Makasih ya Rayimas. Untuk sementara jangan kasih PR yang berat-berat dulu. :-)

salam kenal, tulisannya bagus sekali :)

terima kasih, salam kenal juga. “bagus sekali ?!”, mungkin terlalu berlebihan jika dibandingkan takien dot com. Ijin untuk belajar memperdalam ilmu dari sana.

hahah emang bener kok … :)
kadang orang menganggap remeh hal2 kecil, termasuk saya menganggap remeh soal optimasi CSS ini heheh

padahal kalau di cek pake pagespeed, wuih banyak warning nya…
tapi tetep aja males memperbaikinya :(

Kadang-kadang memang timbul sebuah pertanyaan, Apakah memang masih perlu membuat yang simple, sederhana, standard untuk UA yang semakin modern saat ini ?.

IMO: ngga perlu, jika sudah tertarget jelas audiensnya.

– Google ngga make doctype. Lancar-lancar aja.

– HTML5 dipake di video, padahal belum banyak peramban yang mengadopsi, termasuk Firefox. Kecuali mengubah about:config untuk enable html5.

– Dukungan MSIE lawas jelas-jelas makin diporotin.

– Fitur aksesibilitas di tiap peramban sudah makin canggih.

Tinggal kesadaran pengguna memanfaatkan fitur canggih di tiap peramban. Jika pengguna belum aware, ya pengelola yang menyederhanakan antarmukanya, PakDhe. :)

Salut untuk trialnya, PakDhe.

Pak dhe, mau tanya, hanya ingin memastikan saja

? Terkait poin 4, yang dimaksud itu benar-benar “inline” atau “internal”?

? Jika CSS dituliskan di dalam file HTML dalam bentuk
<style>
tag_key selektor {..}
….
tag_key selektor {..}
</style>

itu disebut inline atau internal?

Lantas bagaimana dengan yang seperti ini:

<div style"tag_key1:…; tag_key2:…; tag_key3:…;">

Apakah disebut inline atau internal? Saya jadi bingung…..

Saya selama ini mengoptimasi CSS dengan mengkompressnya dengan minify, tapi yang terjadi adalah ketika saya hendak melakukan pengeditan, malah tambah ruwet ngebenahinnya.

Satu lagi pak dhe. Saya biasa menggunakan gzip untuk mengkompress CSS eksternal, dimana file CSS tsb dipanggil oleh sebuah file PHP yang berisikan markah utk kompresi gzip, sehingga yang dipanggil di dalam header berbentuk seperti ini:

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

Nah pertanyaannya, apakah pemanggilan CSS seperti itu dibenarkan oleh validator? Secara saya pernah mengeceknya di jigsaw. Tapi setelah situs saya dicek, dikatakan bahwa file CSS tidak dikenal..

Padahal tips itu benar2 ampuh untuk mempercepat waktu muat halaman lho

Mas Adi,…
aHhhh… (pusing mau jawab pertanyaan master).
Sayangnya tidak ada Bang Ganda yang suka mengkritisi linguistik disini yach :(

Sudah diedit mas, mudah-mudahan tidak membuat kebingungan diri saya sendiri juga. Istilah sudah diganti Internal CSS dan Inline Style mas.

Terima kasih koreksinya.

Mas Adi,… Saya khan belajarnya dari mas Adi, senyap punya. :)
Maaf. :(

Dan saya menggunakan metode tersebut pada tema ini, ternyata dikenali dan valid koq. Apakah mungkin karena at-rule medianya mas ya ? cmiiw.

monolog: tulisan "Stupid Modul CSS" koq ga nyambung kesini ya ?

Siyal, gara-gara kalian (Pakdhe dan Mas Adi), saya mesti nyicip CSS lagi. Percobaan dan tips yang lain terkait optimasi HTML dan CSS dari kalian saya tunggu ya.. :)

yang trackback kadang mau, kadang lama, lain waktuu malah ngga ada kabarnya. Kecuali pas ngedit ulang halaman yang ngirim pingback.

Pakdhe, waktu di-ctrl+a (untuk selanjutnya di-ctrl+c; takut diskonek trus ilang), teks di kotak isian komentar ini warnanya kurang kontras. :P

Mas Adi,
terkait validasi CSS, pakai penulisan standar charset=utf-8, bukan charset:utf-8. :)

Pantas saja kalau memang benar sedang 'Nyicip CSS lagi', 3 hari tanpa update rasanya aneh banget untuk unessential weblog.

Terima kasih untuk masukannya Rayimas. Saat ini style sheets data CSS untuk isian komentar sedang dalam evaluasi lanjutan dan perbaikan.

Update juga ngga mesti kok Pakdhe. Kecuali kalau lagi kalap posting. Itu pun waktunya ngga runut. Suka-suka saya lah.

BTW MWN memang cuepet je.. :)

Please Rayimas,… yang 'kalap posting' itu yang membuat jadi sedikit menundukkan kepala… :D
Habis kalap posting terus semedi tak berkesudahan tanpa kabar-kabari, hingga timbul pertanyaan, 'hidup atau mati sih ?' :(
Apa boleh bikin, itu juga suka-suka saya ach :D :D

Dani,
Maksudnya? bukankah dua2nya sama2 UTF-8?

Menurut rujukan di Charset and encodings (W3C), penulisannya charset=utf-8. Entah jika algoritma yang dipakai oleh validator CSS itu berbeda. cmiiiw

[…] 5+ Cara Optimasi CSS […]

Maaf Pakdhe, saya baru sadar kalau warna latar dan teks (putih di atas biru) isian dan konten Web saat disorot itu ternyata default bawaan peramban Web. :(

Rayimas,…
Iya, ga apa-apa. Meski saya juga sempat kebingungan mencari solusinya. Apalagi virtual boxnya kemaren habis dibongkar :)

Menghindari penggunaan selektor pseudo:hover pada elemen yang tidak dikategorikan sebagai pengait (anchor) <a>

Waduh saya banget itu mah… hkhkhk… jadi malu… tapi lagi senang sih… untuk sementara biarin dulu deh…

edited by admin

Mas Nur,…
Jika tampilan tema WordPress yang digunakan sudah menjadi soul atau roh sebuah situs atau blog [temasuk milik Mas Nur], selama tidak ada yang komplain, protes dst. Abaikan tulisan optimasi CSS ini.

Pakde Harry,
Sepertinya saya menemukan sedikit kontra tentang pengoptimalan CSS itu.

PageSpeed menganjurkan meminimalisir jumlah berkas CSS terkait http request. Sehingga, semua CSS media (all: screen, handheld, print) saya jadikan satu.

Sedangkan W3CMobileOK menganjurkan ukuran berkas seminimal mungkin (total kurang dari 20 kb). Dan ini bisa didapat dengan memisahkan CSS untuk media handheld. Akan ada lebih dari 1 link relationship di head. Belum yang print jika ikut dipisah.

Pemakaian @import memang tidak dianjurkan.

Menurut Pakde, solusinya apa?

Rayimas…
Mudahkan saya memahami keadaan ini, Rayimas sepertinya mengetahui apa yang sedang ada di hadapan saya akhir akhir ini.

Kontra untuk kasus ukuran berkas & http request, rasanya tidak juga. Duh… perlu data dong. Begini ;

  • Untuk CSS, masih bisa dalam satu link relationship kok. Saya menggunakan @ media screen,projection{ @ media print{ @ media handheld{} } }, kemudian diparsing via php sehingga bisa dikompresi dengan output buffer (ob) itu. Memang sih, perlu oprek index.php induknya WP.
  • Untuk CSS, Optimalisasi pemanfaatan namespace. Untuk pembelajaran namespace yang saya lakukan, sampai saat ini ukuran total lembar gaya blog ini bisa mencapai 10.8 kilobita (tanpa kompresi, plus print.css, minus handheld.css). Jika di injeksi dengan @ media handheld{} rasanya akan masih akan kurang dari 15 kb.
  • Untuk Markah, HTML5 pantas di lirik. Apalagi jika rekomendasi namespace yang baru, yang kita diskusikan itu juga sudah di temukan beliau beliau. Belum, saat ini saya masih belum tertarik.

Anggaplah artikel ini adalah yang paling besar ukuran berkasnya. Silahkan tengok ukuran dokumen ini via Developer tool pada Firefox. Jika script & image saya hilangkan, maka saya masih mungkin mengembed video berformat 3gp sebesar 5kb, dengan asumsi ukuran maksimal 20kb untuk handheld.

Pakde Harry,
Saya cek pakai W3CMobileOK & Ready.mobi.

Pakai W3CMobileOK: gagal, sepertinya ada semacam blok di server.

Hasil cek side22.com pakai Ready.mobi:

The size of page markup is 22234 bytes

The total download size for this page is 54770 bytes

Hasil cek halaman ini oleh Ready.mobi:

The size of page markup is 65160 bytes

The total download size for this page is 114713 bytes

Rayimas…
Padahal saya sudah mencoba mengelak loh. Saya belum selesai dengan pekerjaan rumah yang mobi/le ini Rayimas. Sebentar dulu.

Leave an Opinion

Important : LOW isn't intended to on topic opinions, just be polite. You may use strict markup only. Opinions failing these requirement will be edited. Spam opinion won't get published.
Please, enter your real name and your valid email address (in required field). Don't worry, i'll kept your email private.










Random Learning