Julien Moumné

Making Matomo UI faster

Matomo (Piwik) was recently released with an improved mechanism for handling javascript and css file inclusions. The main idea was to merge javascript and css files into two files. You can find out more about the way the idea was brought and have a look at discussions around it within the trac ticket: http://developer.matomo.org/trac/ticket/660.

In this blog entry we will review the new mechanism according to two points of view: the Matomo (Piwik) user and the Matomo developer.

Making Matomo UI faster for its users

Here is an overview of the improvements. How figures have been obtained is explained later on.

Improvement summary for CSS files

Access Type

Download Size

Download Time

First Access

-15%

-80%

Returning Visit

NA

-80%

Improvement summary for JS files

Access Type

Download Size

Download Time

First Access

-10%

-45%

Returning Visit

NA

-55%

The new mechanism has been designed with the main purpose of making the UI faster and more responsive so users have a great time using Matomo. The goal has been achieved by reducing the amount of http requests for javascript and css files from 32 and 14 respectively to two. In addition, both merged CSS and JS files have been minified.

In order to fully appreciate how much time we gain, we used the firefox extension firebug to have a detailed look at http requests before and after the mechanism has been applied. We will compare results both with the browser cache disabled and enabled. Disabling the browser cache simulates a first access to Matomo, enabling it simulates returning visits.

HTTP requests are captured while accessing Matomo demo dashboard (demo.matomo.org). From my computer, based in Paris area, request durations were fluctuating quite noticeably. A series of requests has been made in order to evaluate duration averages. Results taken from those measurements can only be approximates.

1) CSS files comparison, first access to Matomo

CSS files – Before optimization

CSS files – After optimization

Results: A gain is noticeable both in download size (minus 15%) and in download time (minus 80%).

2) JS files comparison, first access to Matomo

JS files – Before optimization

JS files – After optimization

Results: A gain is noticeable both in download size (minus 10%) and in download time (minus 45%).

3) CSS files comparison, returning visit to Matomo

CSS files – Before optimization

CSS files – After optimization

Results: The downloading time is reduced by 80%.

4) JS files comparison, returning visit to Matomo

JS files – Before optimization

JS files – After optimization

Results: The downloading time is reduced by 55%.

Those results clearly show conclusive improvements in handling JS and CSS files and in making Matomo a more enjoyable experience. The last part of the post is about what has changed for Matomo developers.

Making Asset Management a breeze for Matomo developers

With the new mechanism in place, Matomo developers benefits from a new approach in dealing with their JS and CSS files needs. Asset management is now framework oriented and fits nicely with the overall idea of Matomo being a Web Analytic framework.

JS and CSS files used to be included manually within smarty templates. Lets have a look at the VisitsSummary plugin in Matomo 0.6.3:

1) Disable file merging and minifying

Mode 2 (development mode): JS and CSS files are included individually without being merged and without being minified.

The first mode is to be used in a production environment. It is designed to offer the best performances.

The latter mode has to be used when adding, removing and modifying JS/CSS files. Changes will not be taken into account if the development mode is not activated. This mode has been designed to ease the debugging process. In this mode, each file is included individually to find javascript or css bugs more easily.

When the user visits Matomo UI, the Asset manager will emit the event ‘AssetManager.getCssFiles’ and ‘AssetManager.getJsFiles’. Each plugin then hooks on this event, and adds its own JS/CSS files to the list of files to merge. AssetManager then uses CSSMin and JSMin library to generate the minified files.

We hope this post serves as a good overview of how Matomo UI has been made faster. There is always room for improvement, feel free to add comments with suggestions. We are always happy when Matomo evolves thanks to the community!

Share this post

Subscribe to our newsletter to receive regular information about Matomo. You can unsubscribe at any time from it. This service uses MadMimi. Learn more about it within our privacy Policy page.

Become a partner

Privacy

Sign up for our newsletter

We are constantly adding new features and content to the leading All-In-One Analytics Platform that gives you control over your data. If you want to stay up to date with everything that is happening, feel free to subscribe below. You can unsubscribe at any time from it. The newsletter service uses MadMimi. Learn more about it within our privacy Policy page.