Minify CSS atau dalam bahasa Indonesianya Memperkecil CSS adalah sebuah masalah kecepatan loading suatu blog yang diakibatkan oleh CSS yang belum di kompres.
CSS yang belum dikompres akan memperbesar size atau ukuran suatu blog. Oleh karenanya, blog menjadi berat dan waktu loadnya pun lambat. Ciri-ciri CSS yang belum dikompres antara lain:
- Tingkat keterbacaan (readability) yang tinggi, seperti:
- Jarak antar elemen yang jauh
- Banyak whitespace
- Banyak menggunakan comment
- CSS yang terpisah-pisah
- Menggunakan CSS Eksternal
Bila blog anda memiliki dua atau bahkan semua dari ciri-ciri diatas, bisa saya pastikan bahwa anda akan mendapatkan masalah Minify CSS di Google PageSpeed Insights.
Memang, prioritas dari masalah ini sama seperti Minify HTML dan Minify JavaScript, yaitu Low. Tetapi, masalah ini dapat membuat skor kecepatan loading blog anda di PageSpeed Insights berkurang dan memperlambat load blog anda sekitar 100-300 milisekon (berdasarkan info dari GTMetrix).
Lalu bagaimana cara mengatasi masalah Minify CSS ini? Langsung saja, berikut 4 langkah cara mengatasinya dari Bang Jarwo.
Langkah Pertama: Mengurangi Readability
Readability atau tingkat keterbacaan dalam hal CSS ini bermaksud bahwa semakin tinggi tingkat readability CSS anda, maka semakin mudah CSS anda untuk dibaca dan dilihat. Silahkan anda simak kedua contoh CSS berikut ini:
Contoh Readability CSS paling tinggi:
.jarwo {
background: #abcd;
color: white;
line-spacing: 12px
}Contoh Readability CSS paling rendah:
.jarwo{background:#abcd;color:white;line-spacing:12px}
Bagaimana? Apakah anda sudah mengerti apa yang saya maksud?
Kedua contoh readability diatas sama fungsinya, dan tidak ada yang beda. Readability sama sekali tidak mempengaruhi fungsi CSS, apalagi membuat error, asalkan cara mengkompresnya benar.
Sekarang anda cek CSS yang terdapat di blog anda. Apabila tingkat readabilitynya tinggi, saya sarankan segera anda kompres.
Adapun cara mengkompresnya, daripada anda menghapus satu persatu whitespacenya, silahkan anda copy semua CSS (yang mau dikompres), lalu buka link ini, dan pastekan CSS anda disana.
Langkah Kedua: Menghilangkan comment yang ada
Contoh comment yang terdapat di CSS seperti ini:
/* Bang Jarwo */
Atau secara keseluruhan seperti ini:
/* CSS A */
.jarwo{background:#abcd;color:white;line-spacing:12px}.jarwo{background:#abcd;color:white;line-spacing:12px}.jarwo{background:#abcd;color:white;line-spacing:12px}
/* CSS B */
.jarwo{background:#abcd;color:white;line-spacing:12px}.jarwo{background:#abcd;color:white;line-spacing:12px}.jarwo{background:#abcd;color:white;line-spacing:12px}
Comment ini tidak memiliki arti apa-apa, selain sebagai penjelas dan pemberi jarak antara CSS A dengan CSS B, dan seterusnya. Ada baiknya anda menghapus comment seperti ini guna memperkecil size CSS anda.
Langkah Ketiga: Menyatukan CSS yang terpisah
Contohnya seperti ini:
.jarwo{background:#aaa}
.bang {background:#aaa}
.jarwo {color:#aaa}
Disana terdapat dua class, yaitu bang dan jarwo. Tetapi, disana terdapat dua class jarwo yang terpisah, dan dapat membuang-buang space. CSS diatas sebaiknya anda buat seperti ini:
.jarwo {background:#aaa; color:#aaa}
.bang {background:#aaa}
4. Penggunaan CSS Eksternal
CSS eksternal itu yang saya tahu hanya untuk menambah font dan ikon di blog saja. Padahal, dampaknya sangat besar, lho... (untuk kecepatan load suatu blog)
Saya sangat menyarankan untuk sebisa mungkin menghindari penggunaan CSS eksternal. Karena, seperti yang kita ketahui saja, bahwa kecepatan internet di Indonesia masih tidak secepat luar negeri. Ditambah lagi clock speed rata-rata prosesor komputer di Indonesia yang masih menengah kebawah.
Lha, kok malah nyambung ke clock speednya prosesor sih?
Iya jelas, karena penggunaan CSS eksternal secara tidak langsung sama saja kita membuka 2 web sekaligus, web utama dan web CSS eksternal tadi. Sekarang coba anda lakukan tes pada komputer dengan clock speed yang rendah untuk membuka 3 atau lebih tab secara bersamaan. Pasti akan mengalami sedikit lag, bukan?
Nah, disini dapat saya simpulkan, penggunaan CSS eksternal selain dapat memperlambat loading suatu blog, juga dapat mengganggu User Experience (UX) alias Pengalaman Pengguna, khususnya para netizen dengan spesifikasi laptop/handphonenya yang rendah.
Bahkan, sampai saat ini, blog KodeJarwo sama sekali tidak menggunakan CSS eksternal. Tetapi, apakah blog saya terlihat kurang menarik dari segi fontnya?