Cara mendeteksi CSS yang tidak terpakai di website untuk membuat situs lebih ringan

Daftar Isi

Halo semuanya, assalamualaikum warahmatullahi wabarakatuh. Di kesempatan ini, aku akan berbagi tutorial tentang cara mendeteksi CSS yang tidak terpakai pada website kita, supaya situs bisa lebih ringan dan cepat ketika diakses. Tutorial ini sangat penting untuk para pengembang web yang ingin meningkatkan performa situs mereka.

Jadi begini, misalnya kita memiliki sebuah halaman website, lalu kita ingin tahu CSS mana yang nggak dipakai. Caranya cukup sederhana, kita akan gunakan Chrome DevTools. Yuk, langsung ke langkah-langkahnya:

1. Buka halaman website yang ingin kamu cek.
2. Klik kanan di sembarang area halaman, kemudian pilih Inspect.
3. Di dalam panel DevTools browser MS Edge, klik ikon More Tools yang ada di pojok kanan atas.
4. Pilih menu Coverage.
5. Klik tombol Start Recording untuk memulai proses.
6. Tunggu sebentar sampai proses selesai, lalu lihat hasilnya. Kamu akan melihat statistik unused bytes, di mana warna merah menunjukkan bagian CSS yang tidak digunakan.

Hati-hati, ya! Jangan sembarangan menghapus CSS, karena bisa jadi CSS yang tidak terpakai di halaman ini sebenarnya digunakan di halaman lain, seperti halaman error atau versi mobile dari situsmu. Jadi, pastikan untuk memeriksa secara menyeluruh sebelum menghapus kode CSS.

Manfaat dari mendeteksi CSS yang tidak terpakai ini adalah membuat website jadi lebih ringan dan cepat. Kalau kamu ingin hasil yang lebih maksimal, bisa coba juga pakai aplikasi pihak ketiga yang khusus untuk optimasi CSS.