Percepat Loading Blog dengan Optimalisasi/Kompres CSS

Apa interaksi CSS menggunakan load time (waktu muat) halaman blog? Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yg harus dibaca sang browser. Semakin besar berukuran file, tentu saja bahasa perintahnya semakin banyak, menggunakan demikian 'saat baca' yg dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool pada blog ini untuk mengetahui kecepatan loading blog anda.
Setelah ganti template beberapa waktu yg lalu, masalah loading blog yg cenderung lebih lama daripada template yangsebelumnya ada. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya merupakan ketidaknyamanan pengunjung. Terlebih lagi jika timbul ketidaksabaran serta  lalu diwujudkan pada aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang ke 2, Google saat ini sudah melakukan penalti bagi website/blog yang memiliki saat load yang terlalu usang. Walhasil, peringkat pada indeks pencarian mampu turun, menggunakan kata lain SEO lemah.
Salah satu bisnis yg aku lakukan merupakan menggunakan mengkompres gambar PNG menggunakan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, galat satunya: melakukan perampingan CSS. Praktis-mudahan ketika ini loadtime telah berkurang meskipun belum aporisma (mudah-mudahan ga kelamaan ya).
Kembali ke CSS. File CSS merupakan semua isi anggaran style CSS yang ada pada dalam template HTML, XML, juga yang lainnya. Seluruh anggaran tadi lalu dirangkum sebagai satu menjadi sebuah arsip yg dibaca oleh browser. Nah, pada bagian ini, terdapat banyak aturan nir perlu yg bisa kita hapus supaya tidak merogoh space lantaran semakin banyak space semakin akbar ukuran file.
Lalu bagaimana cara mengurangi berukuran arsip CSSnya?

1. Lakukan Editing CSS Secara Manual.
Ada beberapa contoh anggaran berikut adalah:
Misalnya anggaran dalam header-wrapper,
#header-wrapper
background: url(//www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}
Contoh di atas adalah penataan CSS secara baku, dimaksudkan agar browser bisa membaca anggaran dengan baik serta urut. Namun dalam ketika ini, seluruh browser telah mempunyai kecepatan serta kemampuan baca yang tinggi (anda telah nir pake IE 6 yg antik itu lagi kan?), sehingga aturan misalnya pada atas tidak menjadi hal wajib . Aturan pada atas memiliki white space (residu ruang) serta pula spasi. Kita dapat melakukan perampingan pada ruang-ruang tadi. Contoh:
#header-wrapperbackground:url(//www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;
Pada model styling berikut:
Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px;
Style margin di atas dapat kita rampingkan menggunakan CSS short-hand serta mengurangi spacenya:
Margin:15px 10px;
Karena nilai margin atas dan bawah sama dan nilai kanan serta kiri sama, kita dapat merampingkan menggunakan cara pada atas, dimana 15px mewakili berukuran atas-bawah serta 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: margin:10px. Perhatikan bahwa seluruh aturan nilai dimulai menurut atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, telah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan? ^^ Untuk melakukan cara-alternatif dan apabila tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online
Nah ini bagian yang lebih mudah. Anda bisa memakai beberapa tool layanan kompresi CSS serta dalam sekejap anda pribadi mendapat hasilnya. Silahkan kunjungi:
Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:
a. Copy seluruh aturan CSS menurut template HTML/XML.
b. Setelah masuk ke situs layanan kompresi CSS yg anda pilih, paste semua kode tadi serta klik 'compress', 'optimize', serta lains ebagainya.
c. Tunggu beberapa ketika serta hasilnya akan keluar lengkap menggunakan hasil ukuran file terakhir selesainya kompresi serta perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime laman.
d. Download backup template terlebih dahulu pada laman edit HTML.
e. Hapus bagian dimana anda mengkopi aturanCSS tersebut serta tambahkan output kompresi ke bagian tersebut.
f. Preview serta apabila tidak terdapat masalah lagi, save.
Clue
Seluruh code CSS terletak pada bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara dan ]]>.
Pilih jenis/opsi kompresi 'standard'  atau sejenisnya dalam tool kompresi CSS yang anda pakai.
Semoga bermanfaat dan Good luck.

mencuri adalah pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Percepat Loading Blog dengan Optimalisasi/Kompres CSS"