Optimasi Blog dengan PurgeCSS

Sejak migrasi dari WP ke Hugo saya jadi terobsesi dengan kecepatan loading blog. Rasanya belum puas kalau skor PageSpeed masih 80-90.

Nah kali ini saya coba pakai PurgeCSS untuk mengoptimasi blog ini yang saya desain sendiri pakai framework Bootstrap. Modelnya minimalis karena saya bisanya desain begitu 😄

File bootstrap.min.css itu ukurannya 163 kB. Masalahnya tidak semua style saya pakai, tentu sangat mubazir kalau setiap kali blog ini dibuka harus loading bootstrap.min.css sebesar 163 kB.

Memang sih 163 kB sepertinya ga ngaruh kalau pakai koneksi 4G atau LTE tapi namanya optimasi ya semua hal jangan sampai terlewat.

Sayangnya PurgeCSS ini tanpa user interface tapi sejak pakai Hugo saya jadi terbiasa ketak-ketik di command line, ternyata asik juga. Dokumentasi PurgeCSS cukup lengkap dan mudah dipahami.

purgecss --css bootstrap.min.css --content /content/**/*.md themes/**/*.html -s mb-3 img-fluid -o static/

--css bootstrap.min.css Sumber file CSS yang digunakan. Ini ukuran aslinya 163 kB.

--content /content/**/*.md themes/**/*.html Konten yang harus dianalisa, jadi si PurgeCSS ini akan mengecek style apa saja yang ada di file content tadi.

-s mb-3 img-fluid Safelist. Ini tambahan untuk selector CSS tertentu supaya tidak dihapus PurgeCSS.

-o static/ Output hasilnya nanti file CSS dengan nama yang sama, tapi lokasinya saya bikin di folder static sesuai struktur folder Hugo.

PurgeCSS ini juga saya terapkan di website klien yang pakai Bootstrap, hasilnya loading jauh lebih cepat.

Artikel Lainnya

Komentar