Loading blog agan lama ? Apa sih penyebabnya ? Apakah ada hubungan CSS dengan load time (waktu muat) halaman blog?
Logika sederhananya begini gan, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang.
Untuk menyiasati agar blog atau website kita mudah atau ringan untuk di load adalah dengan mengoptimalkan file CSS. Salah satu cara agar file CSS anda bisa optimal adalah dengan cara mengkompress file tersebut baik secara manual ataupun secara otomatis dengan menggunakan tool CSS Compressor.
Kegunaan CSS Compressor :
1. Dapat mempercepat loading blog
Hal ini dikarenakan semakin kecil CSS yang terload didalam sebuah web, maka semakin cepat juga loading web tersebut.
2. Dapat menambah pegalaman pengguna dimata google.
Pernahkah agan mengecek page load di PageSpeed Insights di sana terdapat problem - problem yang harus diperbaiki untuk mempercepat loading web. Nah pengalaman web pengguna juga ditetukan dari meminimalkan CSS,jika CSS agan sudah diminimalkan pasti pegalaman pengguna agan akan naik 1 peringkat.
Pertanyaannya sekarang adalah "Bagaimana mengkompress CSS pada blog kita ?"
Ada dua metode mengkompesi CSS, yang pertama dengan cara manual dan yang kedua dengan cara menggnakan tool. Kita akan bahas satu persatu disini :
A. Compress SCC secara manual.
Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :
a {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:visited {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:hover {
color: #ffffff;
text-decoration: none;
padding: 0px 0px 0px 3px;
}
Coba agan amati secara seksama CSS tersebut. Secara sekilas memang ada CSS yang sama antara properti CSS untuk fungsi a dan fungsi a:visited. Jika ada CSS yang sama agan tinggal menggabungkan keduanya dengan memberkan tanda ( , ). Jadi hasil compress CSSnya menjadi sperti ini :
a,a:visited{
color:#fff;font-size:12px;
text-decoration:none;
text-transform:title case;
padding:0 0 0 3px
}
a:hover{
color:#fff;
text-decoration:none;
padding:0 0 0 3px
}Setelah kode CSS tersebut dikompres, terlihat ada pengurangan spasi di antara kode a,a:visited. Nah, berarti bisa diambil kesimpulan bahwa spasi juga berpengaruh terhadap kecepatan loading blog. Maka kode di atas masih dapat disederhanakan lagi menjadi seperti ini :
a,a:visited{color:#fff;font-size:12px;text-decoration:none;text-transform:title case;padding:0 0 0 3px}
a:hover{color:#fff;text-decoration:none;padding:0 0 0 3px}
Dengan mengkompresi CSS yang ada di blog agan, dijamin loading web agan akan bertambah lebih cepat. Namun untuk pemula biasanya akan kesusahan untuk mengedit template karena CSS menjadi padat. Namun itu bukan merupakan suatu kendala karena masih ada CTRL+F untuk mencari CSSnya.
B. Menggunakan tool CSS Compressor
Buat agan yang males mengompresi css secara manual, disini saya menyediakan tool css compressor. Siakan kunjungi li dibawah ini untuk menuju ke tool css compressornya.
Cara menggunakan toolnya :
Langkah selanjutnya tekan tombol Compress CSS, maka output css yang agan compress akan muncul dibagian bawah.
Ganti css yang ada di blog agan dengan css hasil compress.
Sampai disini dulu penjelasan mengenai CSS Compessornya. Sekarang kita lanjut ke beautify css, sebenarnya beautify css kebaikan dari css compressor. Kegunaan css beautify sendiri adalah untuk mempermudah pengguna dalam mengedit template blognya. Sebenarnnya tool yang saya berikan diatas juga bisa berfungsi untuk mengubah css yang sudah di kompress menjadi css beautify.
Cara menggunakan tool CSS beautify :
b. Tekan tombol Beautify CSS, maka css yang telah di compress akan menjadi css beauty.
c. Agan bisa memilih mode untuk css beautynya sesuai dengan selera agan.
Mungkin cukup sekian artikel mengenai css compressor dan css beautify, jika belum faham silakan bertanya. Pasti akan saya jawab semampu saya. Semoga bermanfaat dan salam blogger.
Mungkin cukup sekian artikel mengenai css compressor dan css beautify, jika belum faham silakan bertanya. Pasti akan saya jawab semampu saya. Semoga bermanfaat dan salam blogger.