Pernah penasaran kenapa website kamu lambat padahal hosting sudah bagus dan gambarnya sudah dikompresi? Salah satu biang keroknya mungkin tersembunyi di balik sesuatu yang namanya unused CSS alias kode CSS yang tidak terpakai.

Bayangkan kamu pindah rumah, tapi ikut dibawa semua barang lama, mulai dari baju yang sudah tidak muat, furnitur rusak, sampai mainan masa kecil. Padahal kamu cuma butuh seperempat dari isi koper itu. Nah, unused CSS itu persis seperti barang-barang tidak terpakai yang ikut diangkut, membebani website kamu setiap kali halaman dibuka.

Artikel ini akan menjelaskan apa itu unused CSS, kenapa Google Lighthouse memberi tanda merah padanya, dan yang paling penting, bagaimana cara mengatasinya langkah demi langkah.

Apa Itu Unused CSS dan Kenapa Ini Penting untuk SEO?

CSS (Cascading Style Sheets) adalah kode yang mengatur tampilan visual website kamu, mulai dari warna teks, ukuran font, hingga tata letak halaman. Setiap kali kamu menginstal tema baru atau plugin di WordPress, misalnya, file CSS bawaan mereka ikut termuat di halamanmu, meskipun kamu tidak menggunakan semua fitur atau elemen yang ada di dalamnya.

Inilah yang disebut unused CSS: kode gaya (style) yang sudah diunduh oleh browser pengunjung, tapi sama sekali tidak digunakan untuk menampilkan konten di halaman tersebut.

Masalahnya bukan sekadar pemborosan ruang. Ini langsung berdampak pada kecepatan dan pengalaman pengguna, dua faktor yang sangat diperhatikan Google dalam menentukan peringkat website di hasil pencarian.

Kenapa Google Lighthouse Menyoroti Masalah Ini?

Google Lighthouse adalah alat audit performa website bawaan Chrome. Jika kamu pernah membuka tab "Lighthouse" di Chrome DevTools atau menggunakan PageSpeed Insights, kamu pasti pernah melihat laporan performa dengan berbagai peringatan berwarna merah atau kuning.

Salah satu peringatan yang sering muncul adalah "Remove unused CSS" di bagian Opportunities. Lighthouse akan menandai setiap file CSS yang memiliki potensi penghematan ukuran sebesar 2 KiB atau lebih.

Mengapa browser sangat terbebani oleh unused CSS?

Ini penjelasannya dalam bahasa yang sederhana:

Pertama, browser harus mengunduh semua file CSS sebelum menampilkan apapun. Secara default, browser bekerja seperti ini: sebelum menampilkan satu kata pun kepada pengunjung, ia harus terlebih dahulu mengunduh, membaca, dan memproses semua file CSS yang terhubung ke halaman itu. Jika file CSS kamu besar karena penuh dengan kode yang tidak terpakai, proses ini jadi lebih lama. Pengunjung terpaksa menunggu lebih lama untuk melihat konten.

Kedua, unused CSS memperlambat proses "menggambar" halaman. Browser membangun sesuatu yang disebut "pohon tampilan" (render tree), yaitu peta visual yang menentukan bagaimana setiap elemen di halaman akan ditampilkan. Untuk membangun peta ini, browser harus memeriksa setiap elemen HTML dan mencocokkannya dengan seluruh aturan CSS yang ada. Semakin banyak CSS yang tidak relevan, semakin lama proses ini berlangsung.

Hasilnya? First Contentful Paint (FCP) dan Largest Contentful Paint (LCP) yang lambat. Kedua metrik ini adalah sinyal penting bagi Google untuk menilai kecepatan dan kualitas website kamu.

Cara Mendeteksi Unused CSS di Website Kamu

Sebelum memulai perbaikan, kamu perlu tahu dulu seberapa parah masalahnya. Untungnya, ada cara gratis dan mudah untuk ini langsung dari browser Chrome.

Menggunakan Coverage Tab di Chrome DevTools

1. Buka website kamu di Google Chrome.
2. Tekan tombol F12 (atau klik kanan, pilih "Inspect") untuk membuka DevTools.
3. Klik ikon tiga titik vertikal di pojok kanan atas DevTools, pilih "More tools", lalu klik "Coverage".
4. Klik tombol rekam (lingkaran merah) dan muat ulang halaman kamu.
5. Setelah halaman selesai dimuat, kamu akan melihat daftar file beserta persentase kode yang tidak digunakan (ditandai warna merah).

Semakin banyak warna merah yang terlihat pada file CSS kamu, semakin besar potensi penghematan yang bisa kamu dapatkan.

Cara Mengatasi Unused CSS, Solusi Langkah demi Langkah

Ada dua pendekatan utama yang bisa kamu gunakan: solusi teknis umum dan solusi spesifik berdasarkan platform website kamu.

Solusi Umum: Pisahkan CSS Penting dan CSS Tidak Mendesak

Pendekatan terbaik yang direkomendasikan Google adalah strategi "critical CSS first":

Langkah 1: Identifikasi "Critical CSS"

"Critical CSS" adalah sekumpulan kecil aturan gaya yang dibutuhkan untuk menampilkan konten di layar pengguna saat pertama kali halaman dibuka, sebelum mereka scroll ke bawah. Bagian ini harus dimuat sesegera mungkin.

Langkah 2: Tanamkan Critical CSS Langsung di HTML (Inline)

Alih-alih memuat semua CSS dari file eksternal, tanamkan critical CSS langsung di bagian <head> halaman HTML menggunakan tag <style>. Dengan cara ini, browser tidak perlu melakukan permintaan jaringan tambahan untuk mendapatkan gaya paling penting itu.

