Bagian Peluang di daftar laporan Lighthouse Anda semua file CSS yang tidak diminifikasi, beserta potensi penghematan dalam kibibyte (KiB) ketika file berikut diminifikasi:
Cara minifikasi file CSS dapat meningkatkan performa
Memperkecil file CSS dapat meningkatkan performa pemuatan halaman. 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 {i>byte<i}. Minifier dapat lebih meningkatkan efisiensi byte dengan menghapus spasi kosong:
h1,
h2 {
background-color: #000000;
}
Beberapa minifier menggunakan trik pintar untuk meminimalkan byte.
Misalnya, nilai warna #000000 dapat dikurangi lebih lanjut menjadi #000,
yang padanannya merupakan singkatan.
Lighthouse memberikan perkiraan
potensi penghematan berdasarkan
pada komentar dan karakter spasi kosong yang ditemukannya di CSS Anda.
Ini adalah estimasi konservatif.
Seperti yang disebutkan sebelumnya,
minifier dapat melakukan pengoptimalan yang cerdas (seperti mengurangi #000000 menjadi #000)
untuk mengurangi ukuran file lebih lanjut.
Jika Anda menggunakan minifier,
Anda mungkin melihat lebih banyak penghematan
dari yang dilaporkan Lighthouse.
Menggunakan minifier CSS untuk meminifikasi kode CSS
Untuk situs kecil yang tidak sering Anda perbarui, Anda mungkin dapat menggunakan layanan {i>online<i} untuk meminifikasi file Anda secara manual. Anda menempelkan CSS ke UI layanan, dan menampilkan versi kode yang diminifikasi.
Bagi pengembang profesional, Anda mungkin ingin menyiapkan alur kerja otomatis yang meminifikasi CSS Anda secara otomatis sebelum Anda men-deploy kode yang sudah diperbarui. Hal ini biasanya dilakukan dengan alat build seperti Gulp atau Webpack.
Pelajari cara meminifikasi kode CSS di Minifikasi CSS.
Panduan khusus stack
Drupal
Aktifkan Aggregate CSS files di Administration > Konfigurasi > Pengembangan. Anda juga dapat mengonfigurasi opsi agregasi lanjutan melalui modul tambahan untuk mempercepat situs dengan menyambungkan, meminifikasi, dan mengompresi CSS Anda gaya.
Joomla
Sejumlah ekstensi Joomla dapat mempercepat situs dengan menyambungkan, meminifikasi, dan mengompresi CSS gaya. Ada juga template yang menyediakan fungsi ini.
Magento
Aktifkan opsi Minifikasi File CSS di setelan Developer toko Anda.
React
Jika sistem build otomatis meminifikasi file CSS, pastikan Anda men-deploy build produksi aplikasi Anda. Anda dapat memeriksanya dengan React Developer Tools .
WordPress
Sejumlah plugin WordPress dapat mempercepat situs dengan menggabungkan, meminifikasi, dan mengompresi gaya Anda. Anda mungkin juga ingin menggunakan proses pembangunan untuk melakukan minifikasi di muka jika memungkinkan.