Bagian Peluang dalam laporan Lighthouse Anda mencantumkan semua file CSS yang tidak diminifikasi, beserta potensi penghematan dalam kibibyte (KiB) jika file ini diminifikasi:
Cara meminifikasi file CSS dapat meningkatkan performa
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 setara secara fungsional, tetapi contoh kedua menggunakan lebih sedikit byte. Minifier dapat meningkatkan efisiensi byte lebih lanjut dengan menghapus spasi kosong:
h1,
h2 {
background-color: #000000;
}
Beberapa minifier menggunakan trik cerdas untuk meminimalkan byte.
Misalnya, nilai warna #000000 dapat dikurangi lebih lanjut menjadi #000,
yang merupakan singkatannya.
Lighthouse memberikan perkiraan potensi penghematan berdasarkan
karakter kosong dan komentar yang ditemukan di CSS Anda.
Ini adalah perkiraan konservatif.
Seperti yang disebutkan sebelumnya,
minifier dapat melakukan pengoptimalan yang cerdas (seperti mengurangi #000000 menjadi #000)
untuk mengurangi ukuran file lebih lanjut.
Jadi, jika 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 diupdate, Anda mungkin dapat menggunakan layanan online untuk meminifikasi file secara manual. Anda menempelkan CSS ke dalam UI layanan, dan akan menampilkan versi kode yang diminifikasi.
Untuk developer profesional, Anda mungkin ingin menyiapkan alur kerja otomatis yang meminifikasi CSS secara otomatis sebelum men-deploy kode yang diperbarui. Hal ini biasanya dilakukan dengan alat bangunan seperti Gulp atau Webpack.
Pelajari cara meminifikasi kode CSS di Meminimalkan CSS.
Panduan khusus stack
Drupal
Aktifkan Aggregate CSS files di Administration > Configuration > Development. Anda juga dapat mengonfigurasi opsi agregasi lanjutan lainnya melalui modul tambahan untuk mempercepat situs dengan menyambungkan, meminifikasi, dan mengompresi gaya CSS.
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 Minify File CSS di setelan Developer app store Anda.
Reaksi
Jika sistem build meminifikasi file CSS secara otomatis, pastikan Anda men-deploy build produksi aplikasi. 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 ini di awal jika memungkinkan.