```html
<head>
  <style>
    /* Tulis hanya CSS penting untuk tampilan awal di sini */
    body { font-family: sans-serif; }
    h1 { font-size: 2rem; color: #333; }
  </style>
</head>
```

Langkah 3: Muat Sisa CSS Secara Asinkron (Non-Blocking)

Untuk CSS lainnya yang tidak mendesak, muat secara asinkron agar tidak menghambat tampilan halaman. Kamu bisa menggunakan atribut rel="preload" seperti ini:

```html
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
```

Cara ini memastikan file CSS tetap dimuat, tapi tidak lagi memblokir proses menampilkan konten kepada pengunjung.

Langkah 4: Otomatiskan dengan Tool "Critical"

Untuk website yang lebih kompleks, proses mengidentifikasi dan memisahkan critical CSS bisa diotomatisasi menggunakan tools seperti Critical (tersedia di GitHub). Tool ini secara otomatis menganalisis halaman kamu dan menghasilkan critical CSS yang siap ditanamkan.

Solusi Spesifik untuk Platform Populer

Untuk Pengguna WordPress

WordPress adalah platform yang paling umum, dan kabar baiknya adalah banyak plugin yang bisa membantu mengatasi masalah unused CSS ini tanpa perlu menyentuh kode sama sekali.

Rekomendasi plugin yang bisa dicoba:

• WP Rocket: Plugin premium yang sangat populer dengan fitur "Remove Unused CSS" bawaan. Ia secara otomatis menganalisis halaman dan hanya memuat CSS yang benar-benar dibutuhkan.
• LiteSpeed Cache: Plugin gratis dengan fitur CSS optimization yang cukup powerful, termasuk critical CSS generation.
• Asset CleanUp: Plugin yang memungkinkan kamu menonaktifkan file CSS dari plugin atau tema tertentu di halaman-halaman spesifik.

Tips penting untuk pengguna WordPress: Setiap plugin yang kamu instal berpotensi menambahkan file CSS-nya sendiri ke semua halaman, meskipun CSS tersebut hanya dibutuhkan di satu halaman saja. Lakukan audit rutin dan pertimbangkan untuk mengurangi jumlah plugin yang terinstal.

Untuk Pengguna Drupal

Jika kamu menggunakan Drupal, berikut langkah-langkah yang disarankan:

1. Masuk ke panel admin Drupal dan matikan sementara fitur CSS aggregation di pengaturan performa. Ini akan memperlihatkan URL asli dari setiap file CSS yang dimuat.
2. Buka Coverage tab di Chrome DevTools dan muat halamanmu. Perhatikan file CSS mana yang memiliki banyak kode tidak terpakai (ditandai warna merah).
3. Dari URL file tersebut, identifikasi tema atau modul Drupal mana yang bertanggung jawab.
4. Ubah konfigurasi tema atau modul terkait agar hanya melampirkan stylesheet-nya di halaman yang memang memerlukannya, bukan di semua halaman.

Dokumentasi resmi Drupal menyediakan panduan lengkap tentang cara mengelola aset CSS dan JavaScript melalui file libraries.yml.

Untuk Pengguna Joomla

Untuk pengguna Joomla, langkah paling efektif adalah:

1. Audit ekstensi yang terinstal. Banyak ekstensi Joomla yang memuat file CSS-nya di semua halaman, padahal hanya dibutuhkan di satu atau dua halaman saja.
2. Pertimbangkan untuk mengurangi jumlah ekstensi yang aktif, atau beralih ke ekstensi alternatif yang lebih ringan dan lebih efisien dalam memuat aset CSS-nya.
3. Gunakan Coverage tab di Chrome DevTools untuk mengidentifikasi ekstensi mana yang paling banyak memuat CSS tidak terpakai.

Seberapa Besar Dampaknya terhadap Kecepatan dan SEO?

Menghapus unused CSS bisa memberikan dampak yang cukup signifikan, terutama jika website kamu sebelumnya memuat banyak file CSS dari berbagai plugin atau tema yang penuh dengan kode tak terpakai. Beberapa manfaat yang bisa kamu rasakan:

• Pengurangan waktu muat halaman, karena ukuran total file yang harus diunduh browser menjadi lebih kecil.
• Peningkatan skor Lighthouse, khususnya di metrik FCP (First Contentful Paint) dan LCP (Largest Contentful Paint).
• Pengalaman pengguna yang lebih baik, karena halaman terasa lebih responsif.
• Potensi peningkatan peringkat di Google, karena Core Web Vitals (termasuk LCP) adalah sinyal ranking yang nyata.

Rangkuman Tindakan yang Bisa Kamu Mulai Hari Ini

Supaya tidak bingung harus mulai dari mana, berikut urutan langkah yang bisa langsung kamu praktikkan:

1. Cek kondisi website kamu sekarang menggunakan PageSpeed Insights (pagespeed.web.dev) atau Google Lighthouse di Chrome. Lihat apakah ada peringatan "Remove unused CSS".
2. Identifikasi file CSS bermasalah menggunakan Coverage tab di Chrome DevTools.
3. Pilih solusi yang sesuai dengan platform website kamu: plugin untuk WordPress, pengaturan libraries untuk Drupal, atau audit ekstensi untuk Joomla.
4. Terapkan strategi critical CSS jika kamu memiliki akses ke kode sumber website.
5. Uji kembali performa website setelah perubahan diterapkan untuk memastikan ada perbaikan.

Memiliki website yang cepat bukan hanya tentang skor angka yang tinggi, tapi tentang memberikan pengalaman terbaik bagi setiap pengunjung yang datang. Dan dengan menghapus unused CSS, kamu sudah selangkah lebih maju menuju website yang lebih sehat, lebih cepat, dan lebih disukai Google.

Referensi teknis: Google Lighthouse Documentation, Remove Unused CSS