Defer Google Analytics

Avoid the render blocking effect of Analytics JavaScript

Last revised:

With a few quick adjustments, Google Analytics can be reconfigured with the defer attribute for faster page loading and improved user experience.

Jump To The Result

Particularly if you don't need Google Tag Manager or just want to load Google Analytics resources directly, analytics.js and the companion inline snippet can be set up to load in the background and then execute after the page has otherwise rendered.

(Learn more about website loading speed with the complete guide.)

Play above or watch on YouTube

Two Parts, Two Steps

The conventional asynchronous Google Analytics code includes an inline JavaScript snippet and an external file reference with the async attribute. These lines are placed in the <head> section of each page, typically as part of a template:

HTML
<!-- other <head> stuff -->

<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>

</head>

Although the potential impact on loading speed of loading Google Analytics this way is relatively small compared to bigger issues like image optimization, these resources can interrupt rendering of the page. When it comes to website speed every little bit helps, so reducing their priority is an easy loading speed win.

Move The Inline Snippet

To defer analytics, the first step is to move the inline JavaScript snippet to a defer'd external JavaScript file:

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');

// other defer'd JavaScript...

Create a new file if necessary and of course minify the result and serve the file with compression as well as a long cache expiration period

Defer Analytics.js

The next step is even easier. Replace the async attribute on the analytics.js reference with defer:

HTML
<script defer src="https://www.google-analytics.com/analytics.js"></script>

All Together

And that's it! The result still has two parts, but both the external file reference and the snippet will now load in the background at a low priority and then execute later in the loading process after the page has otherwise rendered, just before the DOMContentLoaded event.

HTML
<!-- other <head> stuff -->

<script defer src="scripts.js"></script> <!-- contains analytics snippet -->
<script defer src="https://www.google-analytics.com/analytics.js"></script>

</head>

As a bonus, the inline snippet is now also cacheable and removing the inline JavaScript also cleans up the HTML a bit.

A Consideration

Although not typically a concern, this configuration will execute the analytics JavaScript slightly later in the loading process and may miss some very short duration bounce traffic on slower networks or devices.

Questions? Need help?

Brandon@FrontMend.com

Learn more about maximizing website loading speed:

Complete Guide