Is My Web Page Fully Optimized?

On my page My Page Takes too long to Load or I am Exceeding Data Transfer Limits I suggest ways to optimize your page and suggest some page sizes to aim for in your optimization.

Some people have considered that my comment that 40k is a large page and 100k is a huge one to be a misprint but it is not. A 100k page takes 30 seconds to download via a 28.8k modem (which is still a popular way to connect). When I was starting out with computers in the early 1980s I was told that anything larger than a 2 second response time was unacceptable. Even with a T1 connection, a 100k page takes 3 seconds to download so even with the fastest link that you are likely to be using a 100k page takes an unacceptable time to download by early 1980s standards.

Admittedly today, people are used to longer download times than we used to expect 20 years ago but I have seen figures that show that many people will not wait for a 100k page to finish downloading before they give up and move on to the next page.

"But there is no way that I can make my page that small", I can hear you say. "Well how much do you want to fit on one page?" I reply. This photo page contains fifty photos. Do you really need to create a page with more photos on it than that? The total size of this page (which I created for the Australian Model Railway Association) is 80622 bytes. Still within the 100k maximum that I have called a huge web page. Yes, this example web page is huge but given the subject matter of the page and the fact that it is clearly labelled as a photo page on the various pages that link to it, I think that the massive size of the page can be excused in this instance. I consider this to be the upper size limit for a properly optimized web page.

The 80622 bytes that this web page takes up include not only the html code itself but also the cascading stylesheet attached to the page, an external javascript, and all 56 images that appear on the page. The 56 images themselves take up 64153 of the space. This means that the average image size is only 1146 bytes. Very well optimized indeed! In fact, all that this page includes is thumbnail images to which the much larger photo images are attached via the javascript. Because these thumbnail images need only give an indication of what the image is (so that your visitors can decide whether or not they wish to view the larger version), they can be very small indeed.

Once you include all of the larger images attached to the page then the total space taken up by all of the files is approximately 750k. Even the full size images in this instance only take up around 10 - 12k each. One reason for this is that I have attempted to allow for those 10% of visitors who still use 640x480 resolution monitors. Depending on which operating system and browser that these visitors are using they may have only a 574x260 viewing window available to view web pages. I have attempted to size the photos accordingly and properly optimized this is the amount of space you should expect photos of this size to take up.

What I haven't done is to create a larger again version of the page for those using larger screen resolutions. Had I done this, I would have had yet a third image perhaps 900 pixels wide and 44k in size. These I would have attached into the page by placing text links under each of the thumbnails and indicating the difference between the thumbnail and the text link by a description on the page. With three copies of each of the 50 photos the total space requirement would have been around 3Mb and this is for what is effectively 101 separate pages the largest of which is still under the 100k limit. Given that your visitors would be unlikely to visit both larger versions of all of your images you would probably expect that your visitors are not going to visit more than 52 of these pages for a maximum download of about 2.3Mb.

So what do you do when you have more than 50 photos? You do as I did on the page that we have been using as our example and create a second similar page linked to the first to contain the additional photos. This will allow you to display 100 photos while keeping your maximum page size under 100k and your typical page size to around 40k or less. Need more photos than that, just add more pages. If you are setting up a massive photo gallery of 1000 photos then if you have three copies of each image in appropriate sizes your web site will need 60Mb. With only the smaller two copies of each photo the same 1000 photo gallery would fit into 15Mb.

So now you should be able to answer the question "Is your web page fully optimized?" and if its not, you now have plenty of info here and on the attached pages to help you to optimize it properly.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate