BuckWorks Marketing Articles

Page Loads and Pay Loads: Improving Page Load Speed

When pages load slowly, visitors leave. Here are some ways to speed your page load times

.

by Elisabeth Archambault, BuckWorksOnlineShoppingDirectory

A while ago I had the awkward experience of turning down a promotion job because of problems with a site. One of my favorite clients wanted me to promote a new site in the pay-per-click search engines (my specialty). At first I was keen, as the contract could have put some nice coin in my pocket, but after I visited the site, in good conscience I had to say no. I saw too much potential for wasted clickthroughs.

What Was the Problem?

Slow-loading pages. Slo-o-o-o-ow loading pages. Slow, as in over 24 seconds to load the home page on a 56k modem, and over 42 seconds on a 28.8k modem. (I used the free tools at NetMechanic to check this - highly recommended.) There were 99 graphics on the home page and not a single word of plain text! I'm afraid I wasn't very diplomatic when I said that was "simply INSANE for a commercial site."

The pages were lovely once they loaded, and in a magazine they'd have been glorious. But in print, you can put anything you want on your pages without affecting the ease of getting from one page to the next. Not so on the Internet.

The Time Dimension

Slow pages can be a real irritant for surfers with things to do and places to go. It is a particular problem for those on slower connections (still the majority). The gurus who study such things consistently find that when pages load slowly, people leave sooner. Faster sites retain more visitors, who view more pages. Faster sites tend to receive more return visits, and people are more likely to commend them to friends. Smart site designers (and the clients who commission them) pay careful attention to the time dimension of their pages, along with everything else it takes to make an effective web site.

Faster Sites Sell More

The bottom line: No matter what your site is about, the faster your pages load, the better. You'll generate more banner views for your advertisers, and close more sales if you're selling your own products. Time is a critical part of of the user's experience. Fast pages are A Good Thing. Especially if you want your site to help you make money!

.Tips and Tricks To Speed Up Your Pages

There are two aspects to work on - actual speed and perceived speed. It's good to increase the actual speed of your pages as much as you can. You're also smart to do everything you can to improve the perceived speed. Aim to construct your pages so they give visitors something to start reading without needing to wait for every last page element to load. Pages that do this can seem faster even if the total load time is the same. Remember: the ultimate test of page load speed is not just the clock, it's the user's experience.

Be ruthless about what goes on your pages. Keep it simple. Does every page really need a link to every other page, or is it enough to link to some central navigation points? Does each page need a newsletter signup box complete with an address verification script, or could you create one page with signup forms and link to that? Do you really need xx lines of javascript to tell your visitors what day it is? Do you need that animated graphic when plain text could say the same thing? If you reduced the number of ads on your page would those that are left be more effective? And so on. Simple pages load faster, and they also tend to make a more focused experience for the user. Again, a good thing.

Streamline Those Graphics! Bloated graphics are often the worst offenders for slowing down page load times. Be sure all graphics files are as lean as possible. By reducing the number of colors you can sometimes cut the file size by one-third or even half with little perceptible difference in image quality. Use the graphics program that you used to create the image to reduce the number of colors, or try the free online GIFbot at NetMechanic. It lets you compare different versions of your images on the fly.

Bonus: if you're serving leaner files it helps to keep your bandwidth bill down.

Do you need a graphic at all? Be cautious about using an image to do a job that could be done by text. That was one of the things that slowed down the site I declined to promote; there were images with words in them, but no actual text. Text loads more quickly. Do you need a menu full of image buttons or would colored text links do as well? Or maybe colored cells in a table? Think carefully about ways to get the job done with text rather than images.

Include Height and Width Attributes for EVERY Image. The browser can assemble a page more quickly if it knows how much space to leave for the images. It can fill in the text and small images quickly while slower pictures continue to load. This gives the user something to start reading, which improves the perceived speed of the page. NOTE: If you use cut-and-paste code to display banners or other images from affiliate merchants, examine the code to make sure height and width attributes have been included for all images. If not, take the time to figure out what they are and to add them to the code.

Reuse and Recycle. If you use the same graphic on different pages, it can be pulled from the brower's cache to reappear quickly when it's needed again. If you use similar graphics on different pages, slice the images into segments and reuse as much as possible from page to page, so the recurring part only needs to be downloaded once, and only the part that's different must be downloaded new. Be sure to link to the same copy of any recurring image, named exactly the same way. If you use different copies of an image from different directories, the browser thinks it must load two different images.

Reuse Text Elements Too. Text elements that recur on multiple pages can sometimes be set up as external JavaScript (.js) files that can be used over and over. Handling items such as navigation menus, footers, and so on this way not only speeds up pages, it makes site maintenance easier too. If you need to make a change you can do it in one place instead of having to alter code on dozens of different pages. Here are a couple of tutorials I have found useful, from Web-Source and EarthWeb.

Be sure to provide a way for visitors with older browsers or those who have disabled JavaScript to navigate around your site. As an example, the pulldown "Jump to New Page" menus on my site BuckWorks Online Shopping Directory reuse the same external .js file, but on the Home Page all the links are written in full in addition to showing the pulldown menu. Note that because they are cached on the client side, external .js files have a speed/bandwidth advantage over using SSI (Server Side Includes). However, most search engines cannot read javascript files, so for some content you might want to stick with plain HTML even if you do forego a speed advantage here or there. If your site is navigable by a user with javascript turned off, it should be okay for search engine spiders too.

