Defer Google Analytics

Page Speed Checklist

Eliminate The Render Blocking Effect Of Analytics JavaScript

Reconfigure Google Analytics with the defer attribute to eliminate render blocking, boost page speed and improve user experience.

Jump To The Result

Particularly if you don't need Google Tag Manager or just want to load the analytics resources directly, Google Analytics can be set up to load in the background without interrupting initial rendering of the page.

Prefer video? Watch on YouTube

Two Parts, Two Steps

(These examples use the conventional asynchronous Google Analytics code snippet, but the same concepts apply to the Global Site Tag version which has the same two-part structure and can use this same technique.)

The Google Analytics tracking 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 of loading Google Analytics this way is relatively small compared to bigger page speed issues like lazy loading images, analytics resources still interrupt rendering of the page. When it comes to page speed every little bit helps, so reducing their priority is an easy 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 external file reference with defer:

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

What Is The Defer Attribute?

Along with moving the inline snippet to an external file, this simple technique to eliminate the render blocking impact of Google Analytics makes great use of the defer attribute.

Similar to async, defer is an optional attribute for the <script> tag that instructs the browser to load the specified file in the background and then execute that JavaScript later in the loading process. Placed in the <head> section, defer'd files can begin loading as early as possible but without interrupting initial rendering of the page.

What's the difference between async and defer?

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 formerly-inline snippet -->
<script defer src="https://www.google-analytics.com/analytics.js"></script>

</head>

As a bonus, the inline snippet is now also cache-able 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.

Defer More JavaScript

Google Analytics is just one of many JavaScript files that can be deferred for page speed. Learn how to eliminate the render blocking effect of other CSS and JavaScript resources:

Eliminate Render Blocking Resources