Load google analytics after page load

Question

I develop an web application with preact. The total size of the webapp is about 30KB gzipped (Google Analytics is about 14KB). I want to add google analytics but I dont want that google analytics slows down the initial page load. The recommended method to include analytics.js () is

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

This works fine, but the analytics.js gets downloaded before my other stuff gets downloaded. Im pretty sure that this affects the page load as you can see in this picture)

What is the recommend way to download analytics after the page finished loading. (In my case after 'menu' gets downloaded)

score 10 · Answer 1 · answered Nov 11 '19 at 16:00

I know this is old, but you could add the defer attribute instead of the async attribute to your tag. Async will download the file asynchronously, but it still blocks the main thread while it's running the javascript. Defer will also download asynchronously, but will wait to run the javascript until the HTML parses. This is one of many articles that explains the difference between async and defer

If you really don't want the GA affecting load speeds, you could add an event listener that waits for the window 'load' event before injecting the GA script tags. That is probably overkill for a 30KB web app, but GA will have almost no affect on your page loads.

score 1 · Accepted Answer · answered Apr 17 '18 at 08:09

1

GA shouldn't be slowing down your website right now
Your script is async, which means it's not blocking the browser from carrying on with other tasks. Accordingly, from the trace screenshot you gave, we can indeed see that while analytics.js is being requested, the browser is making other concurrent requests (bundle.js, ,menu), so you're good.

Loading GA after page load
If you still want to defer loading of GA after page load for best practices, just call GA later:

Using Javascript: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it
Using a Tag Manager: for instance with Google Tag Manager, use the Window Loaded trigger which fires when the browser is done loading the page: https://productforums.google.com/forum/#!topic/tag-manager/xOMFkfH0U4k;context-place=forum/tag-manager

answered Apr 17 '18 at 08:09

Max

12,794
30
90
142

I thought that the request to analytics.js slows down the other request. Wouldnt the browser download the other js files faster if the analytics.js wouldnt be downloaded ? – Simon Ludwig Apr 17 '18 at 08:35
It will add a very small delay, whatever it takes for the browser to fire the async request which might be < 1ms. So it's up to you whether you want to defer GA until after page load. If overall performance is a concern, try to get the size of `bundle.js` down from `320KB` as it might be a dependency on render-blocking resources. Bundling everything into 1 file isn't necessarily the best option, what matters is to optimize for the critical rendering path: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ – Max Apr 17 '18 at 11:31
Thanks for your detailed answers. This is just the dev mode. Minified+Gziped the size is about 20Kb.. – Simon Ludwig Apr 17 '18 at 17:45
You're welcome. Yes `20Kb` sounds more like production. At such low size, you might even want to inline it, so you save on 1 round-trip, especially as it seems to trigger loading of other assets (`route-categories....js`), assuming HTML/JS cache invalidation is handled properly. – Max Apr 18 '18 at 12:26

Load google analytics after page load

2 Answers2