Hapus CSS yang tidak digunakan

Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua stylesheet dengan CSS yang tidak digunakan dengan potensi penghematan sebesar 2 KiB atau lebih. Hapus CSS yang tidak digunakan untuk mengurangi byte tidak perlu yang digunakan oleh aktivitas jaringan:

Screenshot audit Lighthouse Remove CSS yang tidak digunakan

Bagaimana CSS yang tidak digunakan memperlambat performa

Menggunakan tag <link> adalah cara 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 mendownload, mengurai, dan memproses semua stylesheet eksternal yang ditemuinya sebelum dapat menampilkan, atau merender, konten apa pun ke layar pengguna. Tidak masuk akal jika browser mencoba menampilkan konten sebelum stylesheet diproses, karena stylesheet mungkin berisi aturan yang memengaruhi gaya halaman.

Setiap stylesheet eksternal harus didownload dari jaringan. Perjalanan jaringan tambahan ini dapat secara signifikan meningkatkan waktu tunggu pengguna sebelum melihat konten apa pun di layar mereka.

CSS yang tidak digunakan juga memperlambat konstruksi hierarki render browser. Pohon render sama seperti pohon DOM, hanya saja pohon ini juga menyertakan gaya untuk setiap simpul. Untuk membuat pohon render, browser harus mengikuti seluruh hierarki DOM, dan memeriksa aturan CSS mana yang diterapkan pada setiap simpul. Semakin banyak CSS yang tidak digunakan, semakin banyak waktu yang mungkin diperlukan browser untuk menghitung gaya 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.

Chrome DevTools: Tab cakupan
Chrome DevTools: Tab cakupan.

Sejajarkan CSS penting dan menunda CSS yang tidak penting

Mirip dengan menyisipkan kode dalam tag <script>, menyejajarkan gaya penting yang diperlukan untuk paint pertama dalam blok <style> pada head halaman HTML. Kemudian, muat gaya lainnya secara asinkron menggunakan link preload.

Pertimbangkan untuk mengotomatiskan proses ekstraksi dan menyisipkan CSS "Paruh Atas" 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.

Referensi