Minifikasikan CSS

Demián Renzulli

File CSS dapat berisi karakter yang tidak diperlukan, seperti komentar, spasi kosong, dan indentasi. Dalam produksi, karakter ini dapat 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 ini, 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 dengan 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 elemen halaman yang berbeda saat pengguna memilih kucing END.

Sebagai langkah pertama, Anda perlu memahami peluang setelah meminifikasi file ini:

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

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

Sekarang periksa konten CSS:

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

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

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

Perhatikan bahwa stylesheet berisi karakter untuk spasi kosong dan indentasi:

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

Minifikasi CSS dengan webpack

Sebelum membahas 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 terpisah, kita menggunakan dua plugin pelengkap:

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

Sekarang Anda akan membuat beberapa perubahan pada project:

1. Buka project Fav Kitties di Glitch.
2. Untuk melihat sumber, tekan Lihat Sumber.
3. Klik Remix to Edit 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 perlu menggunakan optimize-css-assets-webpack-plugin:

1. Di konsol Glitch, jalankan npm install --save-dev optimize-css-assets-webpack-plugin.
2. Jalankan refresh agar 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 plugins: 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. Berikut adalah tampilan webpack.config.js yang dihasilkan:

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

Verifikasi

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .

Jika tersesat di langkah sebelumnya, Anda dapat mengklik di sini, untuk membuka halaman {i>website<i} itu.

Untuk memeriksa ukuran dan konten file:

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

Anda dapat memeriksa file ini, dan melihat bahwa versi baru tidak berisi spasi kosong. Kedua file berukuran 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 tidak menampilkan "Minifikasi CSS" sebagai "Opportunity" lagi, dan kini telah dipindahkan ke "Lulus Audit" :

Karena file CSS merupakan resource yang memblokir rendering, jika Anda menerapkan minifikasi di situs yang menggunakan file CSS berukuran 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 lain. Lihat Panduan mengecilkan dan mengompresi payload jaringan guna mempelajari lebih lanjut alat untuk meminifikasi JS, dan beberapa teknik pelengkap, seperti kompresi.