Trik Memperkecil Ukuran File CSS
Sudah jelas jika semakin kecil ukuran file CSS maka logikanya semakin cepat pula browser meload file CSS. Ada beberapa trik yang dapat dilakukan untuk memperkecil (optimalkan) ukuran file CSS, berikut beberapa diantaranya:
BUAT FILE CSS DALAM SATU SINGLE FILE
Ketika pengguna (visitor) membuka halaman web dengan banyak objek (seperti misalnya gambar atau script) akan membutuhkan HTTP request yang mana request ini akan memperlambat waktu respon halaman web. Semakin banyak objek yang diload (dimuat) otomatis waktu respon halaman web akan semakin lambat. Logikanya 1 File CSS = 1 HTTP Request. Maka buat 1 file css untuk semua halaman web, contohnya dapat anda lihat seperti ilustrasi di bawah ini (mempunyai 3 halaman web dengan 3 file CSS Yang berbeda)
[css collapse="false"]
<link rel="stylesheet" type="text/css" href="konten.css" />
<link rel="stylesheet" type="text/css" href="tentang.css" />
<link rel="stylesheet" type="text/css" href="kontak.css" />
[/css]
Maka sebaiknya gabungkan beberapa file CSS tersebut menjadi satu file CSS. Misal setelah digabungkan akan diberi nama baru "codesaya.css" penulisan code setelahnya akan menjadi seperti ini:
[css collapse="false"]
<link rel="stylesheet" type="text/css" href="codesaya.css" />
[/css]
BUAT EXTERNAL FILE CSS
Seperti yang anda lihat pada code di atas, merupakan bentuk dari External Style CSS. Menggunakan external file CSS kenyataannya dapat meload halaman web lebih cepat karena file CSS sudah masuk dalam cache browser, Jadi ketika dibuka kembali maka browser tinggal memuat ulang (reload) file css dari cache yang tersimpan di komputer. Lain halnya dengan menggunakan Inline Style CSS yang disisipkan diantara code HTML, browser akan selalu reload CSS untuk setiap halaman yang dibuka. Memang dengan menggunakan inline CSS dapat mengurangi jumlah HTTP request, tetapi kekurangannya meningkatkan ukuran file dokumen web & selalu reload inline css. Lain halnya dengan menggunakan external file CSS.
SELALU TEMPATKAN CSS PADA BAGIAN HEADER
Menempatkan code css pada bagian header akan mempercepat loading halaman web, hal ini dikarenakan setiap code pada bagian header menjadi prioritas untuk diload. Lihat contohnya seperti di bawah:
Sebelum
[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<style>
body {
font-family:arial;
margin:0;padding:0;
}
h1 {
font-weight:850px;
margin:5px 0;
}
code css dan seterusnya.......
</style>
</head>
</html>
[/html]
Sesudah
[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<link rel="stylesheet" type="text/css" href="codesaya.css"/>
</head>
</html>
[/html]
MENGGABUNGKAN STYLE YANG SAMA
Kesalahan yang sering kali dilakukan, padahal dapat dibuat penulisan code CSS yang lebih simple. Ilustrasinya seperti dapat anda lihat di bawah ini:
Sebelum
[css collapse="false"]
h1 {padding:5px 0; font-family:arial; font-weight:650;}
#konten .heading {padding:5px 0; font-family:arial; font-weight:650;}
#konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]
Sesudah
[css collapse="false"]
h1, #konten .heading, #konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]
Namun dalam beberapa kasus, code css tidak dapat digabung menjadi satu atau hanya sebagian saja yang dapat digabung dikarenakan misalnya terdapat property yang sama tetapi dengan value yang berbeda. Contoh dapat anda lihat seperti di bawah:
Sebelum
[css collapse="false"]
#coba a.home {padding:5px; font-family:arial; font-weight:650; background:#fff url(home.gif) no-repeat}
#coba a.konten {padding:5px; font-family:arial; font-weight:650; background:#fff url(konten.gif) no-repeat}
#coba a.kontak {padding:5px; font-family:arial; font-weight:650; background:#fff url(kontak.gif) no-repeat}
#coba a.tentang {padding:5px; font-family:arial; font-weight:650; background:#fff url(tentang.gif) no-repeat}
[/css]
Dapat anda lihat setiap selector 'id' mempunyai property yang sama, namun salah satu diantaranya property "background" untuk setiap selector "id" mempunyai value yang berbeda. Maka penggabungan code CSS dapat juga dilakukan namun pengecualian untuk properties "background". Hasilnya akan seperti ini:
[css collapse="false"]
#coba a {padding:5px; font-family:arial; font-weight:650; background:#fff no-repeat}
#coba a.home {background:url(home.gif)}
#coba a.konten {background:url(konten.gif)}
#coba a.kontak {background:url(kontak.gif)}
#coba a.tentang {background:url(tentang.gif)}
[/css]
Kurangi Jumlah Line Breaks
Untuk setiap selector yang mempunyai beberapa property, disarankan property dan value nya dijadikan satu baris saja. Ilustrasinya seperti di bawah ini:
Sebelum
[css collapse="false"]
h2 {
font-family:arial;
padding:0;
margin:5px 0;
color:#000;
text-decoration:none;
}
[/css]
Sesudah
[css collapse="false"]
h2 {font-family:arial;padding:0;margin:5px 0;color:#000;text-decoration:none;}
[/css]
HILANGKAN TITIK KOMA (semicolon/';'}) TERAKHIR
Sebelum
[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none;}
[/css]
Sesudah
[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none}
[/css]
GUNAKAN SIMPLE COMMENT
Sebelum
[css collapse="false"]
/************************************/
/* Properties Header */
/************************************/
[/css]
Sesudah
[css collapse="false"]
/* Properties Header */
[/css]
SINGKAT KODE WARNA JIKA MEMUNGKINKAN
Sebelum
[css collapse="false"]
.konten {
color:#000000
<!-- atau -->
color:#FF0000
<!-- atau -->
color:#FFCC00
}
[/css]
Sesudah
[css collapse="false"]
.konten {
color:#000
<!-- atau -->
color:#F00
<!-- atau -->
color:#FC0
<!-- Namun Yang Seperti Ini Tidak Bisa DiRubah -->
color:#5B8BE3
<!-- atau -->
color:#1E5F07
<!-- atau -->
color:#171452
}
[/css]
HILANGKAN "px"
Sebelum
[css collapse="false"]
h1 {padding:0px; margin:0px;}
[/css]
Sesudah
[css collapse="false"]
h1 {padding:0; margin:0}
[/css]
GUNAKAN CSS COMPRESSION TOOLS
Jika anda malas untuk memekai cara manual seperti di atas. Gunakan tool online gratis di bawah ini:
CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat
nice info...
BalasHapusthanks..
Wow thanx ini bener-bener pencerahan buat masalah css yang berat-beratin load.. Nice bos.. (https://mutiarar06.student.ipb.ac.id)
BalasHapuswawww,,, keren..
BalasHapustrimakasih