When running an online business of any type, analytics are essential. The more information that you can gather about your users the better you can optimize your site and direct traffic to your goals. However, be sure to consider how these analytics scripts can have a slowing affect on page load times and user experience. Mobile users are often on slower networks and can be extremely impatient. If your site does not load fast enough for them, they will navigate away.
The issue with analytics scripts
Google analytics on its own will not have a drastic effect on your load times. Analytics scripts only start slowing the page load time once many different services are being used at once. I have recently had the opportunity to work on an e-commerce website that uses six different analytics services. The resulting load time increase was drastically impacting user experience.
What can be done to stop this slowing?
For starters take a good look at your analytics services. If any are redundant or can be replaced with an existing service then have them removed. There is not only the loading of the resources but also execution time to consider.
Defer all analytics scripts on the page
When JS files are deferred they will load after all the other critical parts of the page are done loading. This allows the user to look through the page while it is still loading giving them a better experience.
All JS files that load with defer will execute before the DOMContentLoaded event so any user events that are setup inside JQuery’s $(document).ready() will only start working after all resources are loaded.
For any inline JS ( tags that contain JS code and do not have a ‘src’ attribute) create a new file and reference it. Then defer the new file and any existing JS file. To do this remove the async tag if it exists and add the defer tag.</p>
We will use the default Google Analytics code found here as an example.
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
First take the inline JS and place it in a file. Then reference this file being sure to include the defer attribute. This has to be done since inline JS can not be deferred.
New file “deferred.js”
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
For the second external script tag replace async with defer. Now your code should look like this:
<!-- Google Analytics --> <script defer src='/js/deferred.js'></script> <script defer src='https://www.google-analytics.com/analytics.js'></script> <!-- End Google Analytics -->
Any bounce events that happen before your analytics load will not be recorded. If this is an issue for you then perhaps choose one analytics service to load normally and set up the rest as deferred.
Lets work together! Check out our portfolio at ConciseComputations.com