Speed Up Blogger Page Load Time

You have to admit, most free 3rd party Blogger Templates that you download are a mess. You open up the xml file and it’s a long and ugly-looking beast of code spaghetti. If you’re like me, you prefer a nice and neat template (even though you’ll be the only one seeing it) and you’ll want to tidy it up.

Most of the code you don’t want to tinker with but the .css code (the part that styles your entire blog with images and colors) is where some people like to change font colors, sizes, or even just space it out properly so it’s important that it’s not only neatly organized, but also properly aligned.

More importantly, did you know the more lines of code your template has, the longer it takes to load in a browser? So your 1,500 lines of code in your newest Blogger template could really be much shorter in size, thus speeding up page load times for your visitors. The slower your site, the more likely a visitor will be deterred and not wait for it to load up.

So here’s a neat trick to optimize your template. You’ll want to do what’s called “commpress your css” into a much smaller format. There’s a site I use called CSSDrive that offers a free web-based CSS Compressor. All you do is select a few basic options like compression mode and comments handling and then paste in your css. The css is the code between the <b:skin> and </b:skin> tags.
Make sure you backup your template code before doing this!

Some people might not like how the css looks after it’s compressed so it’s best to have a backup. You also might make a mistake and copy the wrong sections which could screw up your template code. Bottom-line, backup your template before doing this.

After you click on the “Compress-it!” button it will go through your .css code and shrinks it down. Essentially it removes unnecessary white spaces and better organizes each css element into one line. Here are the results for one of the Blogger templates I compressed.

My xml Blogger template was originally size 47458 bytes and after the css compression was done, it dropped it down to 34276 bytes. Now that’s not a huge difference (28%) and you probably won’t notice a difference when you load up your blog with the new code, but every little bit helps. Also, some template code might be messier than others so the size decrease could potentially be a lot more.

I also just ran the normal compression mode and wanted to keep my comments so if you go with the super compact mode and strip out all comments, you can compress it even further.


Percantik Tampilan RSS dengan FeedBurner

Ingin menambah aksesoris blog supaya kelihatan lebih cantik? ehm, emang membuat blog kita tampil beda kelihatannya menarik. Nah, salah satunya adalah dengan mencoba mengalihkan feed blog kita ke feedburner. Pengen tahu lebih jauh? ayo kita ulas satu-persatu..

Daftar FeedBurner
Silahkan buka saja halaman FeedBurner (www.feedburner.com) kayaknya langsung ke Google FeedBurner yach? yup sekarang feedburner telah di akuisisi oleh google. Masukkan saja Google Account Blog Anda.. setelah terbuka halaman My Feeds coba ikuti langkah berikut :
  • Masukkan alamat blog (ex: http://namablog.blogspot.com) pada Burn a feed right this instant. Type your blog or feed address here:
  • Centang pada pada I am a podcaster! dan klik Next
  • Beri tanda pada radio buton yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
  • Ubah Feed Title dengan Feed Address jika mau di ubah atau biarkan saja, lalul klik Next
  • Congrats! Your FeedBurner feed is now live. Silahkan simpan alamat feed anda terlebih dahulu, karena alamat ini yang akan kita pakai nanti.
  • lanjutkan dengan Next.. 
  • Next lagi sampai Testing FeedBurner, lalu Sign Out saja.

Ubah Tampilan Feed Blog
Sekarang saatnya kita modifikasi hasil FeedBurner tadi.. buka saja halaman dasbor blog Anda dan masuk ke Elemen Laman pada Tata Letak.
Kita tambah gadget HTML/JavaSript untuk memasukkan kode berikut ini :


Silahkan ubah URL http://feeds.feedburner.com/blogspot/nhWf pada script diatas dengan alamat FeedBurner yang sudah disimpan tadi (masih ada kan? ntar dah dihapus.. hehehe)
Setelah selesai klik Simpan dan.... coba lihat hasilnya, ehm gimana?
Oiya.. contohnya seperti Feeds dibawah ini..



Selain untuk menambah aksesoris blog, bagi teman-teman yang mempunyai Google Adsense dapat ditambahkan disini..(Adsense untuk Feed) sehingga pada tiap artikel feed secara otomatis akan muncul tuh iklan.
Silahkan tinggalkan komentar Anda hehehehe... semoga berhasil, thanks