Monday 29 May 2006

How to optimize web pages for faster loading

An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection.

A visitor to your blog is always happier with a page that loads quickly. The problem is...How is that accomplished? Let me tell you what I found...optimized web pages is the answer. There are several methods of optimizing your web page.

One way is reducing page weight through the elimination of unnecessary whitespace. Page weight is by far the most important factor in page load performance. Tools, such as HTML Tidy, can automatically strip leading whitespace and extra blank lines from valid HTML source. You can remove whitespace (the spaces between your coding) from your html by hand. Doing this will take a lot of extra weight off the total size of your page and will speed up load time quite a bit.

Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times. This may not always be practical, however, you should always use the minimum number of different domains in your pages as is possible. I went over my blog and saved all my images to my desktop as PNG (see below) and then saved them to my web host. Now everything (well, almost everything) comes from one domain.

You can also trim down your pages. In Blogger that simply means reducing the amount of posts on your main page. You can do this by going to the dashboard/settings/formatting/show. I selected five posts. I will see how that feels, and perhaps change it again later.

Remove items that are not necessary to your blog. A big offender for me is embedded sound files. They take ages to load, and they usually irritate the viewer. Try not to use Java applets...JavaScript will load faster. Ask yourself it that little clock in your sidebar is worth the time it takes to load? Especially since everyone has the time in the lower right hand corner anyway. Give your blog a good look over with a new eye for speed. Maybe you can eliminate a few extras that don't add to your blog.

Here's another way to help your page load quicker. Simply add the width and height tags to your img tags. For example, if your original image (img) tags looks like:

<img SRC="blogheader.gif">>
and the width and height of blogheader.gif is 30 by 15, change the above tag to:
<img SRC="blogheader.gif" width=30 height=15>
How do these tags improve the speed? It helps the browser determine the layout of your page before the image is actually loaded. It stands to reason, if you have many images on your page, taking time to load each image before calculating the final layout of the page would take longer.

Reducing your images will decrease load time. This Online Image Optimizer will reduce the file size of your gif, jpg, or pngs. It is a free online tool, and easy to use.

I have tried to save all my images as PNGs because they don't have the copyright issue and they load fast. But, if you still want to use gifs and jpgs, here is a good rule of thumb... If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load quicker. JPGs are generally best for photos, GIFs for anything else.

Using some of these techniques will trim your blog and increase your load time. This results in happier visitors...and return visitors!!

Thanks to these sites:
Chami.com Tips, WebWeaver.nu, Netscape Devedge

post signature

No comments:

Post a Comment