Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improving JavaScript tracking code performance #9077

Closed
pekeler opened this issue Oct 22, 2015 · 9 comments
Closed

improving JavaScript tracking code performance #9077

pekeler opened this issue Oct 22, 2015 · 9 comments
Labels
answered For when a question was asked and we referred to forum or answered it. c: Performance For when we could improve the performance / speed of Matomo.

Comments

@pekeler
Copy link

pekeler commented Oct 22, 2015

Moved here from the forum as suggested by @mattab

While the JS-loading snippet doesn't delay when the page is usable, it does appear to delay it because the browser's page-loading indicator is on/spinning until after piwik.js has been loaded. So if it takes 5 seconds to load piwik.js, it looks to the user like piwik is slowing down the page load by 5 seconds. This can be improved by delaying the loading of piwik.js until after the onload event.

    var _paq = _paq || [];
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    addEventListener('load', function() {
      var u="//mysite/piwik/";
      _paq.push(['setTrackerUrl', u+'piwik.php']);
      _paq.push(['setSiteId', 1]);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
    });

The downside of this approach is that if someone navigates quickly from page to page, there's now a slightly bigger chance of piwik not tracking it. But I think speed is more important than accuracy.

If you still care about IE 8 and below (you really shouldn't anymore), you'll need to do that dance with attachEvent. And if you're cool with ignoring IE 9 and below, you can drop the g.async=true; part.

I meant: "if you're cool with ignoring IE 9 and below, you can drop the g.defer=true; part."

@tsteur
Copy link
Member

tsteur commented Oct 26, 2015

I did this as well to make http://developer.piwik.org faster:

    var _paq = _paq || [];
    _paq.push(["setCookieDomain", "*.piwik.org"]);
        _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);

    function track() {
        var u=(("https:" == document.location.protocol) ? "https" : "http") + "://demo.piwik.org/";
        _paq.push(["setTrackerUrl", u+"piwik.php"]);
        _paq.push(["setSiteId", "siteid"]);
        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
        g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
    }

    if (window.addEventListener) { window.addEventListener("load", track, false); }
    else if (window.attachEvent) { window.attachEvent("onload",track); }
    else {
        track();
    }

@pekeler
Copy link
Author

pekeler commented Oct 26, 2015

@tsteur you shouldn't need the IIFE inside of track. It's superfluous because the track function is already providing the lexical scope.

@tsteur
Copy link
Member

tsteur commented Oct 26, 2015

True, changed it. It was implemented a bit different first and then just copied into the track function :)

@mattab mattab added the c: Performance For when we could improve the performance / speed of Matomo. label Nov 26, 2015
@mattab mattab added this to the 3.0.0 milestone Nov 26, 2015
@mattab mattab changed the title improving JS snippet improving JavaScript tracking code performance Nov 26, 2015
@mattab
Copy link
Member

mattab commented Nov 26, 2015

tentatively adding to 3.0.0 milestone - it would be a nice improvement to have 👍

@hpvd
Copy link

hpvd commented Jan 26, 2016

there's now a slightly bigger chance of piwik not tracking it. But I think speed is more important than accuracy.

??
are you sure with this?
imho: Piwik is tracking software so it's main task is correct tracking.
Speed is optional (but of course highly desired)

@pekeler
Copy link
Author

pekeler commented Jan 26, 2016

@hpvd yes, I'm sure that my pages appearing to load as fast as they'd without piwik is more important to me than 100% accuracy. If you want 100% accuracy, you might end up with the opposite effect: you'd lose some users who're dissatisfied with your site's performance, and you'd have a perfect measurement of the ones with patience.

It's basically the web version of the observer effect.

@hpvd
Copy link

hpvd commented Jan 27, 2016

@pekeler thanks for your answer.
Sure you can do it this way if the statistics you get from are good enough for your needs.
There are two problems when actively deciding nto to track a part of visitors and doing it not very carefully:

  1. of course you do not know what these visitors did,
  2. but even more worse you may not even know how many visitors, pageviews and actions you miss.
    => to put it bluntly: in consequence you have done statistics but they did not match reality.
    So they are not suitable to make serious (e.g.business) decisions for the future based on these numbers.

One can decide to do it this way, but it should not be standard solution in Piwik.

@tsteur
Copy link
Member

tsteur commented Jan 27, 2016

I guess the point is with correct server setup etc you can have your piwik.js served from the cache, track all users including at once that leave your page early and at the same time piwik.js will be reloaded automatically once the file was changed.

There are different caching strategies possible which can be all configured server side and depends on how the file/tracking code is included into the page.

For example if someone wants aggressive caching for best page load speed (which is critical for some websites / shops) they can do that and they maybe don't mind if it takes a while until a new version to piwik.js is rolled out to all users. Usually we don't have too many critical changes in piwik.js but happens. Someone else might setup the server with a little bit less aggressive caching and the file will be still updated/reloaded automatically once the file is changed. This will be still faster and work better than having another tiny file that loads correct version. That's what caching headers exist for :)

@mattab mattab closed this as completed Jun 19, 2017
@mattab mattab added the answered For when a question was asked and we referred to forum or answered it. label Jun 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered For when a question was asked and we referred to forum or answered it. c: Performance For when we could improve the performance / speed of Matomo.
Projects
None yet
Development

No branches or pull requests

4 participants