Also see- Part II
6 Ways to speed up your Blog:
Whenever we redesign our sites we tend to add more graphics which means more loading times. The site loading time is very important factor, generally ignored by new designers . If your site takes more than 20s (which is quite high by itself), most of the readers will leave your site before it loads. Google Search Homepage is the ideal example and should be taken as an inspiration. Here I discuss ____ ways to optimize your loading time.
First of all lets check how much is your blog loading time. Here is the best tool according to me:
On a typical 56 K data connection:
- Google.com- 2.74 secs
- Yahoo.com- 1.86 secs
- Problogger.net- 64.32 secs
- Best Blog Basket- 32 secs (76 secs before I wrote this article)
- Reduce Number of Images: As far as possible, use minimum number of images and try to change the background colors for your site instead. Here is how you can change the background color of a widget:
2. Reduce Image dimensions: There is a limit to how many images you can remove, after that you should consider resizing images to acceptable size. This helps to reduce image size considerably. Use the freeware Irfanview.
3.Reduce color depth of images: The image on the right shows how to reduce the color depth in an image to reduce its size. If your image is 256 click on Custom and select 128 and so on. This is really helpful if you need to reduce the size of images on your page.
4. Change image quality : This is a little trade off. If your needs can be satisfied by a low quality image you can lower the image quality. This may be done by choosing File, Save As, and Options from the menu. Decreasing the Save Quality of your picture will reduce its size.
5. Change file type: I found that a JPEG format has the least size ( compared to .GIF or .BMP extension) while storing your image. This gives you considerable size reduction without lowering the quality of images.
6. Changing image HTML tags: This is a simple tweak while adding images to your header or other widgets on your sidebar. While giving the html tag you should specify the image width and height, this way the browser knows the size, and can load other files on your page while the image is being loaded. Source for tip six:
Speed Up Your Site: Use the height and width tags
These are the tweaks useful to reduce image loading times. I will discuss other concepts in the rest of this series.