Reduce the number of servers that the browser must contact to compile your page. If your page is built so it pulls the HTML content from one place, this image from another place, that image from still somewhere else, and so on, it will be slower to load than if all the files came from the same server. Each outside connection slows the load time by about two seconds, so the more files you serve from within your own site, the better. Many affiliate merchants provide banners or buttons that can be served from their site. This has the advantage of using the merchants' bandwidth instead of your own, and it also can allow the merchant to update the banners when featured products change or new promotions are in effect (saving you maintenance time). However, for many banners and buttons, it can save time to load the images onto your own site and serve them from there. As well as saving the time for the outside connection, in many cases you can optimize the image file to load a bit faster. (Again, I recommend the GIFbot tool at NetMechanic.) If you do use files from other servers, try to limit yourself to one or two outside connections per page. (This is another reason to restrict the number of ads you allow on a page; they often come from outside servers.)

If you serve images or other files from another site, be consistent about using either the http://www form of the URL or just the http:// form. It may vary from site to site which is better to use, but try not to mix and match for the same site. If you use both forms for different files coming from the same site, the browser may think it must look up two sites, not just one. This can be true even if you're linking to files within your own site.

Consider using redirect links for "real" URLs that are long and cumbersome. For example, some affiliate merchant or product links can be over 200 characters long. When I need to use such a link, I often set up a redirect so a short link can take people to the long URL. It could be a simple HTML refresh page or else a server-side redirect (which is faster). If you have several affiliate links on a page this trick can shorten the page's code by hundreds of characters. When someone clicks a link the long URL is called into action from behind the scenes at that point. Consider that when the page loads faster there is a better chance that visitors will see the link in the first place!

To make a page redirect, make a new blank page with a short name to use in your links. Then include this instruction between the <head> </head> tags:

<META HTTP-EQUIV="refresh" CONTENT="0;URL=http://othersite.com/whatever.html">

Change the URL to whatever you wish. You can also specify the number of seconds before the redirect occurs (It's zero in this example.) This can be useful if you want to put a short message on the page, for example to say the other site is loading. It's a nice touch to choose a background color for the redirect page that co-ordinates with the destination page. I've used a redirect page for the NetMechanic links on this page, which can load a bit faster because the redirect URLs are shorter than the original. Every bit helps.

It's also possible to use JavaScript to redirect to a new page, but the code is longer and more complex, and some browsers don't handle Javascript reliably.

Bonus: a short redirect URL is more attractive to use in emails than many real URLs, as well as easier and more reliable. Many email programs break long links so it's difficult for the recipient to get to the correct page. Short redirect URLs prevent this problem. And in my books, preventing a problem is better than solving it.

Hint: give some thought to what you name the redirects you set up, or the images you create. Don't just use a label such as /redirect23.html, /image5.gif or some such. Create a name that includes one of your site's target keywords or phrases. This gives the search engines a bit more to work with when they're deciding what the page is about. Be aware that search engines will likely ignore the page that actually has the redirect code on it. They'll index the page it redirects TO, but not the redirect page itself. So there's little point loading it with keywords, just keep it as lean and mean as possible.

If you're using a redirect page, AND your site has a fixed IP address, sometimes you can save the time needed for a DNS (Domain Name System) lookup by linking to the version of the URL that uses your IP address (the numbers) instead of your domain name. In cases where the person only passes through a redirect page on their way somewhere else, this can save a second or two. When I'm promoting an affiliate merchant in the pay-per-click search engines, I sometimes use a redirect URL in the form http://64.176.204.156/whatever instead of http://buckworks.com/whatever, because it speeds up the user's experience a bit. Don't do this unless you expect your IP address to remain stable. It's a lot of work to update links!

Eliminate Redundant Code. This is a biggie. It's easy to end up with more code than the browser needs to display your page accurately, especially if you use a WYSIWYG HTML editor. For example, PageMill repeats some tags such as <FONT> <B> <CENTER> and so on, a lot more often than the browser actually requires to display the page properly. Check for and remove tags that the browser does not truly need. This can be a chore for pages that you update often, but do take the time for this for pages that you expect to remain unchanged for a while.

Here's another redundancy to watch for: extra spaces. Many HTML editors insert spaces at the beginning of lines so the source code is displayed in a format that's easier for a human to read. And of course, it's easy to end up with extra spaces between words here and there as you edit a document. The browser will ignore extra spaces, but they can add up to a lot of unneeded characters to churn. So why keep them? Strip out every extra space you can. Use a find and change operation to replace two spaces with one, and repeat until there are no more extra spaces.

Use Tables Skillfully. Tables give you good control over the appearance of a page, and used well can improve the perceived load speed of the page. I'll refer you to this WebMonkey Tutorial for its excellent discussion of how to design tables to improve page load times. They also discuss some of the ideas I've mentioned above. It's good to get a different writer's spin on things, so I commend it to you.

Finally, learn to use Cascading Style Sheets. CSS can seriously reduce code clutter. But that's a whole 'nother article ...

With care you can create attractive, effective pages that will seem acceptably fast for your visitors. For webmasters used to fast connections, some of these tips may seem obsessive. But for visitors on slow connections, enough small time savings can add up to a major difference in your site's usability. It's well worthwhile making your pages as friendly as possible for folks on slow (often rural) connections. I don't have formal studies to back this up, but common sense says that people who live farther from large stores can be good prospects for mail or internet ordering if you serve them well. Start by serving them with fast pages!

Elisabeth Archambault, owner of BuckWorks Online Shopping Directory, occasionally writes about internet marketing when she is not indulging her compulsive shopping tendencies on the web.

© 2001 Elisabeth Archambault