Bagian Peluang di daftar laporan Lighthouse Anda semua stylesheet dengan CSS yang tidak terpakai dengan potensi penghematan 2 KiB atau lebih. Hapus CSS yang tidak digunakan untuk mengurangi byte yang tidak perlu yang digunakan oleh aktivitas jaringan:
Bagaimana CSS yang tidak digunakan memperlambat performa
Menggunakan tag <link> adalah cara yang umum untuk menambahkan gaya ke halaman:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
File main.css yang didownload oleh browser dikenal sebagai stylesheet eksternal,
karena disimpan secara terpisah
dari HTML yang menggunakannya.
Secara default, browser harus mengunduh, mengurai, dan memproses semua stylesheet eksternal yang ditemuinya sebelum dapat menampilkan, atau merender, konten apa pun ke layar pengguna. Browser tidak akan berupaya menampilkan konten sebelum stylesheet diproses, karena stylesheet bisa berisi aturan yang memengaruhi gaya laman.
Setiap stylesheet eksternal harus diunduh dari jaringan. Perjalanan jaringan tambahan ini bisa memperpanjang waktu secara signifikan yang harus ditunggu pengguna sebelum mereka melihat konten apa pun di layar.
CSS yang tidak digunakan juga memperlambat konstruksi browser hierarki render. Hierarki render mirip seperti hierarki DOM, hanya saja memiliki gaya untuk setiap simpul. Untuk mengonstruksikan hierarki render, browser harus menelusuri seluruh hierarki DOM, dan memeriksa aturan CSS yang berlaku untuk setiap simpul. Semakin banyak CSS yang tidak terpakai, semakin banyak waktu yang mungkin diperlukan browser untuk menghitung gaya untuk setiap node.
Cara mendeteksi CSS yang tidak digunakan
Tab Cakupan Chrome DevTools dapat membantu Anda menemukan CSS yang penting dan tidak penting. Lihat Melihat CSS yang digunakan dan tidak digunakan dengan tab Cakupan.
Menyelaraskan CSS kritis dan menunda CSS yang tidak penting
Mirip dengan menyisipkan kode dalam tag <script>,
gaya kritis inline yang diperlukan untuk
di dalam blok <style> di head halaman HTML.
Kemudian, muat gaya lainnya secara asinkron menggunakan link preload.
Pertimbangkan untuk mengotomatiskan proses ekstraksi dan penyisipan "Paruh Atas" CSS menggunakan alat Penting.
Pelajari lebih lanjut di Menunda CSS yang tidak penting.
Panduan khusus stack
Drupal
Pertimbangkan untuk menghapus aturan CSS yang tidak digunakan. Hanya lampirkan library Drupal yang diperlukan ke halaman atau komponen yang relevan di halaman. Lihat Menentukan library untuk mengetahui detailnya.
Joomla
Sebaiknya kurangi atau ubah jumlah ekstensi Joomla yang memuat CSS yang tidak digunakan di halaman Anda.
WordPress
Pertimbangkan untuk mengurangi atau mengganti jumlah plugin WordPress yang memuat CSS yang tidak digunakan di halaman Anda.