Do You Hate Slow-Loading Web Sites? | Cardinal Path Blog
Blog

Do You Hate Slow-Loading Web Sites?

Did you read our previous article about using Google Analytics and some Javascript to track page load times?  Do you find yourself wishing that someone would shed some light on how to do the same with the new asynchronous version of the Google Analytics tracking code? Well, your wish has come true, because that’s exactly what we’re going to show you how to do in this article!

It’s a well-known fact in our field that excessive page load times are a huge threat to your user’s happiness. It’s also a well-known fact that unhappy users tend to find what they want at someone else’s buttery-smooth website if yours happens to be uncooperative and cranky. Why waste your money and your visitors’ time? Why not get to the bottom of this? Here’s one way to get to it.

  1. Place the following code just below the <head> tag near the beginning of the HTML code for each of your web pages. Replace ‘UA-XXXXXXXX-X‘ with your own Google Analytics account number and replace ‘yourwebsite.com with your own site’s URL (web address).If you already have the old version of the Google Analytics tracking code on your page, remove it before you put the new code in: the two versions are not meant to work together. Note that if you’re running a Content Management System (CMS) such as WordPress, you’re going to have a much easier time adding this code to all of your pages at once – all you’ll need to do is insert the code into your header.php template.If you already have the new asynchronous version of the Google Analytics tracking code, ignore this step.

    NOTE: You’re also going to want to add another Google Analytics tracking code block to your header with your secondary account number in the line where ‘_setAccount’ appears. Otherwise, you won’t be seeing any beacons firing and getting sent off for processing by Google.

    <script type="text/javascript">
    var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
      _gaq.push(['_setDomainName', '.website.com']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_setAllowHash', false]);
      _gaq.push(['_trackPageview']);
    
      (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';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  2. Create a new profile for your website in Google Analytics. This will prevent the Event Tracking function being used here from interfering with or otherwise skewing the data in your original account.Click '+ Add new profile'
    Then click 'Add a Profile for a new domain' and fill the blank with your website's URL (address).
    On the next page, ignore everything else and just click ‘Save and Finish‘.
  3. Ensure that Event Tracking is turned on in Google Analytics.
  4. Insert the following code immediately after the Google Analytics tracking code. Make sure you change “UA-XXXXXXXX-Y” to the account number for the new profile created in step 2.

    <script type="text/javascript">
        var startld = new Date();
        var threshold = new Array(1000,2500,5000,10000,25000);
        window.onload = function() {
            var endload = new Date();
            var finaltime = endload.getMilliseconds() - startld.getMilliseconds();
            var n;
            var loadtimestring;
            for (n = 0; n < threshold.length; n++) {
                if (finaltime < threshold[n]) {
                    if (n === 0) {loadtimestring = '0-' + (threshold[n]) + ' ms';
                    break;
                    }
                    else {loadtimestring = threshold[n-1] + '-' + (threshold[n] - 1) + ' ms';
                    break;
                    }
                }
            }
            finaltime = ' ' + finaltime
            var loadedpageurl = document.location.pathname;
            var sendstring = loadedpageurl + ' -> ' + loadtimestring;
            _gaq.push(['_setAccount', 'UA-16356297-6']);
            _gaq.push(['_trackEvent', 'Loadtime ', sendstring, finaltime]);
        };
    </script>

  5. Check Google Analytics in a day or two (remember, new accounts take about 24 hours to fully activate), and go to ‘Content’ and then to ‘Event Tracking’.


  6. Your page load times should show up under ‘Top Events’ under the name ‘Loadtime’. Click ‘View All’ to see all of your page load times!The number found under “Event Value” is the sum total of the number of milliseconds all instances of a particuar URL took to load.  The really important number here is the average value for each particular page, which you’ll find under “Avg. Value”.


Now you’re playing with power!

PublicInsite Web Analytics Inc.

Contact us to learn more about what PublicInsite can do for you.

Copyright © 2016, All Rights Reserved. Privacy and Copyright Policies.