Kita tahu bahwa ada banyak cara untuk menata elemen HTML dan Optimasi Kode CSS. Penggunaan CSS yang kompleks membutuhkan waktu beberapa milidetik untuk menguraikannya. Mengurangi kerumitan penyeleksi mengurangi beban pada browser dan menjaga kode tetap bersih dan sederhana.
Bagi kamu yang belum tahu tentang apa itu CSS atau ingin mempelajari hal lain silahkan merujuk pada artikel lain di bawah ini :
- Apa Itu CSS? Jenis Apa Saja Yang Ada?
- Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development
- Belajar HTML + CSS: Membuat Berbagai Bentuk Shape Dengan HTML dan CSS3
- Belajar HTML + CSS: Penggunaan Dan Penjelasan Element CSS Float
- Efek Transisi Menggunakan Properti CSS
Hari ini Labkom99 akan membagikan beberapa tips untuk optimasi kode CSS yang akan membantu meningkatkan kinerja website yang kamu miliki.
1. Optimasi Dengan Menghindari Kode Atribut CSS Konsumsi Tinggi
Analisis menunjukkan bahwa beberapa properti CSS dirender lebih lambat daripada yang lain dan harus digunakan dengan hati-hati. Termasuk properti berikut:
- box-shadow
- border-radius
- position: fixed
- transform
- :nth-child
- filter
Semua properti di atas memiliki persyaratan kinerja yang relatif tinggi. Jika properti ini digunakan lebih sedikit, maka ini bukan masalah. Tetapi jika halaman muncul beberapa ratus kali, CSS secara keseluruhan mungkin terganggu. Jadi gunakan dengan hemat.
2. Gunakan <link> Menggantikan @import
Aturan @import terutama digunakan untuk mengimpor sumber daya atau file CSS. Ini mencegah file lain diunduh secara paralel dan dapat menyebabkan pelambatan situs web.
Untuk optimasi kode css, Jangan lakukan ini di CSS:
@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");@import, Kamu dapat menggunakan beberapa tag dalam HTML, itu akan memuat file CSS secara paralel yang dapat meningkatkan kecepatan pemuatan aplikasi sampai batas tertentu.
Kamu dapat melakukan ini dalam HTML:
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">3. Sederhanakan Selector
Kita tahu bahwa ada banyak cara untuk menata elemen HTML, dan selector CSS yang paling kompleks membutuhkan waktu beberapa milidetik untuk menguraikannya. Mengurangi kerumitan penyeleksi mengurangi beban pada browser dan menjaga kode tetap bersih dan sederhana.
Hindari menulis kode seperti ini :
container > div.links-container ul li .link {
}Jadi untuk optimasi kode css, Hindari menulis kode seperti ini:
.container .link {
}4. Tidak Menggunakan Kode !important Pada CSS Untuk Optimasi
Dalam beberapa kasus, Kamu dapat menggunakan !Important untuk meningkatkan prioritas gaya, sehingga gaya akan berpengaruh. Jangan gunakan !important kecuali tidak ada cara lain.
Menambahkan Deklarasi !important CSS akan menimpa deklarasi gaya terkait lainnya. Jika terlalu banyak !important dalam aturan CSS, browser harus melakukan pemeriksaan tambahan pada kode, yang dapat memperlambat kecepatan pemuatan halaman.
Jadi optimasi kode css, cobalah untuk menghindari penggunaan !important. Dalam banyak kasus, kita dapat mencapai penulisan ulang gaya melalui selector. Kecuali jika kita ingin menulis ulang CSS perpustakaan pihak ketiga.
5. Ganti Gambar Dengan CSS Menggunakan SVG
Sangat mungkin bahwa gambar akan memakan waktu lama untuk dimuat di halaman, terutama jika gambar tidak dioptimalkan untuk web. Saat menerapkan gambar latar belakang, gradien, dan gambar geometris, gunakan gambar sesedikit mungkin. Tetapi gunakan kode CSS untuk mengimplementasikannya. Menggunakan kode CSS akan memuat lebih cepat daripada gambar. Baca juga Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery.
Kamu juga dapat menggunakan gambar SVG sebagai ganti gambar PNG atau JPG:
- Kamu dapat menambahkan efek ke gambar.
- Gambar dimuat lebih cepat.
- Gambar secara otomatis menyesuaikan dengan layar pengguna.
6. Optimasi Dengan Mengkompres Kode CSS
Kita dapat mengurangi ukuran file dengan mengompresi file CSS untuk menghapus semua spasi dan kode yang tidak perlu dalam file. Semakin kecil file CSS, semakin sedikit waktu yang dibutuhkan untuk memuat, dan semakin cepat halaman dimuat.
7. Gunakan 0 Sebagai Ganti 0px
Ketika sebuah properti memiliki nilai 0, kita tidak dapat menambahkan unit. Yaitu jangan menulisnya seperti ini: 0rem, 0em, 0px, dll.
Tentu saja, tidak ada yang salah dengan menulisnya seperti ini. Tetapi unit ini tidak berguna, dan ketika berurusan dengan file CSS yang besar. Tidak ada unit yang akan membuat file sedikit lebih kecil daripada memiliki unit.
8. Gunakan Hex Menggantikan Nama Warna
Saat kita mengatur warna ke nama warna, browser menghabiskan lebih banyak waktu untuk mencari tahu nilai hex warna. Jika Kamu ingin menggunakan warna merah, setelah mengaturnya menjadi warna: merah, efek tampilan dari browser yang berbeda mungkin berbeda. Sebagai pengembang, kami tidak dapat membiarkan browser memutuskan bagaimana halaman web akan ditampilkan.
Oleh karena itu untuk optimasi kode css, coba gunakan heksadesimal (misalnya merah #ff0000) untuk menentukan warna guna memastikan bahwa warna yang diinginkan ditampilkan secara akurat dalam rona yang sama di semua browser.
9. Hindari Font-Family Yang Berlebihan
Mendefinisikan font untuk setiap pemilih bukanlah ide yang baik, itu membuat kode sulit untuk dipertahankan. Jika Kamu ingin mengubah font nanti, Kamu harus mengubahnya di setiap pemilih.
Jadi untuk optimasi kode css, jangan mendefinisikan font seperti ini:
h1 {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
.selection {
font-family: Arial, Helvetica, sans-serif;
}
.footer {
font-family: "Times New Roman", Times, serif;
}Font yang akan digunakan dapat ditentukan dalam isi. Jika Kamu ingin mengganti font tersebut di selector lain, Kamu dapat melakukannya dengan menggunakan font yang diinginkan di selector itu.
body{
font-family: Arial, Helvetica, sans-serif;
}
footer{
font-family: "Times New Roman", Times, serif";
}Jika font di banyak bagian halaman berbeda, Kamu dapat menentukan font di kelas. Lalu menggunakan kelas pada tag HTML yang diperlukan seperti ini:
.font-helvetica {
font-family: Arial, Helvetica, sans-serif;
}
.font-times {
font-family: "Times New Roman", Times, serif";
}10. Gunakan Font Alternatif
Dalam beberapa kasus, font yang digunakan dalam aplikasi mungkin tidak tersedia di perangkat pengguna. Dalam hal ini, font alternatif lain dapat ditentukan:
p{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}Dengan cara ini, browser akan menguraikan secara berurutan hingga font pertama yang tersedia diuraikan. Jika tidak ada yang tersedia, font default browser akan digunakan.
11. Optimasi Kode Menggunakan Reset CSS
Setiap browser memiliki gaya default sendiri untuk elemen HTML. Jika ada elemen H1 tanpa style, maka secara default di Firefox akan diberikan nilai margin sebesar 21.433px untuk bagian atas dan bawah serta 0 untuk bagian kiri dan kanan. Di Safari, itu akan diberikan margin 21px atas dan bawah dan 0 kiri dan kanan.
Jadi, untuk mengatur ulang gaya CSS, praktik yang baik adalah mendefinisikan gaya dari awal. Banyak pengembang akan menggunakan pemilih generik (*) untuk melakukan reset dasar:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Reset kode CSS atau Menyetel ulang dengan dengan menggunakan tanda (*) terkadang dapat menyebabkan masalah kinerja, karena akan mengatur gaya setiap tag.
Basis kode dapat diatur ulang menggunakan beberapa CSS umum, seperti normalisasi. Lihat juga beberapa praktik terbaik untuk penyetelan ulang CSS.
12. Kurangi Kode Duplikat
Ketika dua elemen atau penyeleksi memiliki properti CSS yang sama, penyeleksi dapat digabungkan menggunakan koma alih-alih mendeklarasikan gaya berulang kali. Sehingga mereka akan berbagi gaya CSS.
Untuk Optimasi Kode CSS Hindari menulis seperti ini:
.header {
background-color: #fefefe;
padding: 20px 0;
}
.footer {
background-color: #fefefe;
padding: 20px 0;
}Disarankan untuk menulis ini:
.header,
.footer {
background-color: #fefefe;
padding: 20px 0;
}
