Metrik utama kegunaan situs web adalah kecepatan, atau lebih tepatnya, seberapa cepat suatu halaman muncul di jendela browser pengunjung. Ada banyak faktor yang mempengaruhi kecepatan, termasuk kecepatan server web Anda, koneksi Internet pengunjung Anda, dan ukuran file yang harus diunduh browser. Meskipun Anda tidak dapat mengontrol kecepatan server dan koneksi Anda, Anda dapat mengontrol ukuran file yang membentuk halaman web situs Anda.
Untuk membuat situs web lebih cepat, pembuat web secara rutin mengompresi dan mengoptimalkan setiap file gambar di situs web mereka, sering kali mengorbankan kualitas gambar untuk mengurangi ukuran file hingga beberapa poin persentase. Karena style sheet CSS adalah file teks biasa dan ukurannya relatif kecil dibandingkan gambar, pembuat web jarang mempertimbangkan untuk mengambil langkah untuk mengurangi ukuran file style sheet CSS mereka. Namun, dengan menggunakan singkatan CSS dan trik sederhana lainnya, Anda dapat mengurangi sebagian besar ukuran style sheet Anda. Dalam pengujian ad hoc informal pada stylesheet saya sendiri, saya mengurangi ukuran file sekitar 25-50%.
Gunakan properti singkatan CSS:
Properti singkatan CSS adalah nama properti khusus yang digunakan untuk menggantikan beberapa kumpulan properti terkait. Misalnya, properti padding adalah kependekan dari padding-top, padding-right, padding-bottom, dan padding-left.
Menggunakan properti singkatan memungkinkan Anda mengompresi beberapa pasangan properti/atribut menjadi satu baris kode dalam stylesheet CSS. Misalnya, perhatikan kode berikut:
.sampel1 {
margin-atas: 15 piksel;
margin-kanan: 20 piksel;
margin-bawah: 12 piksel;
margin-kiri: 24 piksel;
padding-atas: 5px;
padding-kanan: 10px;
bantalan-bawah: 4px;
padding-kiri: 8px;
lebar batas atas: tipis;
gaya tepi atas: padat;
warna-batas-atas: #000000;
}
Menggantinya dengan beberapa properti singkatan dapat mengurangi kode menjadi berikut, efek sebenarnya dari keduanya persis sama:
.sampel1 {
margin: 15px 20px 12px 24px;
bantalan: 5px 10px 4px 8px;
border-top: solid tipis #000000;
}
Perhatikan bahwa properti yang disingkat juga memiliki beberapa properti, yang masing-masing berhubungan dengan properti biasa yang digabungkan menjadi properti yang disingkat. Properti dipisahkan oleh spasi.
Jika properti memiliki nilai serupa, misalnya untuk pengukuran linier properti margin, urutan properti yang mengikuti properti yang disingkat menjadi penting. Urutan atribut dimulai dari atas (batas atas kosong) dan berlanjut searah jarum jam di sekeliling kotak.
Jika semua properti dari properti singkatan sama, maka Anda cukup membuat daftar properti tunggal dan menyalinnya empat kali di depannya. Oleh karena itu, dua properti berikut ini sama:
margin: 5px 5px 5px 5px;
margin: 5 piksel;
Demikian pula, Anda dapat merepresentasikan pasangan properti atas/bawah dan kanan/kiri menggunakan dua properti yang mengikuti properti margin atau spasi.
margin: 5px 10px 5px 10px;
margin: 5 piksel 10 piksel;
Urutan atribut tidak penting jika nilainya berbeda. Oleh karena itu, properti seperti warna batas, gaya batas, dan lebar batas dapat mengikuti properti garis dalam urutan apa pun. Mengabaikan atribut sama dengan menghilangkan properti umum terkait dari aturan gaya.
Daftar properti singkatan CSS
Di bawah ini adalah daftar properti singkatan CSS dan properti umum yang diwakilinya.
Latar Belakang: lampiran latar belakang, warna latar belakang, gambar latar belakang, posisi latar belakang, pengulangan latar belakang
Perbatasan: warna batas, gaya batas, lebar batas
border-bottom (batas bawah): warna batas bawah, gaya batas bawah, lebar batas bawah
border-left (batas kiri): warna batas kiri, gaya batas kiri, lebar batas kiri
border-right (batas kanan): warna batas kanan, gaya batas kanan, lebar batas kanan
border-top (batas atas): warna batas atas, gaya batas atas, lebar batas atas
isyarat (isyarat suara): pra-isyarat, pasca-isyarat
font: font, ukuran font, gaya font, berat font, varian font, tinggi garis, penyesuaian ukuran font, peregangan font
gaya daftar: gambar gaya daftar, posisi gaya daftar, tipe gaya daftar
margin (kosong): margin atas, margin kanan, margin bawah, margin kiri
outline: warna outline, gaya outline, lebar outline
padding: celah atas, celah kanan, celah bawah, celah kiri
jeda (jeda): jeda setelah, jeda sebelum, kurangi spasi
Cara lain untuk mengurangi ukuran stylesheet CSS adalah dengan menghapus sebagian besar spasi yang tidak perlu dari dokumen. Dengan kata lain, masukkan setiap aturan yang dipecah ke dalam satu baris kode, yaitu menghapus baris baru dan indentasi yang awalnya dimasukkan ke dalam kode untuk memisahkan setiap properti/atribut ke dalam baris terpisah.
Misalnya, contoh kode berikut memiliki konten yang identik, tetapi contoh kode kedua jauh lebih halus:
jam1 {
ukuran font: x-besar;
berat font: tebal;
warna: #FF0000;
}
h1 {ukuran font: x-besar; berat font: tebal;
Hapus komentar
Menghapus komentar dari kode CSS Anda adalah cara lain untuk mengurangi ukuran file. Meskipun komentar berguna untuk membaca kode, komentar tersebut tidak membantu browser menghasilkan halaman web Anda. Banyak pembuat web yang terbiasa mengomentari setiap baris kode, atau setidaknya setiap pernyataan aturan. Komentar murah hati seperti itu jarang diperlukan dalam stylesheet CSS karena sebagian besar properti dan properti CSS mudah dibaca dan dipahami. Jika Anda menggunakan nama yang bermakna untuk kelas, ID, dan pemilih lainnya, Anda dapat menghilangkan sebagian besar komentar sambil tetap menjaga kode Anda tetap dapat dibaca dan dipelihara.
h1 { /* Judul 1 gaya*/
ukuran font: x-besar; /* ukuran x-besar */
berat font: tebal; /* Tebal */
warna: #FF0000; /* Merah */
}
Menggunakan properti steno, menghapus spasi yang tidak berguna, dan menghilangkan komentar dapat sangat mengurangi ukuran file style sheet CSS Anda. Hal ini pada gilirannya akan memberikan kontribusi kecil namun berpotensi nyata terhadap tujuan keseluruhan mempercepat situs Web Anda.