Using Google's Platform.js Plugin

Question

My website seemed slow. For that reason, I decided to dive in and look at ways to improve performance. On the server-side, everything looks good. But on the client-side, there's a lot of JavaScript that's slowing things down. When I looked at the load stack, I noticed two culprits.

The two worst offenders were https://apis.google.com/js/platform.js and https://www.google-analytics.com/analytics.js. I use the former for +1 buttons and the latter for analytical purposes. As of right now, I'm loading them like this:

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', '[MyId]', 'auto');
    ga('send', 'pageview');
</script>

<script src="https://apis.google.com/js/platform.js" async defer></script> 

I was under the impression that platform.js included Google Plus and Google Analytics. So, I thought I could condense down to a single external JS library using something like this:

(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);
  js.onload=function(){
    g.load('analytics');
  };
}(window,document,'script'));

This at least loads the Google Plus plugin. However, it doesn't actually log visits any more. It looks like g.load brings in Analytics. But, my ID isn't being assigned anywhere. At the same time, I do not see where to assign it in the platform.js version.

Can anyone provide any insights? I would love to be able to load one less external resource if possible.

Thank you.

Answer 1

It's hard to understand why these 2 libraries slow down the page, they usually work with async technologies (and the)

The Platform weighs less than 20 Kbs, and usually this library is hosted in a CDN, so maybe you host is not so fat then the European (the tested one), but I can discard this option because American and Latam Server are quite good too.

I've read the platform.js and has no common point with the analytics.js, why you think that it's included?. Maybe Google Analytics is included on an Iframe or other resources which is confusing you, but if you don't use the command correctly ga('create'), no information will be sent to your account. Maybe you still got the library but the information is being sent to another account (this happens a lot when some iframes are embedded, they includes Google Analytics but in a different domain, and the data is sent to 2 different accounts, this can be difficult to understand at the beginning).

But, remain your main doubt, if I understand it.

You want to keep a single library for both, I think that it's not possible to do. I checked the platform.js and has no reference to the Ga object (the one used on Google Analytics) or even to the collect URL (where you send the information to Google Analytics). The GA main Snippet also does some extra things, likes keep the date of the execution to be used used later.

What I can recommend to you?

1. Review the number of hits, with the network console, the Google analytics hits are sent to http://www.google-analytics.com, via HTTP forcing an HTTPS call if you are not using SSL(you have twice all the hit, but analytics will only use the secured one). Or use Tag Assistant to see this. Check that your implementation is still alive.

2. Maybe you can check Google Tag Manager, this tool can be configured to load the library on the DOM on in the PageView (HTML.load), I don't recommend you this practices, you'll reduce the number of hits sent to the tool (and get fewer Sessions).

3. Move the code to the bottom of the page. This is not a good idea due to the same reason before.

4. this, but it's still not correct to do it, you only delay the load of the library

$( document ).ready(function() {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', '[MyId]', 'auto');
    ga('send', 'pageview');
});

All of this keeping both code separately

I highly recommend you check if these 2 libraries are the real reason.

Answer 2

I was under the impression that platform.js included Google Plus and Google Analytics.

No, this is not true. platform.js allows you to load the Google Analytics API client libraries (which are used to programmatically report on your GA data), but that is different from analytics.js (which is used to send tracking data to GA).

Based on the code you've shown, both of these libraries are being loaded asynchonrously, so they should not interfere with the load time of your site. They may slow down when the window.load event fires, but that doesn't really mean your site is loading slower, since it shouldn't affect the loading of your application-critical resources.

If you really want to load these libraries without affecting any load metrics at all, you can postpone loading them until after the window.load event fires, but honestly I'd only do that if you have other code that is waiting until window.load fires to initialize.

Answer 3

If analytics.js is included in platform.js this might work?

(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);
  js.onload=function(){
    g.load('analytics');
  };
  ga('create', '[MyId]', 'auto');
  ga('send', 'pageview');
}(window,document,'script'));