Minifikasikan CSS

Bagian Peluang dalam laporan Lighthouse mencantumkan semua file CSS yang tidak diminifikasi, beserta potensi penghematan dalam kibibyte (KiB) saat file ini diminifikasi:

Screenshot audit Minify CSS Lighthouse

Meminifikasi file CSS dapat meningkatkan performa pemuatan halaman Anda. File CSS sering kali lebih besar dari yang seharusnya. Contoh:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Dapat dikurangi menjadi:

h1,
h2 {
  background-color: #000000;
}

Dari perspektif browser, 2 contoh kode ini secara fungsional setara, tetapi contoh kedua menggunakan lebih sedikit byte. Minifier dapat lebih meningkatkan efisiensi byte dengan menghapus spasi kosong:

h1,
h2 {
  background-color: #000000;
}

Beberapa minifier menggunakan trik cerdas untuk meminimalkan byte. Misalnya, nilai warna #000000 dapat lebih dipersingkat menjadi #000, yang merupakan singkatannya.

Lighthouse memberikan estimasi potensi penghematan berdasarkan komentar dan karakter spasi kosong yang ditemukan di CSS Anda. Ini adalah estimasi konservatif. Seperti yang disebutkan sebelumnya, minifier dapat melakukan pengoptimalan yang cerdas (seperti mengurangi #000000 menjadi #000) untuk lebih mengurangi ukuran file Anda. Jadi, jika Anda menggunakan minifier, Anda mungkin melihat lebih banyak penghematan daripada yang dilaporkan Lighthouse.

Menggunakan minifier CSS untuk meminifikasi kode CSS

Untuk situs kecil yang tidak sering Anda perbarui, Anda mungkin dapat menggunakan layanan online untuk melakukan minifikasi file secara manual. Anda menempelkan CSS ke UI layanan, dan kode tersebut akan menampilkan versi yang diminifikasi.

Untuk developer profesional, Anda mungkin ingin menyiapkan alur kerja otomatis yang meminifikasi CSS secara otomatis sebelum men-deploy kode yang telah diperbarui. Hal ini biasanya dilakukan dengan alat build seperti Gulp atau Webpack.

Pelajari cara meminifikasi kode CSS di Minifikasi CSS.

Panduan khusus stack

Drupal

Pastikan Anda telah mengaktifkan "Aggregate CSS files" di halaman "Administration » Configuration » Development". gaya.

Joomla

Sejumlah ekstensi Joomla dapat mempercepat situs Anda dengan menyambungkan, meminifikasi, dan mengompresi gaya CSS. Ada juga template yang menyediakan fungsi ini.

Magento

Aktifkan opsi Minifikasi File CSS di setelan Developer toko Anda.

React

Jika sistem build meminifikasi file CSS secara otomatis, pastikan Anda men-deploy build produksi aplikasi Anda. Anda dapat memeriksanya dengan ekstensi React Developer Tools.

WordPress

Sejumlah plugin WordPress dapat mempercepat situs Anda dengan menggabungkan, meminifikasi, dan mengompresi gaya Anda. Anda juga dapat menggunakan proses build untuk melakukan minifikasi di tahap awal jika memungkinkan.

Resource