Tracking web page load times as an attribute to events

Ideally to truly track page load time, you’ll need to start tracking from the server side, however, client side is also a good place to start and its super simple to do so with FoxMetrics.

For SEO reasons, you’ll want your pages to be fast as possible, the slower it is the higher your abandonment rate which is never a good thing.

To start tracking page load time, we’ll need the start time and end time which we can then attach to our already existing page view event.

Place the following script as high up in the page as possible, preferably immediately after the title tag. This script stores the start time.

<!-- FoxMetrics Page Speed -->
<script type="text/javascript">
var fxPageSpeedStartTime = (new Date()).getTime();
</script>
<!-- FoxMetrics end of Page Speed -->

Now we need to record the end time, this time we will depend on the window onload event to let us know once the page has loaded completely. Place this snippet at the bottom of the page immediately before the closing body tag </body>.

<!-- FoxMetrics Page Speed -->
<script type="text/javascript">
window.onload = function () {
var fxPageSpeedEndTime = (new Date()).getTime();
_fxm.events.push(['recordEvent', 'Page View', 0.00,
{ 'Href': document.location.href, 'LoadTime': (
fxPageSpeedEndTime - fxPageSpeedStartTime)}]);
}
</script>
<!-- FoxMetrics end of Page Speed -->

This script to calculate the difference and attach the result as an attribute called ‘”LoadTime” to your page viewevent. Keep in mind that his is just for demonstration purposes and it doesn’t have to be a page view event, the attribute can be attached to any event.

Once its all set and ready, you’ll be able to see load times in milliseconds per page from within your dashboard.

If you’re thinking of personalizing the experience of your visitors, try FoxMetrics for free and Subscribe to our Newsletter get recent updates and news.