ikmalTips : faster loading blogger template

Page load time is really essential in a blog. Every ticking seconds count, before your visitors click away. Every bytes conserve on page load will save you another second. But how I can achieve this? There are many possible way to achieve this. This is what I learn until this moment. It's sorted for better viewing.

Save on Image :

- Save image with lowest quality possible (without ruining the image).

Image full of solid color doesn't need high quality format.
Always specify image height and width, so the browser doesn't need to check the image first
Try saving on different format. Sometimes small resolution image are better saved on GIF format. Or vice versa.
Save image using appropriate resolution. You don't need 1280x1024 resolution for image on sidebar.

Save on HTML size :

- All unnecessary blank space (page break) on your html can be removed. It does not change page layout appearance. But be very wise to choose unnecessary space. On widget codes they are necessary (don't check Expand Widget Templates on your layout). Try remove blank space before and in between </b:skin> tag. Even though this could save you a slice of size, it does matter. That's why they are called unnecessary. And remember, ALWAYS preview before save them.

Save on FTP (File Transfer Protocol) :

- This is the term use for importing image or script from other sites to be viewed on yours.

Save all images at one place. This will dramatically reduce request for FTP process.
As for blogger, save your image on blogger account itself instead of other image hosting provider. Create another blog for image purpose only (hide from public view) OR go straight to Picasa since all the images save on your blogger template will be stored at Picasa account. Show me Picasa.

Save on Page Load :

- This is for tabbed navigation (check out buttons above header). They are not lag between image changes on hover.

This can be achieved using Splice (or Sprice?) technique. Where both hover and normal image are basically based on the same image just the difference in positioning. Thus, count as on image load.

- This is for widget. You can hide few widgets that you thought not necessary to view at your post page. This is for making navigation faster to leave comment or viewing full post (if the posts are summarized). For instance, I hide few Ads and Entrecard widget on post page. You can use :

<b:if cond> method. Placing the codes correctly between widget will hide your widget and show on certain page (main page, post page, etc).

- Another tips is for loading content first rather than widget. This is great for making visitors actually read your content before page fully loads.

Find your outer-wrapper and sort them by moving main-wrapper to the first position. But please note that using this will make your sidebar moves to right side. Like on mine.

This is few lists that I know will create effect. Do leave a comment if you have any tips to share. OR if want to request a proper tutorial for any of tips listed.

That's all. Thank you and happy loading.