Friday, April 22, 2011

cara compress template xml meringankan blog

Apa hubungan CSS dengan load time ( waktu muat) halaman blog? Yang paling sederhana , 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 . Anda dapat menggunakan website / blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda . Setelah ganti template beberapa waktu yang lalu , masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik . Yang pertama efeknya adalah ketidaknyamanan pengunjung . Terlebih lagi apabila muncul ketidaksabaran dan kemudian diwujudkan dalam aksi " Tutup aja aaaaah , males gw, lo -la bangeeetzz!". Yang kedua , Google saat ini telah melakukan penalti bagi website /blog yang memiliki waktu load yang terlalu lama . Walhasil, peringkat dalam indeks pencarian bisa turun , dengan kata lain SEO lemah. Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet . Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya . Selain itu, dilakukan pula beberapa langkah lain , salah satunya: melakukan perampingan CSS. Mudah- mudahan saat ini loadtime sudah berkurang meskipun belum maksimal ( mudah-mudahan ga kelamaan ya) . Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML , XML , maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah , pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file . Lalu bagaimana cara mengurangi ukuran file CSSnya ?
1 . Lakukan Editing CSS Secara Manual. Ada beberapa contoh aturan berikut ini: Misalnya aturan pada header-wrapper , # header-wrapper { background: url ( http: //www .freeimagehosting .net / uploads/e 439563253 .jpg ) no- repeat # 000 ; height: 150 px; margin-top: padding : 0 px 0 px 0 px 0 px; text -align: center ; border : 1 px solid # 000 ; } Contoh di atas adalah penataan CSS secara standar , dimaksudkan agar browser dapat membaca aturan dengan baik dan urut . Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi ( anda sudah tidak pake IE 6 yang kuno itu lagi kan ?), sehingga aturan seperti di atas tidak menjadi hal wajib . Aturan di atas memiliki white space ( sisa ruang ) dan juga spasi . Kita dapat melakukan perampingan pada ruang -ruang tersebut . Contoh: # header-wrapper { background: url( http: // www. freeimagehosting . net/uploads/ e439563253 . jpg ) no-repeat # 000 ; height: 150 px; margin-top: padding : 0 px 0 px 0 px 0px; text - align: center; border : 1 px solid # 000 ;} Pada contoh styling berikut: { Margin-top : 15px; Margin-right: 10 px; Margin-bottom: 15px; Margin-left: 15 px; } Style margin di atas dapat kita rampingkan dengan CSS short -hand dan mengurangi spacenya: { Margin: 15px 10px;} Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas , dimana 15 px mewakili ukuran atas -bawah dan 10 px mewakili kanan - kiri . Jika semua nilai margin sama, misalnya 15 px, kita tinggal tuliskan : { margin: 10px} . Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam : atas , kanan , bawah , dan kiri . Ehm , sudah mulai pusingkah? Tidak kan ? Bukankah belajar itu menyenangkan ? ^^ Untuk melakukan cara - cara lain dan jika tertarik anda dapat mengunjungi W 3 School.
2 . Gunakan Layanan Situs -situs Penyedia Tool Kompres CSS Secara Online Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya . Silahkan kunjungi : - CSS Drive Gallery - CSS Compressor - Online CSS Optimiser / Optimizer - Minify CSS - CSSTidy Online Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool ". Langkah - langkahnya :
a . Copy semua aturan CSS dari template HTML/ XML .
b . Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik ' compress ', 'optimize ', dan lains ebagainya .
c . Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya . Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman .
d . Download backup template terlebih dahulu pada halaman edit HTML .
e . Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut .
f . Preview dan jika tidak ada masalah lagi ,
save. Clue : Seluruh code CSS terletak di bagian head . Lebih tepatnya , semua code CSS pengatur tampilan terletak di antara < b : skin> dan ]]> . Pilih jenis/opsi kompresi ' standard' atau sejenisnya pada tool kompresi CSS yang anda gunakan.

Comments :

1
Nemoshare said...
on 

thx gan info nya sangat membantu...

Post a Comment

 

Copyright © 2009 by nazwa-555

Template by Blogger Templates | Powered by Blogger