Cara Meminimalisir Duplikat CSS (Unused)

Salah satu penyebab loading situs web menjadi lambat adalah terlalu banyak duplikat css atau di sebut juga dengan unused css (stylesheet yang tidak digunakan), pada dasarnya situs web tidak lepas dari yang namanya duplicate css rules (adalah pengaturan stylesheet yang serupa dan yang saling berlawanan).

Untuk lepas dari duplicate css (unused css duplicate) di butuhkan keahlian dan kerja keras yang sangat ekstra. Bahkan itu mungkin tidak cukup untuk menangani permaslahan unused css, tetapi jika mau bersabar duplicate css rules tentu bisa diminimalisir hingga tidak mempengaruhi pemuatan atau loading situs web.

Untuk melakukan tugas itu (mengurangi semaksimal mungkin unused css type duplicate css rules) kita harus benar-benar paham seperti apa css duplikat yang ada di dalam website. Nah, untuk memahaminya (duplicate css rules), saya akan mengilustrasikan dengan contoh dan penjelasan seperti berikut ini:

body{

background:#fff;

font-family:'Roboto',sans-serif;

font-size:16px;

font-weight:400;

text-align:left;

color:#000;}

[ads id="ads1"] Secara global css di atas telah menginstruksikan browser untuk menampilkan kesluruhan situs web dengan jenis font, warna, size dan ketebalan font seperti yang tertera pada css body. Jika elemen lain di situs web misalnya .post-body diatur dengan style font, size, color dan ketebalan font (font-weight) yang berbeda dengan css pada body web, secara otomatis salah satu diantaranya akan dianggap sebagai unused css duplicate karena stylesheet bentrok antara satu dan lainnya.

Lihat ilustrasi unused css duplikat pada mode inspect element berikut ini:

Catatan: Style css yang ditampilkan dengan strikethrough atau garis tengah pada mode inspek elemen menandakan adanya unused css, tetapi bukan berarti css yang di strikethrough adalah unused css yang harus di hapus, Karena setelan css pada elemen individu akan diutaman dari pada setelan css secara global.

Contoh:

• Jika pada tag body font-size = 15px artinya keseluhan situs akan ditampilkan dengan ukuran besar font 15px (setelan css secara global).
• Kemudian pada elemen individu misalnya menu-nav memilki setelan font-size yang sama yaitu 15px atau lebih besar darinya 16px, maka style css yang diutamakan oleh browser pada elemen menu-nav adalah font-size 15px atau lebih besar darinya 16px.

Secara otomatis setelan css pada tag body akan di anggap duplikat unused css oleh browser pada elemen menu. Jadi jika ingin menghapus css duplikat, hapus style css yang ada pada elemen individu, itu tidak akan mempengaruhi elemen lain yang bergantung pada setelan css secara global.

Solusi terbaik untuk menghindari terciptanya unused css ketika situs web akan ditamplikan dengan variasi font size atau font color yang berbeda sebaiknya hindari pengaturan css secara global seperti diatas, agar situs web tidak terperangkap kedalam jebakan unused css yang lebih banyak. Perhatikan contoh teknik menghindari css duplikat berikut ini. (duplicate css rules).

body{

background:#fff;

font-family:'Roboto',sans-serif;

text-align:left;

font-weight:400;

}

.post-body{

font-size:16px;

color:#656565;

}

.breadcrumb{

font-size:13px;

color:#000;

}

Dari contoh penerapan css di atas tidak satupun diantara elemen dianggap duplikat (duplicate css rules), karena secara otomatis element .post-body dan .breadcrumb akan mengikuti style font pada elemen body dengan font-size dan color yang berbeda tanpa harus bertabrakan antara elemen satu dengan yang lainnya.

Cara mengatasi css duplikat dengan metode seperti ini lebih efektif meningkatkan kecepatan di bandingkan dengan menghapus unused css yang berasal dari fitur-fitur website yang tidak terpakai. Meskipun begitu keduanya tetap harus dilakukan untuk mendapatkan kecepatan situs web yang lebih optimal lagi.

Sekarang, setelah benar-benar mengerti apa itu css duplikat dan seperti apa css duplikat di situs web, mulailah untuk memperbaharui style css web anda, Gunakan fitur inspek elemen di browser chrome atau mozilla untuk mendeteksi unused css secara manual. Periksa (inspek) setiap elemen untuk menghilangkan atau menghapus unused css yang merupakan duplicate css rules lebih banyak lagi. Semoga artikel ini dapat membantu anda memahami, mendeteksi duplikat css dan menghindari unused css type duplicate css rules.