|
Load Time Tip:
Measuring Lost Visitors
by Tom Dahm
Operations Manager
Keynote NetMechanic
Do you wonder how often visitors abandon your Web page before it has finished loading? A simple JavaScript can tell you. The answer can help you avoid driving visitors away from your site.
Slow-loading pages are the bane of the Web. In fact, surveys routinely cite slow pages as the #1 complaint about the Internet. A study by Zona Research found that 1/3 of visitors will leave a Web site that doesn't load within 8 seconds. With figures like that, load time should be a major design consideration for your pages.
In his book,
Designing Web Usability, Jakob Nielsen states that a fast load time should be your most important design consideration. These are strong words from the Internet's leading usability guru.
The Load Time Report in HTML Toolbox will estimate your page's load time at different modem speeds. But what if you want to measure how often this actually causes people to abandon your page before it has finished loading?
You can use a small bit of JavaScript to record how often your page was abandoned. The script itself is simple, but to analyze the data you'll need to have access to your server log files. If your hosting company doesn't provide you with server log files, or you don't know how to read them, don't panic. We'll show you another way to analyze your data.
The Script
JavaScript includes some useful event triggers that cause scripts to execute at different times. One of these is the onLoad event. You can use this to execute a script once your page has finished loading by adding this attribute to your page's BODY tag:
<BODY onLoad="PageFinished( );" >
Also place the code for the PageFinished( ) function inside the HEAD section of your page. Here's the code:
<SCRIPT LANGUAGE="JavaScript">
function PageFinished( ) {
if (document.images) {
img1 = new Image();
img1.src=
"http://www.yoursite.com/finished_loading.gif";
}
}
</SCRIPT>
This simple function causes the browser to load a GIF called "finished_loading.gif" once the page has completed. In other words, once the browser has finished loading the page, we ask it to do just a little more work by fetching one more image.
You want this image to be as small as possible - preferably 1k bytes or less. After all, we don't want this image to slow down the visitor's browsing even more!
The contents of the image are also not important, since the image won't display on your page.
In fact, we use this image only to trigger one additional hit in your server log file. The presence of that hit tells us the page was fully loaded.
The Log File Hit
When the browser requests a page from your Web server, the server will write a line to your log file that looks something like the one below:
209.240.221.71 - - [03/Dec/2002:15:20:06 -0800] "GET /page.htm HTTP/1.0" 200 8788 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"
This is something called the "common log file format." If you're unfamiliar with this, try reading our article on analyzing your server log files.
For our purposes, you don't need to understand everything in the log file. The important part is the portion that says "GET /page.htm HTTP/1.0." This shows that we had a hit on a Web page called "page.htm." Of course, this will change based on the Web page being loaded. For example, for this newsletter story, the hit would be for "/news/vol5/load_time_no23.htm."
After the hit for the Web page itself, the server will also record a hit for every image contained in the Web page, so you should see a similar line for each graphic on your page. So, if our JavaScript executes, you should see the line below in your log file.
209.240.221.71 - - [03/Dec/2002:15:20:06 -0800] "GET /finished_loading.gif HTTP/1.0" 200 88 "/page.htm" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"
And that's the key: every time you see a hit for your Web page, you should also see a hit for finished_loading.gif. If you don't, then your page did not finish loading.
If your site is hosted on a UNIX server, you can use a command like "grep" to count the number of hits on your page and the finished_loading.gif image. The difference between these two counts is the number of times people abandoned your page.
If you use log file analysis software, you should also be able to configure the software to record the number of hits for finished_loading.gif as well as the hits on your Web page. If not, or if you don't have access to your server logs, read on.
What, No Log File?
If you can't analyze your log file, you may be able to use a graphical hit counter to track hits on your Web page and on finished_loading.gif. This technique isn't exactly elegant, but it will work if you use the right type of hit counter.
First, find a simple, graphical hit counter. You want to use a counter that only requires you to place an IMG tag on your page. Counters that use JavaScript won't work for this technique. hostedscripts.com offers a suitable counter.
Normally, to place this hit counter on your page, you would add this image tag:
<IMG SRC="http://members.hostedscripts.com/counter.cgi?user=finished">
Notice that the SRC attribute of this image tag doesn't have a .gif or a .jpeg file extension - it has a .cgi extension. When a browser requests this image, it executes a CGI program on the hostedscripts.com server. The CGI program then records a hit for the user account named "finished" and serves a graphic reflecting the new hit count. That's how hit counters work.
Since the CGI program is serving a graphic, we can change our JavaScript to reference it instead of our finished_loading.gif image, like this:
<SCRIPT LANGUAGE="JavaScript">
function PageFinished( ) {
if (document.images) {
img1 = new Image();
img1.src =
"http://members.hostedscripts.com/
counter.cgi?user=finished";
}
}
</SCRIPT>
Now the hit counter will record a hit for the "finished" account every time our page finishes loading.
The downside of this approach is that we can't view the hit counter, since our image doesn't display anywhere on the page. You'll have to create a separate page containing an IMG tag referencing the hit counter so you can see the number of time the page loaded. Of course, each time you view this page, you'll skew your statistics slightly. As I said, this approach isn't exactly elegant.
To record the number of hits on your Web page itself, you can add a separate hit counter to the page using an IMG tag near the top of the BODY section. This will require you to create a second account with hostedscripts.com, since their counter doesn't distinguish between pages.
Solving the Root Problem
This technique allows you to measure how often people "bail out" of your Web page because of slow load times, but it doesn't help you fix slow pages. To do that, you'll need to use HTML Toolbox. Its Load Time report will help you identify which parts of your page are causing slow load times, and identifies HTML issues that slow page rendering times. It also includes GIFBot, our image optimizer that can dramatically reduce your image load times. Give it a try!
|
