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 :
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 :
- Setelah agan mengunjungi link tersebut, copy dan pastekan css yang akan agan compress di bagian field, disana sudah ada tulisannya paste css here...
- 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 :
- Copy dan pastekan css yang telah dicompess edalam field.
- Tekan tombol Beautify CSS, maka css yang telah di compress akan menjadi css beauty.
- Agan bisa memilih mode untuk css beautynya sesuai dengan selera agan.
My FB : Anonymous Hacker
Sampai jumpa kembali
Terima Kasih telah mengunjungi Blog saya !!!
0 komentar:
Posting Komentar