Cara Melakukan Minify CSS pada Blog

byKurazone Net -

KURAZONE ~ Salah satu cara untuk mempercepat loading blog adalah dengan cara melakukan compress pada struktur HTML, CSS maupun Javascript. Langkah ini juga sering disebut dengan Minify File yang tujuannya adalah untuk menghapus karakter yang tidak diperlukan dalam mengeksekusi kode. Pada kesempatan kali ini kita akan belajar tentang "Cara Melakukan Minify CSS pada Blog".

Tujuan dari Minify CSS ini adalah :
Menghilang karakter yang tidak diperlukan dalam eksekusi kode. 

Contohnya adalah seperti dibawah ini :
before
.kura {
padding:10px;
margin:10px;
color:red;
display:inline;
}
after
.kura{padding:10px;margin:10px;color:red;display:inline}
Kedua kode CSS diatas memiliki fungsi yang sama namun berbeda dalam hal struktur. 
Kode pertama memperlihat deklarasi yang turun baris setelah penulisan selektor. Sedangkan kode kedua memperlihatkan deklarasi yang masih dalam 1 baris setelah penulisan selektor.

Sederhananya, proses ini akan menghapus karakter yang tidak diperlukan, seperti :
1. Spasi
2. Baris baru (Enter)
3. <!-- Komentar --> / Argumen
4 Pembatas ; atau titik koma terakhir dari masing-masing selektor.

Karakter yang dihilangkan tersebut guna mempermudah proses deklarasi, proses minify akan meningkatkan kecepatan unduh, parsing dan durasi muat saat blog diakses.

Cara Melakukan Minify CSS pada Blog

1. Buka Akun Blogger.
2. Pilih Menu Tema >> Edit HTML.
3. Cari kode <style> atau <b:skin>
Klik tiga titik untuk membuka kode CSS nya.


4. Pilih semua CSS yang berada diantara <style> atau <b:skin>, Copy CSS nya.

5. Masuk ke Halaman Tool CSS Minifer.
6. Paste Kode nya kedalam kolom.
7. Centang beberapa settingan yang disediakan, pilihan tergantung selera kalian.
8. Pilih Compress CSS, Copy semua CSS yang sudah dikompres tersebut.
9. Kembali ke Tema, hapus CSS yang lama, lalu paste CSS yang sudah dikompres tadi kedalam Tema.

Contoh before dan after bisa dilihat pada gambar dibawah ini :

BEFORE

AFTER

Dari sisi penglihatan Manusia mungkin akan nampak kurang menarik atau malah terkesan berantakan karena tampilannya terlihat sangat dempet, tanpa jeda dan sulit dibaca. Namun dari sisi penglihatan robot, tampilan tersebut merupakan bahasa yang mudah dieksekusi dan diterjemahkan secara akurat dalam bahasa HTML.

Untuk mengetahui seberapa berhasilnya kompresi halaman yang di minify, kalian bisa melakukan test pada halaman Compression Test.

  1. Uncompressed Page Size : adalah prediksi ukuran Halaman apabila tidak dilakukan kompres
  2. Compressed Page Size : adalah hasil ukuran Halaman yang sudah dilakukan kompres
  3. Savings : adalah hasil penghitungan seberapa hemat halaman setelah di kompres

Apabila hasil kompresi nya bagus, maka kalian bisa check ke PageSpeed Insight untuk mengetahui rekomendasi, apakah perlu dilakukan Minify HTML atau tidak. Jika hasil nya Done maka halaman blog tidak perlu di minify, alias Optimasi Minify HTML sudah berhasil.


Secara kasat mata kompresi CSS ini bisa dilihat melalui view-source pada suatu situs web dengan cara menekan CTRL+U. Jika terdapat spasi-spasi kosong, maka dapat dioptimalkan dengan menghilangkan secara manual spasi kosong tersebut.

Kapan sebaiknya melakukan Minify CSS?

Hasil dari Minify CSS menampilkan kode-kode yang dempet dan tanpa jeda, sehingga pemilik blog kadang akan merasa kesulitan apabila ingin melakukan perubahan pada bagian CSS nya. Untuk itulah perlu di manajemen terlebih dahulu mengenai kapan sebaiknya melakukan Minify CSS.

Langkah yang tepat untuk melakukan Minify CSS adalah ketika template benar-benar sudah tidak akan dilakukan perubahan. Jika kelak ingin melakukan perubahan setelah Minify CSS, maka sebaiknya back-up terlebih dulu salinan CSS nya, agar tidak menyulitkan dikemudian hari maka buatlah 2 dokumen (versi manusia dan versi robot/mesin).

Nah, sekarang kembali kepada keputusan kalian. Ingin Minify CSS sekarang atau nanti?
Itulah informasi mengenai "Cara Melakukan Minify CSS pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !

Tags





Lebih baru Lebih lama