Track Page Load Times in Magento Using Google Analytics

In 2010, Google announced that they are using “Site Speed” as one of hundreds of factors in their organic search algorithm. This means that you’re going to want your pages loading as fast as possible for visitors so you can potentially get that extra boost in rankings. While site speed isn’t going to make a huge difference in your rankings, it may give you that little bump you need to overtake a competitor in the search results.

Now it’s more important than ever to track page loading times for your visitors and Google Analytics has come to the rescue. In a recent update, Google has added the ability to track your visitor’s page load time. All you need to do is add one line of code to your existing Google Analytics tracking script and you’ll get a sample of page load data from your website’s visitors.

For those of you using Magento Commerce, you’re well aware that page load times can be an issue due to the amount of server resources Magento hogs. Unfortunately the logging in Magento isn’t detailed enough to capture page loading times in an easy to read format. We can now solve that problem by editing the magento block that calls the Google Analytics script. Here’s how you do it:

First, you need to create this folder structure in your Magento installation: /app/code/local/Mage/GoogleAnalytics/Block/

Then you need to copy the file /app/code/core/Mage/GoogleAnalytics/Block/Ga.php to the folder you just created (/app/code/local/Mage/GoogleAnalytics/Block/). This ensures that you don’t edit the core files of Magento and that any changes you make to this file won’t be overwritten in the next Magento update.

Once you do that, open up the file you just created (/app/code/local/Mage/GoogleAnalytics/Block/Ga.php) and go to line #164 (for Magento version 1.5.1 – If you have a different version then the line will be different but the concept doesn’t change).

Original Code:

[sourcecode language="php" firstline="153"]
<!– BEGIN GOOGLE ANALYTICS CODE –>
<script type="text/javascript">
//<![CDATA[
(function() {
var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
(document.getElementsByTagName(\'head\')[0] || document.getElementsByTagName(\’body\’)[0]).appendChild(ga);
})();

var _gaq = _gaq || [];
‘ . $this->_getPageTrackingCode($accountId) . ‘
‘ . $this->_getOrdersTrackingCode() . ‘
//]]>
</script>
<!– END GOOGLE ANALYTICS CODE –>’;
[/sourcecode]

New Code:

[sourcecode language="php" firstline="153" highlight="165"]
<!– BEGIN GOOGLE ANALYTICS CODE –>
<script type="text/javascript">
//<![CDATA[
(function() {
var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
(document.getElementsByTagName(\'head\')[0] || document.getElementsByTagName(\’body\’)[0]).appendChild(ga);
})();

var _gaq = _gaq || [];
‘ . $this->_getPageTrackingCode($accountId) . ‘
‘ . $this->_getOrdersTrackingCode() . ‘
_gaq.push(["_trackPageLoadTime"]);
//]]>
</script>
<!– END GOOGLE ANALYTICS CODE –>’;
[/sourcecode]

All we did was add the following code right above //]]>:

[php]_gaq.push(["_trackPageLoadTime"]);[/php]

That’s it! After a few days you should see a page load data in the new version of Google Analytics. It should look something like this:

Google Analytics Site Speed