BUAT FILE CSS DALAM SATU SINGLE FILE
Ketika suatu halaman web dibuka dengan banyak objek (seperti misalnya gambar atau script) maka request yang banyak tersebut akan memperlambat waktu respon halaman web. Semakin banyak objek yang diload otomatis waktu respon halaman web akan semakin lambat. Logikanya 1 File CSS = 1 request. Maka buat 1 file css untuk semua halaman web, contohnya seperti di bawah ini (ilustrasi : mempunyai 3 halaman web dengan 3 file CSS Yang berbeda)
<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" />
Maka sebaiknya gabungkan file CSS tersebut menjadi satu menjadi seperti ini
<link rel="stylesheet" type="text/css" href="kodesaya.css" />
|
BUAT EXTERNAL FILE CSS
Seperti yang anda lihat pada kode di atas, merupakan bentuk dari link external css. Menggunakan external file CSS pada kenyataannya dapat me-load halaman web lebih cepat karena file CSS sudah masuk dalam cache browser, Jadi ketika dibuka kembali maka browser tinggal meload file css dari cache yang tersimpan di komputer. Lain halnya dengan menggunakan inline css yang dibuat diantara kode HTML, browser akan selalu meload ulang untuk setiap halaman yang dibuka. Memang dengan menggunakan inline CSS dapat mengurangi jumlah HTTP request, tetapi kekurangannya meningkatkan ukuran file halaman web. Lain halnya dengan menggunakan external file CSS.
SELALU TEMPATKAN CSS PADA BAGIAN HEADER
Menempatkan kode css pada bagian header akan mempercepat loading halaman web, hal ini dikarenakan setiap kode pada bagian header menjadi prioritas untuk diload. Lihat contohnya seperti di bawah:
Sebelum
<html>
<head>
<title>Optimalisasi CSS</title>
<style>
body {
font-family:arial;
margin:0;padding:0;
}
h1 {
font-weight:850px;
margin:5px 0;
}
kode css dan seterusnya.......
</style>
</head>
</html>
Sesudah
<html>
<head>
<title>Optimalisasi CSS</title>
<link rel="stylesheet" type="text/css" href="kodesaya.css"/></head>
</html>
MENGGABUNGKAN STYLE YANG SAMA
Hal sering kali dilakukan, padahal dapat dibuat penulisan kode CSS yang lebih simple.seperti contoh di bawah ini:
Sebelum
#konten .heading {padding:5px 0; font-family:arial; font-weight:650;}
#konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
Sesudah
h1, #konten .heading, #konten2 .heading
{padding:5px 0; font-family:arial; font-weight:650;}
Namun dalam beberapa kasus, kode css tidak dapat digabung menjadi satu atau sebagian yang saja yang dapat digabung dikarenakan misalnya terdapat property yang sama tetapi dengan value yang berbeda. Contoh dapat anda lihat seperti contoh di bawah:
Sebelum
#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}
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 kode CSS dapat juga dilakukan namun pengecualian untuk properties “background”. Hasilnya akan seperti ini:
#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)}
Kurangi Jumlah Line BreaksUntuk setiap selector yang mempunyai beberapa property, disarankan property dan value nya dijadikan satu baris saja. Ilustrasinya seperti di bawah ini:
Sebelum
h2 {
font-family:arial;
padding:0;
margin:5px 0;
color:#000;
text-decoration:none;
}
Sesudah
h2 {font-family:arial;padding:0;margin:5px 0;color:#000;text-decoration:none;}
HILANGKAN TITIK KOMA (semicolon/’;'}) TERAKHIR
Sebelum
h2 {font-family:arial;color:#000;text-decoration:none;}
Sesudah
h2 {font-family:arial;color:#000;text-decoration:none}
GUNAKAN SIMPLE COMMENT
Sebelum
/************************************/
/* Properties Header */
/************************************/
Sesudah
/* Properties Header */
SINGKAT KODE WARNA JIKA MEMUNGKINKAN
Sebelum
/* Properties Header */
Sesudah
.konten {
color:#000000
<!-- atau -->
color:#FF0000
<!-- atau -->
color:#FFCC00
}
HILANGKAN “px”
Sebelum
h1 {padding:0px; margin:0px;}
Sesudah
h1 {padding:0; margin:0;}
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
related post by linggih
Tidak ada komentar:
Posting Komentar