This morning, I was very embarrassed when I looked at our Google Analytics Site Speed statistics.

One of our sites has risen from 4s to 8s response time!

What have we done that could explain this?

After the reading of a very good post of Aaron Peters Why loading third party scripts async is not good enough, i thought many scripts can be loaded after the “onload” event.

Yesterday, we have implemented a new version of one of our websites, with the loading of “Google Plus One” and “Criteo” after Onload.

For those who are interested by the criteo script, take at look at: the js.

Loading of Criteo and “Google Plus One” is done by the same way of Aaron Peters:

<script>
    window.___gcfg = {
        lang: 'fr'
    };
    (function(w, d, s) {
      function go(){
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.src = url; js.id = id;
         fjs.parentNode.insertBefore(js, fjs);
        };
        load('/js/criteo.js', 'criteojs');
        load('https://apis.google.com/js/plusone.js', 'gplus1js');
      }
      if (w.addEventListener) { w.addEventListener("load", go, false); }
      else if (w.attachEvent) { w.attachEvent("onload",go); }
    }(window, document, 'script'));
</script>

So, why the response time is increasing ? It should be better but certainly not worse.

When we look carefully to the response time for web browser, we see that the effect of optimization is not the same for all.
On the one hand, we have IE and Chrome, that have better time after the optimization, on the other hand we have Firefox that is worse.

January 03, 2012

• IE = 3.78s
• Firefox = 5.31s
• Chrome = 3.55s

January 04, 2012

• IE = 3.33s (-12%)
• Firefox = 17.18s (+223%)
• Chrome = 2.99s (-16%)

Now let’s look more closely at the statistics for Firefox.
January 03, 2012

• Firefox 7.0.1 : 2.54s
• Firefox 8.0.0 : 6.00s
• Firefox 8.0.1 : 5.87s
• Firefox 9.0.1 : 4.04s

January 04, 2012

• Firefox 7.0.1 : 21.73s (+755%)
• Firefox 8.0.0 : 21.53s (+258%)
• Firefox 8.0.1 : 18.69s (+218%)
• Firefox 9.0.1 : 2.89s (-28%)

So what’s the problem with Firefox 7 & 8 ?

A little bit of searching on google gave me a answer: the problem is due to a bug on the Navigation Time API on firefox 7 & 8.

The bug is referenced on bugzilla n°691547.
Yan can take at look on the mailing list: http://lists.w3.org/Archives/Public/public-web-perf/2011Nov/0039.html

So to summarize, optimization, consisting of some scripts to load after the onload of the page, lowers the loading time, triggering event “onload” earlier.
This is true for all browsers.
But a bug in Firefox (<9) broke the statistics of loading time.
The problem is that google think our website has become slower even though it has become faster.

So what should we do?

Edit of January 06, 2012:

We try this workaround:

<script>
    window.___gcfg = {
        lang: 'fr'
    };
    (function(w, d, s) {
      function go(){
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.src = url; js.id = id;
         fjs.parentNode.insertBefore(js, fjs);
        };
        load('/js/criteo.js', 'criteojs');
        load('https://apis.google.com/js/plusone.js', 'gplus1js');
      }
      if (jQuery.browser.mozilla && parseInt(jQuery.browser.version, 10) < 9) {
        go();
      } else {
        if (w.addEventListener) { w.addEventListener("load", go, false); }
        else if (w.attachEvent) { w.attachEvent("onload",go); }
      }
    }(window, document, 'script'));
</script>

We will see in few days if the statistics are better.

Edit of January 13, 2012:

As you see, the workaround is good.

Comparison between Dec 31,2011 – Jan 3,2012 (before onload) and Jan 9,2012 – Jan 12,2012 (after onload):

Firefox 7 / 8 are still slower when scripts are loaded after onload. Fortunately, the number of visit of these browsers falls sharply in favor of Firefox 9.