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 ?
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.
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.
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.
/*belum dioptimasi*/
tag_key selektor { properti: value value; properti: value }
/*teroptimasi*/
tag_key selektor{properti:value value;properti:value}
{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..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 {..}
: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.<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" /><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" /><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.
Silahkan berimprovisasi. Saya melakukannya dengan modal evaluasi pada jumlah klik dalam setiap kunjungan, dan sekedar saran :
<body> maka peramban harus menunda proses render –konten2– dan atau mengulang proses rendering –konten1– ( reflows pada konten1 and shifting pada konten2 ).
<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]<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.
Silahkan tuliskan komentar, atau trackbackartikel diatas. Emmm,.. Daftar posting dibawah ini mungkin melengkapi penjelasan isi bacaan diatas. ♥ Harry
:(
Side22Press is the online learning journal & portfolio of
Handoko Harry
, just a person from
Klaten, Indonesia.
{ 5 } Komentar pada : 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.