Minifikasikan CSS

File CSS dapat berisi karakter yang tidak diperlukan, seperti komentar, spasi kosong, dan indentasi. Dalam produksi, karakter tersebut bisa dihapus dengan aman, untuk mengurangi ukuran file tanpa memengaruhi cara browser memproses gaya. Teknik ini disebut minifikasi.

Memuat CSS yang tidak diminifikasi

Lihat blok CSS berikut:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Konten ini mudah dibaca, tetapi dapat menghasilkan file yang lebih besar dari yang diperlukan:

• Teks ini menggunakan spasi untuk tujuan indentasi dan berisi komentar, yang diabaikan oleh browser, sehingga dapat dihapus.
• Elemen <h1> dan <h2> memiliki gaya yang sama: bukan mendeklarasikannya secara terpisah: "h1 {...} h2 {...}" dapat dinyatakan sebagai "h1, h2{...}".
• background-color, #000000 dapat dinyatakan sebagai #000 saja.

Setelah melakukan perubahan tersebut, Anda akan mendapatkan versi yang lebih ringkas dari gaya yang sama:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Anda mungkin tidak ingin menulis CSS seperti itu. Sebagai gantinya, Anda dapat menulis CSS seperti biasa dan menambahkan langkah minifikasi ke proses build. Dalam panduan ini, Anda akan mempelajari cara melakukannya menggunakan alat build populer: webpack.

Ukur

Anda akan menerapkan minifikasi CSS ke situs yang telah digunakan di panduan lain: Fav Kitties. Versi situs ini menggunakan library CSS yang keren: animate.css, untuk menganimasikan berbagai elemen halaman saat pengguna memilih cat tambahkan.

Sebagai langkah pertama, Anda perlu memahami peluang apa yang akan muncul setelah meminifikasi file ini:

1. Buka halaman pengukuran.
2. Masukkan URL: https://fav-kitties-animated.glitch.me lalu klik Jalankan Audit.
3. Klik Lihat laporan.
4. Klik Performa dan buka bagian Peluang.

Laporan yang dihasilkan menunjukkan bahwa maksimal 16 KB dapat disimpan dari file animate.css:

Sekarang periksa konten CSS:

1. Buka situs Favorit Kitties di Chrome. (Mungkin perlu waktu beberapa saat agar server Glitch merespons untuk pertama kalinya.)
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Network
4. Klik filter CSS.
5. Centang kotak Disable cache.
6. Muat ulang aplikasi.

Halaman ini meminta dua file CSS, masing-masing sebesar 1,9 KB dan 76,2 KB.

1. Klik animate.css.
2. Klik tab Response untuk melihat konten file.

Perhatikan bahwa stylesheet berisi karakter untuk spasi kosong dan indentasi:

Berikutnya, Anda akan menambahkan beberapa plugin webpack ke proses build untuk meminifikasi file ini.

Minifikasi CSS dengan webpack

Sebelum beralih ke pengoptimalan, luangkan waktu untuk memahami cara kerja proses build untuk situs Fav Kitties:

Secara default, paket JS yang dihasilkan yang dihasilkan webpack akan berisi konten file CSS yang disisipkan. Karena kita ingin mempertahankan file CSS yang terpisah, kita menggunakan dua plugin pelengkap:

• mini-css-extract-plugin akan mengekstrak setiap sheet gaya ke dalam filenya sendiri, sebagai salah satu langkah proses build.
• webpack-fix-style-only-entries digunakan untuk memperbaiki masalah di wepback 4, untuk menghindari pembuatan file JS tambahan untuk setiap file CSS yang tercantum di webpack-config.js.

Anda sekarang akan membuat beberapa perubahan pada project:

1. Buka project Fav Kitties di Glitch.
2. Untuk melihat sumber, tekan Lihat Sumber.
3. Klik Remix untuk Mengedit agar project dapat diedit.
4. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).

Untuk meminifikasi CSS yang dihasilkan, Anda harus menggunakan optimize-css-assets-webpack-plugin:

1. Di konsol Glitch, jalankan npm install --save-dev optimize-css-assets-webpack-plugin.
2. Jalankan refresh, sehingga perubahan disinkronkan dengan editor Glitch.

Selanjutnya, kembali ke editor Glitch, buka file webpack.config.js, dan lakukan modifikasi berikut:

Muat modul di awal file: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

Kemudian, teruskan instance plugin ke array plugin: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Setelah melakukan perubahan, build ulang project akan dipicu. webpack.config.js yang dihasilkan akan terlihat seperti ini:

Selanjutnya, Anda akan memeriksa hasil pengoptimalan ini dengan alat performa.

Verifikasi

• Untuk melihat pratinjau situs, tekan View App. Lalu tekan Layar Penuh .

Jika tersesat dalam langkah sebelumnya, Anda dapat mengklik di sini untuk membuka versi situs yang dioptimalkan.

Untuk memeriksa ukuran dan konten file:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Network
3. Klik filter CSS.
4. Centang kotak Disable cache jika belum dicentang.
5. Muat ulang aplikasi.

Anda dapat memeriksa file ini, dan melihat bahwa versi baru tersebut tidak berisi spasi kosong. Kedua file jauh lebih kecil, khususnya, animate.css telah berkurang sebesar ~26%, sehingga menghemat ~20 KB.

Sebagai langkah terakhir:

1. Buka halaman pengukuran.
2. Masukkan URL situs yang dioptimalkan.
3. Klik Lihat laporan.
4. Klik Performa dan cari bagian Peluang.

Laporan ini tidak lagi menampilkan "Minifikasi CSS" sebagai "Peluang", dan kini telah dipindahkan ke bagian "Audit yang Lulus":

Karena file CSS adalah resource yang memblokir rendering, jika Anda menerapkan minifikasi pada situs yang menggunakan file CSS besar, Anda dapat melihat peningkatan pada metrik seperti First Contentful Paint.

Langkah selanjutnya dan sumber daya

Dalam panduan ini, kita telah membahas Minifikasi CSS dengan webpack, tetapi pendekatan yang sama dapat diikuti dengan alat build lainnya, seperti gulp-clean-css untuk Gulp, atau grunt-contrib-cssmin untuk Grunt.

Minifikasi juga dapat diterapkan ke jenis file lainnya. Lihat panduan Meminifikasi dan mengompresi payload jaringan untuk mempelajari lebih lanjut alat untuk meminifikasi JS, dan beberapa teknik pelengkap, seperti kompresi.