Efisiensi CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah sebuah file yang di gunakan untuk merubah atau mendesain tampilan suatu halaman website, file ini bersifat external atau tidak menyatu dengan dokumen utamanya namun file ini memegang peran penting bagi halaman website yang menggunakannya.

Keuntungan menggunakan teknik ini adalah dokumen utama suatu website bisa berukuran lebih kecil karena beberapa pengaturan tata letak, pengaturan font, warna, dan lain-lain berada di file yang terpisah dari dokumen utamanya. Namau teknik ini juga memiliki kelemahan yaitu jika file CSS isi tidak di load maka tampilan dokumen utama akan tidak sesuai dengan dengan keinginan kita hal ini berlaku pada server yang memiliki load time yang lama dan traffic yang cukup tinggi, nah berdasarkan hal ini lah saya menulis artikel ini.

Sebuah teknik yang di gunakan baru-baru ini untuk mengoptimalkan tampilan serta meminimalkan waktu loading yang cukup membosankan bagi pengunjung website atau blog anda adalah efisiensi CSS, HTML, xHTML, JS, atau dokumen yang dapat di akses secara online. Efisiensi di sini berarti mengurangi ukuran file tanpa mempengaruhi tampilan atau dengan kata lain membuang yang tidak di butuhkan di dalam file CSS ini.

Sebagai contoh:

Pada contoh di atas ada definisi penggunaan tampilan untuk tag HTML bernama body atau pada file di atas tag body di definisikan berlatarbelakang putih, berwarna hitam, huruf berukuran 12 point, bertype normal, jenis huruf tahoma, serta bergaris tepi 5 pixel dari atas dan bawah dan 4 pixel dari kanan dan kiri, dan lapisan dalam setebal 5 pixel. Jika di tulis ke dalam file CSS file tersebut akan berukuran 232 bytes ukuran ini memang terasa kecil karena hanya satu tag HTML saja yang di definisikan di file ini namun dalam penggunaannya file ini dapat berukuran hingga 100 kbytes bahkan lebih hal ini yang akan menambahkan waktu loading bagi pengunjung website tersebut.

Ukuran file ini dapat di kurangi dengan signifikan tanpa mengurangi atau mengubah fungsi dan tampilan, ada beberapa cara pengurangan ukuran tersebut cara pertama pengurangan tapi masih dapat dengan mudah di baca dan cara kedua adalah pemampatan file CSS ini sehingga agak sulit untuk di baca.

Berikut ini adalah contohnya:
Cara 1 pengurangan namun masih dapat di baca dengan mudah

Setelah di simpan file ini berukuran 168 bytes. Terjadi pengurangan sebesar 64 bytes atau sekitar 27.6%.
Cara 2 pengurangan maksimal

Penjelasan sedikit mengenai pengurangan maksimal ini background-color menjadi background pengurangan ini sah atau dapat di gunakan serta bilangan #ffffff di kurangi menjadi #fff hal ini dapat di lakukab jika bilangan memiliki nilai yang sama contoh #aaaaaa menjadi #aaa dan seterusnya, font ini di kurangi dari font-size font-weight font-family menjadi hanya font namun di belakang properti in harus di sertakan jenis fontnya, lalu kenapa font-weight: normal ini tidak di tulis dalam font? Karena font-weightnya normal maka tidak perlu di tulis lain halnya jika font-weight:bold atau italic, margin di kurangi menjadi 5px 4px, penulisan margin ini berdasarkan arah jarum jam yaitu atas kanan bawah dan kiri dalam hal ini margin: 5px 4px 5px 4px yang berarti batas pinggir atas 5px kanan 4px bawah 5pa dan kiri 4px dapat di kurangi dengan format penulisan margin:5px 4px yang berati batas atas dan bawah 5px kanan dan kiri 4px hal ini juga belaku untuk paddingnya.

Jika definisi ini di tulis dalam file CSS akan menghasilkan ukuran sebesar 77 bytes pengurangan sebesar 155 bytes atau sekitar 66.7% wah nilai yang fantastis. Coba anda bayangkan jika ukuran total dokumen suatu website sekitar 500 kb dengan kecepatan akses rata-rata 56 kbps maka waktu loading yang di butuhkan mencapai 68 hingga 71 detik akan sangat membosankan hanya untuk melihat satu halaman saja di perlukan waktu sekitar satu menit lebih bagaimana jika 100 halaman?. Jika pengurangan di atas berlaku dan persentase pengurangan berlaku 66.7% maka dokumen tersebut dapat di kurangi hingga 333.5 kb dan waktu loading hanya sekitar 20 hingga 23 detik saja akan sangat membantu sekali untuk pengunjung yang bandwidth internetnya bisa di bilang pas-pasan atau lambat.

Apakah anda tertarik untuk melakukan hal di atas? Mulailah melakukannya dari hal yang kecil. Atau anda ingin pengunjung dengan cepat mengkllik tombol close pada browser mereka karena waktu loading website anda yang lama? Tentu saja anda tidak mengharapkan hal yang demikian bukan?. Oya sebagai catatan terakhir untuk anda efisiensi ini mungkin dapat menaikan pagerank anda dan mungkin dapat menaikan website anda dalam hasil pencarian di search engine. Karena pada saat search engine mengcrawl website anda tidak mengalami kesulitan atau dalam kata lain tidak menghambat pekerjaan robot-robot search engine tersebut dengan waktu loading yang lama.

Mudah-mudahan artikel ini berguna bagi anda yang membacanya dan saya mohonkan kritikan, saran, dan komentar yang membangun dan bukan komentar yang menjatuhkan.