How quickly do my pages load?

It is a common question that concerns a number of people and it is important as long load page load times impact user experience, sales and potentially your AdWords quality score.

Both Google Analytics and Urchin provide a report on the connection speed of the visitors to the website which is partially useful, but neither provide a report on which pages take the longest to load. In this article we show you how to track the load time for your pages using these tools.

As your web page will contain images, style sheets and other elements it is important to capture the total load time for all elements and not just the HTML page. To do this we need to track the distance in time from the initial loading of the HTML page to the final image that is shown. Luckily web browsers have the onload event that occurs when the page has fully loaded. To capture the total time that the page takes to load we set a timestamp at the top of the first part of the document to load, wait to the document fully loads and then record the time taken.

To use these scripts you should set up a new profile for this report with a separate account code. This is important as using this technique result in doubling the number of page views for the account and this will impact important metrics such as bounce rates and page views per visitor. If you require assistance with this step please contact us.

Simple Example

(compatible with urchin.js and ga.js)

Once you have set this up you should then use an alternative pageTracker with a separate Google Analytics account code object or a new account code if you use the urchin.js version (see the code example later for how to do this).

E.g. ga.js

<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? 
	"https://ssl." : "http://www.");
	document.write("<script src='" + gaJsHost + 
	"google-analytics.com/ga.js' 
	type='text/javascript'></script>" );
</script>
<script type="text/javascript">
	var pageTracker = _gat._getTracker('UA-123123-1');
	pageTracker._trackPageview();
	var pageTracker2 = _gat._getTracker('UA-123123-2');

</script>


<script type="text/javascript">
// set the starting datestamp;
var plstart = new Date();

/* 
assign the window onload event to a function. To be more robust 
you should check for * an existing onload function and append 
this function to the list
*/
window.onload=function() {
	// set the end date stamp
	var plend = new Date();

	// calculate the elapsed time between the start and the end. 
	// This is in milliseconds
	var plload = plend.getTime() - plstart.getTime();
	
	// determine the load thresholds
	
	if(plload<2000) // less than 2 seconds is very fast
		lc = "Very Fast";
	else if (plload<5000) // 5 seconds = fast
		lc = "Fast";
	else if (plload<10000) // 10 seconds medium
		lc = "Medium";
	else if (plload<30000) // 30 seconds - sluggish
		lc = "Sluggish";
	else if (plload<45000) // 45 seconds slow 
		lc = "Slow";
	else
		lc="Very Slow"; // wow more than a minute
	// capture the URL that we are going to record
var fn = document.location.pathname;
	if( document.location.search)
		fn += document.location.search;

 	// track this as a page view in ga.js
	try
	{
		pageTracker._trackPageview("/load times/" + lc + 
		" Loading Pages" + fn); 
		// replace pageTracker with the appropriate 
		// object name (e.g. pageTracker2)

	}
	catch(err)
	{
		
	}
	// or for urchin.js
	try
	{
		var oldUA = _uacct;
		_uacct = "UA-123123-1"; // new account code
		urchinTracker("/" + lc + " Loading Pages" + fn);
		// set the account code back to the correct one
		_uacct = oldUA; 
	}
	catch(err)
	{
		
	}

}
</script>

This will result in a report in the Content -> Content Drilldown report that you can use to identify which pages are loading slowly, very slowly etc.

Using Google Analytics Event Tracking

Whilst this is a quick and easy way to track which pages take the longest to download it you can't see the time that they take to download using this method. To track the average time that each page takes to load you the best method is to use the new Google Analytics Event Tracking functions. The full documentation for these is available from the Google Code website.
If you are using the ga.js version of Google Analytics then you can easily change the code shown above to use event tracking.

<script type="text/javascript">
var plstart = new Date();
window.onload=function() {
var plend = new Date();
var plload = plend.getTime() - plstart.getTime();

// determine the thresholds

if(plload<2000)
lc = "Very Fast";
else if (plload<5000)
lc = "Fast";
else if (plload<10000)
lc = "Medium";
else if (plload<30000)
lc = "Sluggish";
else if (plload<45000)
lc = "Slow";
else
lc="Very Slow";
var fn = document.location.pathname;
if( document.location.search)
fn += document.location.search;

try
{
pageTracker._trackEvent("Page Load",lc +
" Loading Pages", fn, Math.round(plload/1000));
}
catch(err)
{

}
}
</script>
 

The line above:

pageTracker._trackEvent("Page Load",lc + "  Loading Pages", 
    fn, Math.round(plload/1000));

Has the following arguments:

Event Category: "Page Load"
Action: Load category (slow, very slow, etc)
Label: page URL
Value: the number of seconds for the page to load. The value only supports integers so we can only use whole seconds.

There are two ways in which we can track this. The first and recommended option is to use the event tracking functionality that is a part of the current version of the Google Analytics tracking code. You may not yet have this enabled on your account as it is still being rolled out, however if you do this is a great new feature. If you don't and are an existing Panalysis customer we may be able to help so please contact us. You can also do this in Urchin and the older version of Google Analytics.

Once this is implemented you can see the average load time for all pages under the Events report for the Page Load category:

You can also see the average time taken for each of the load time categories

Click on the "Label" link to view the average time taken per page:

Or drill down into each category to find the worst performers

Identifying which pages take the longest to load is a critical step in improving the user experience.