Further optimizing Google Analytics snippet #1660

BLooperZ · 2015-01-14T17:23:41Z

EDIT: it started to be a real mess in this post so i cleared it up

this is a shorter (and still safe) version of the google analytics snippet - 322 charcters against 346
it does exactly the same - except adding the script after the first script in the document rather than before it. only one function changed - insertBefore to appendChild to eliminate the need for one of the parameters, all the rest is done by syntax manipulation ONLY
this is a bit more readable version (same code just added whitespace:

(function (b, o, i, l) {
    GoogleAnalyticsObject = l;
    (b[l] = b[l] || function () {
        (b[l].q = b[l].q || []).push(arguments)}
    ).l = +new Date;
    o.getElementsByTagName(i)[0].parentNode.appendChild(o.createElement(i))
    .src='//www.google-analytics.com/analytics.js'}
(window, document, 'script', 'ga'));ga('create', 'UA-XXXXX-X', 'auto');ga('send', 'pageview');

let go line by line:
new (function (b, o, i, l) { old (function(b,o,i,l,e,r)
not much to say we need less parameters
new GoogleAnalyticsObject = l; old b.GoogleAnalyticsObject=l;
the window object is assumed if no object specified (except for conditional statements)
new (b[l] = b[l] || function () { old b[l] || (b[l] = function () {
shorter syntax and we can use it 2 lines later
new (b[l].q = b[l].q || []).push(arguments)} old (b[l].q = b[l].q || []).push(arguments)}
no change here
new ).l = +new Date; old );b[l].l = +new Date;
we use the functio0n it self as the object instead of referencing it
new

o.getElementsByTagName(i)[0].parentNode.appendChild(o.createElement(i))
.src='//www.google-analytics.com/analytics.js'}

old

e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}

by changing to appendChild we do not need reference anymore and we declare anything inside the functions - using the original value and saving the need for a parameter
new (window, document, 'script', 'ga'));ga('create', 'UA-XXXXX-X', 'auto');ga('send', 'pageview'); old (window, document, 'script', 'ga'));ga('create','UA-XXXXX-X','auto');ga('send','pageview');
also the same

I've checked this script with google analytics debugger, also with multiple trackers
it works (no reason why not)
@mathiasbynens - feel free to update your article about it if you like

Slightly improved analytics snippet

fix

all in one line

It can get indented nicely

reverted to the original params

for easier comparison...

fix

dist/index.html

-            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-            e.src='//www.google-analytics.com/analytics.js';
-            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+            o.getElementsByTagName(i)[0].parentNode.appendChild(o.createElement(i)).src='//www.google-analytics.com/analytics.js'}


even more shorter

dist/index.html

