Cara Mengatasi Minify CSS di PageSpeed Insights

Cara Mengatasi Minify CSS di PageSpeed Insights

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:
  1. Tingkat keterbacaan (readability) yang tinggi, seperti:
    • Jarak antar elemen yang jauh
    • Banyak whitespace
  2. Banyak menggunakan comment
  3. CSS yang terpisah-pisah
  4. 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?

Selasa, Juni 20, 2017 - 6 komentar

6 komentar untuk Cara Mengatasi Minify CSS di PageSpeed Insights.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.
bambang setiaji
Senin, 13 November 2017 21.24.00 WITA

css eksternal itu kaya font awesome ya bang ?

Balas Hapus
.
VIVO
Kamis, 16 November 2017 16.50.00 WITA

Baru tau ternyata space kosong ngaruh ya. Berarti itu dibaca juga oleh bot perayap ato bagaimana ya, bingung.

Balas Hapus
.
Ozik Jarwo
Kamis, 16 November 2017 17.08.00 WITA

Tidak dibaca bot perayap maupun browser, tetapi tetap ada. Jadi istilahnya kode gak berguna, cuma buat berat-beratin aja...

Balas Hapus
.
ceroci
Rabu, 13 Desember 2017 22.56.00 WITA

Bang saya kan make CSS eksternal untuk membuat popular post saya lebih menarik. Apa bisa saya jadikan internal? kalau bisa gmna caranya bang?

Balas Hapus
.
Ozik Jarwo
Kamis, 14 Desember 2017 09.37.00 WITA

Bisa. Tinggal buka link CSS eksternalnya, copy semua isi kodenya, pastekan didalam b:skin

Balas Hapus