Side22Press

Hampir semua situs yang ada telah mengaplikasikan penggunaan halaman penggaya (Cascading Style Sheet atau 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 StyleSheets dan 1 buah kata styles untuk mepersingkat 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 mensupport 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 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 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.

   • Pada Inline CSS : Meminimalkan HTTP Request, tetapi ukuran HTML akan membengkak.
   • Pada Ekternal CSS : HTTP Request akan bertambah, tetapi ukuran file yang ingin anda sajikan kepada pengunjung tetap terjaga.

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

   • Jika setiap kunjungan hanya melakukan 1 kali page view lalu pergi, silahkan pilih Inline CSS.
   • Jika setiap pengunjung melakukan klik, kemudian klik lagi dan lagi, seharusnya pilihan jatuh pada ekternal CSS.
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 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. Terima kasih, mudah-mudahan bermanfaat.