-            e.src='//www.google-analytics.com/analytics.js';
-            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+            (function(b,o,i){b.GoogleAnalyticsObject='g';(b.g||(b.g=function(){(b.g.q=b.g.q||[]).push(arguments)})).l=+new Date;


getting back the option to set the variable name

BLooperZ · 2015-01-16T12:06:40Z

here is versions of this optimized script to choose from:
(someone please check the size when gzipping this, i don't know how)

perfect solution - safe for all - same as in the pull request file - 322 characters

(function(b,o,i,l){GoogleAnalyticsObject=l;(b[l]=b[l]||function(){(b[l].q=b[l].q||[]).push(arguments)}).l=+new Date;
o.getElementsByTagName(i)[0].parentNode.appendChild(o.createElement(i)).src='//www.google-analytics.com/analytics.js'}
(window,document,'script','ga'));ga('create','UA-XXXXX-X','auto');ga('send','pageview');

if you're not going to change the variable name - 308 characters

(function(o,i){GoogleAnalyticsObject='ga';(ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}).l=+new Date;
o.getElementsByTagName(i)[0].parentNode.appendChild(o.createElement(i)).src='//www.google-analytics.com/analytics.js'}
(document,'script'));ga('create','UA-XXXXX-X','auto');ga('send','pageview');

if your page MUST got head - 285 characters

(function(b,o,l){GoogleAnalyticsObject=l;(b[l]=b[l]||function(){(b[l].q=b[l].q||[]).push(arguments)}).l=+new Date;
o.head.appendChild(o.createElement('script')).src='//www.google-analytics.com/analytics.js'}
(window,document,'ga'));ga('create','UA-XXXXX-X','auto');ga('send','pageview');

if your page must got head and you don't care about costum variable name - 271 characters

(function(o){GoogleAnalyticsObject='ga';(ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}).l=+new Date;
o.head.appendChild(o.createElement('script')).src='//www.google-analytics.com/analytics.js'}
(document));ga('create','UA-XXXXX-X','auto');ga('send','pageview');

no parameters at all

fix

not polluting the global namespace

paulirish · 2015-02-01T19:55:59Z

I looked at this new version and compared it to the old. The key thing here is the gzip'd size as this will "always" be served with gzip and it commonly erases many of these hand-tuning improvements.

original GA snippet: 312 bytes, gzip
h5bp GA snippet: 301 bytes, gzip (Δ of 11 to orig)
blooperz GA snippet: 283 bytes, gzip (Δ of 18 to h5bp)

(I'm gzipping the entire index.html, but probably should be. gzip is cool)

Anyways, we end up with a gain of 18 bytes. Due to how TCP works, the boundaries that actually end up affecting download time are at something like 14KB, 44KB, 88KB.

[via]

Why? TCP-slow start, basically.

Check the next few slides from here: https://docs.google.com/presentation/d/1qoginKKkdrRpIPGjJakt1y17iXsIBSaInaHbR4JyCIk/present?slide=id.gc03305a_0207

tl;dr: Small differences in byte size will not have a significant impact when the total filesize of the payload is within these below buckets.

0KB to 13KB
16K to 41KB
44KB to 99KB

The boundaries, therefore, where this sort of byte golfing does have impact are around: 14.2K, 42.7K, 99.8K.

(These calculations ignore the overhead of HTTP headers. Assuming initial_cwnd of 10 and MSS of 1460.)

(off-topic for this issue in particular, but the global disclaimer in this topic is that reducing requests is a better priority. And understanding the critical path is a more holistic way than targeting either bytes or requests.)

dist/index.html

-            e.src='//www.google-analytics.com/analytics.js';
-            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+            (function(b,o,i,l){GoogleAnalyticsObject=l;(b[l]=b[l]||function(){(b[l].q=b[l].q||[]).push(arguments)}).l=+new Date;


wrapped lines

ghost · 2015-04-04T08:54:19Z

Personally loving @mamathiasbynens suggestion

bnjmnt4n · 2015-04-04T09:29:06Z

👍 to @mathiasbynens's idea!

ramasilveyra · 2015-04-05T07:25:53Z

I really like @mathiasbynens ga snippet.

donovanglover · 2015-04-05T10:57:52Z

Supporting @mathiasbynens because of its simplicity and use of async. (:

xeniun · 2015-04-05T11:33:56Z

So sorry because I'm not skilled with JS.
Google provide this code below as an alternative asynchronous snippet.

<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Why can't we simply add defer to this snippet?

mathiasbynens · 2015-04-05T16:03:10Z

@xeniun Are you saying Google provides that snippet? Where? I can’t find it here.

xeniun · 2015-04-05T17:23:15Z

Hi @mathiasbynens !
I'm relearning about new Google Universal Analytics because I need to import all my previous parameters and just today I read about this snippet here: https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced in "Alternative Asynchronous Snippet" section.
I hope I have been of help.
Google is evolving and expanding rapidly their own style and help resources.

mathiasbynens · 2015-04-05T17:26:38Z

@xeniun Thanks for the link! I wonder why they bothered to add the IE9 comment instead of just adding defer to the snippet.

That snippet indicates that the GoogleAnalyticsObject = 'ga'; part isn’t necessary, so we can remove it from our snippet:

<script>
  ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
  ga('create','UA-XXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>

xeniun · 2015-04-05T17:32:13Z

@mathiasbynens Just out of curiosity, is the same if we reverse the sequences of the two scripts?

mathiasbynens · 2015-04-05T17:46:18Z

@xeniun Yep, that doesn’t really matter.

paulirish · 2015-04-06T08:53:43Z

oh yeah. I'm on board with using async defer.

I think we should be explicit with the ga global and put a window. in front of it. Otherwise LGTM!

mathiasbynens · 2015-04-06T08:56:18Z

@paulirish Like this?

<script>
  window.ga=function(){window.ga.q.push(arguments)};window.ga.q=[];window.ga.l=+new Date;
  window.ga('create','UA-XXXX-Y','auto');window.ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>

Seems a bit much IMHO. I generally prefer making globals explicit in browser code by using window.foo too, but doing it consistently in this case adds quite a bit of unneeded overhead, and doing it inconsistently (e.g. only when the var is created) doesn’t make sense to me.

FagnerMartinsBrack · 2015-04-06T17:43:31Z

Considering Paul's comment, is there any reason not to provide an unminified source of this snippet in the boilerplate?

alrra · 2015-04-19T18:12:59Z

@mathiasbynens Can you open a pull request? Thanks!

With this snippet, modern browsers use `async`, older browsers (i.e. IE8 & IE9) use `defer`. IE8 and IE9 lack `async` support but they have a broken implementation of `defer`. However, the brokenness doesn’t apply in this scenario since no scripts depend on GA in the way jQuery UI depends on jQuery. `async` is also not supported by the Android 2.3 browser, but that browser does have a preload scanner to make up for it. Once we drop support for IE8 and IE9, the `defer` attribute can be omitted. The only downside is that the snippet is not a pure JavaScript solution anymore, meaning it cannot be moved or concatenated into a `.js` file. On the other hand, no one seemed to be doing that anyway; everyone just inlines the snippet into the HTML. Ref. #1660 (comment)

mathiasbynens · 2015-04-20T17:03:34Z

@alrra Done in #1696. I haven’t added window. yet like @paulirish since I’m not sure where it should be added. Adding it everywhere seems overkill, and anything else seems inconsistent. #1660 (comment)

alrra · 2015-04-20T17:08:03Z

Thanks @mathiasbynens! 💜

Closing in favor of #1696.

With this snippet, modern browsers use `async`, older browsers (i.e. IE8 & IE9) use `defer`. IE8 and IE9 lack `async` support but they have a broken implementation of `defer`. However, the brokenness doesn’t apply in this scenario since no scripts depend on GA in the way jQuery UI depends on jQuery. `async` is also not supported by the Android 2.3 browser, but that browser does have a preload scanner to make up for it. Once we drop support for IE8 and IE9, the `defer` attribute can be omitted. The only downside is that the snippet is not a pure JavaScript solution anymore, meaning it cannot be moved or concatenated into a `.js` file. On the other hand, no one seemed to be doing that anyway; everyone just inlines the snippet into the HTML. Ref. #1660 (comment)

With this snippet, modern browsers use `async`, older browsers (i.e. IE8 & IE9) use `defer`. IE8 and IE9 lack `async` support but they have a broken implementation of `defer`. However, the brokenness doesn’t apply in this scenario since no scripts depend on GA in the way jQuery UI depends on jQuery. `async` is also not supported by the Android 2.3 browser, but that browser does have a preload scanner to make up for it. Once we drop support for IE8 and IE9, the `defer` attribute can be omitted. The only downside is that the snippet is not a pure JavaScript solution anymore, meaning it cannot be moved or concatenated into a `.js` file. On the other hand, no one seemed to be doing that anyway; everyone just inlines the snippet into the HTML. Ref. #1660 (comment) Closes #1696.

h5bp/html5-boilerplate#1660 (comment)

With this snippet, modern browsers use `async`, older browsers (i.e. IE8 & IE9) use `defer`. IE8 and IE9 lack `async` support but they have a broken implementation of `defer`. However, the brokenness doesn’t apply in this scenario since no scripts depend on GA in the way jQuery UI depends on jQuery. `async` is also not supported by the Android 2.3 browser, but that browser does have a preload scanner to make up for it. Once we drop support for IE8 and IE9, the `defer` attribute can be omitted. The only downside is that the snippet is not a pure JavaScript solution anymore, meaning it cannot be moved or concatenated into a `.js` file. On the other hand, no one seemed to be doing that anyway; everyone just inlines the snippet into the HTML. Ref. h5bp/html5-boilerplate#1660 (comment) Closes #1696.

With this snippet, modern browsers use `async`, older browsers (i.e. IE8 & IE9) use `defer`. IE8 and IE9 lack `async` support but they have a broken implementation of `defer`. However, the brokenness doesn’t apply in this scenario since no scripts depend on GA in the way jQuery UI depends on jQuery. `async` is also not supported by the Android 2.3 browser, but that browser does have a preload scanner to make up for it. Once we drop support for IE8 and IE9, the `defer` attribute can be omitted. The only downside is that the snippet is not a pure JavaScript solution anymore, meaning it cannot be moved or concatenated into a `.js` file. On the other hand, no one seemed to be doing that anyway; everyone just inlines the snippet into the HTML. Ref. h5bp#1660 (comment) Closes h5bp#1696.

BLooperZ added 11 commits January 14, 2015 19:17

Update index.html

b7fc278

Slightly improved analytics snippet

Update index.html

87f22f3

fix

Update index.html

8a3dd5c

Update index.html

be688c3

Update index.html

5db3b3e

all in one line

Update index.html

f1e2010

It can get indented nicely

Update index.html

9f37548

Update index.html

c44af41

Update index.html

20020b0

reverted to the original params

Update index.html

e7b632e

for easier comparison...

Update index.html

fb2cf99

fix

BLooperZ changed the title ~~Slightly improved Google Analytics snippet~~ Further optimizing Google Analytics snippet Jan 15, 2015

BLooperZ reviewed Jan 15, 2015
View reviewed changes

BLooperZ added 2 commits January 16, 2015 11:22

Update index.html

4a436fe

even more shorter

Update index.html

13c5532

BLooperZ reviewed Jan 16, 2015
View reviewed changes

BLooperZ added 2 commits January 16, 2015 12:24

Update index.html

f4b862a

Update index.html

522238e

getting back the option to set the variable name

BLooperZ added 7 commits January 16, 2015 14:10

Update index.html

3f265be

Update index.html

557d577

Update index.html

de96655

no parameters at all

Update index.html

fe2616b

Update index.html

44bc3bc

fix

Update index.html

8eed196

not polluting the global namespace

Update index.html

f6c4d52

paulirish mentioned this pull request Feb 1, 2015

compute gzip bytesize gpbmike/refresh-sf#17

Closed

arthurvr reviewed Feb 1, 2015
View reviewed changes

Update index.html

4e4512b

wrapped lines

QWp6t mentioned this pull request Apr 5, 2015

Use @mathiasbynens's GA snippet roots/soil#61

Merged

mathiasbynens mentioned this pull request Apr 20, 2015

Simplify analytics snippet using async & defer #1696

Closed

alrra closed this Apr 20, 2015

alrra added javascript and removed html labels Apr 20, 2015

azu mentioned this pull request May 13, 2015

Rename the parameters of Google Analytics script jser/jser.github.io#75

Closed

XhmikosR added a commit to mpc-hc/mpc-hc.org that referenced this pull request Feb 19, 2016

Simplify the Google Analytics snippet using async & defer

6e607c4

h5bp/html5-boilerplate#1660 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Further optimizing Google Analytics snippet #1660

Further optimizing Google Analytics snippet #1660

BLooperZ commented Jan 14, 2015

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

BLooperZ commented Jan 16, 2015

paulirish commented Feb 1, 2015

This comment was marked as abuse.

ghost commented Apr 4, 2015

bnjmnt4n commented Apr 4, 2015

ramasilveyra commented Apr 5, 2015

donovanglover commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

paulirish commented Apr 6, 2015

mathiasbynens commented Apr 6, 2015

FagnerMartinsBrack commented Apr 6, 2015

alrra commented Apr 19, 2015

mathiasbynens commented Apr 20, 2015

alrra commented Apr 20, 2015

Further optimizing Google Analytics snippet #1660

Further optimizing Google Analytics snippet #1660

Conversation

BLooperZ commented Jan 14, 2015

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

BLooperZ commented Jan 16, 2015

paulirish commented Feb 1, 2015

This comment was marked as abuse.

ghost commented Apr 4, 2015

bnjmnt4n commented Apr 4, 2015

ramasilveyra commented Apr 5, 2015

donovanglover commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

xeniun commented Apr 5, 2015

mathiasbynens commented Apr 5, 2015

paulirish commented Apr 6, 2015

mathiasbynens commented Apr 6, 2015

FagnerMartinsBrack commented Apr 6, 2015

alrra commented Apr 19, 2015

mathiasbynens commented Apr 20, 2015

alrra commented Apr 20, 2015