The importance of small web pages
With broadband connections and fast computer gaining more and more ground, it is often forgotten that small page size is still important. You have to be able to walk a fine line between what you’re willing to sacrifice to allow your pages to load faster against making sure that the image you project is the image you want your visitors to see.
Everybody’s got DSL, why bother?
Across my sites I see between 20 and 30 percent of visitors coming through dial-up, about 60 percent through DSL or cable, and the rest coming through corporate type accounts. I’m not willing to give up on those 30% still dialing in, so I strive to make my sites load as fast as possible for them.
But I’m showing photographs!
Yes, photographs tend to be large and take a while to download. But there are things that can be done to make them load faster. JPG compression levels can be tweaked to give the best possible image without any noticeable loss of quality. You can create thumbnails that are exactly the size you want – using height and width attributes in your image tags to shrink images down to the size you want them is one of the worst things you can do for page loading times.
How much time do I have?
Most research that I’ve found lists between 3 and 5 seconds as all the time you have to make an impression. Any longer than that and you risk losing your visitors to the back button. A recent study shows that impressions are made within the first 50 milliseconds.
Now, this doesn’t mean that your page must be loaded fully within that time. The browser authors were smart and made it where the text is loaded first and then graphics. That way the page can be at least partially built and usable while the images are being downloaded. But there are a few catches.
First, you should not use tables with too many cells. Tables must be completely downloaded and parsed before they can be shown whereas normal text can be displayed as it’s downloaded. Look at this site. It uses one two-celled table to keep the content and navigation separate. Purists would tell you that’s too many, but I feel that this design works better with these two cells. Notice also that I’m not using table cells to space out parts of my site. Many WYSIWYG editors will use table cells of fixed widths to place content – a very poor way to handle it.
You should also include height and width attributes in all of your image tags. Yes, the browser will get the height and width correct without you putting them in but it has to download the image first. By having these attributes the browser reserves the space for the image even before it’s downloaded. Without the attributes the space is not reserved and it can lead to your text ‘jumping’ out of the way.
So, what’s a good size?
In an article by Brett Tabke, he mentions that you should strive for under 15k; then follows with 12k is better, 10k is even better, and 8k is better still. Basically, you want the page size to be as small as possible. For an example, the home page of this site is 6k. Of course, I intentionally have this site set up to be as sparse as possible. The HTML on my photography site is 10k, but with images it is up to 100k. While 100k is larger than I want it to be, most of that is from an image that is on page. Being a photography site, I find that I must have images and am willing to make the concession in that situation.
Search Engines
One of the biggest benefits, aside from visitors seeing your page faster, is that search engines often give more weight to fast loading pages. It’s not necessarily that the page loading faster is what causes the benefit, but well written pages often have other factors that make them more search engine friendly – a topic for a later article.
Question, Comments...
Do you have more questions. Please either leave a comment below or join us in our new forum.