@diosmosis opened this Issue on April 15th 2020 Member

Profiled demo.matomo.org in chrome and found some possible optimizations we could apply. It took about 4s to load the entire dashboard:

demo.matomo.org.profile.json.zip

  1. Implement partial html rendering by refactoring controllers to return HTML as it’s rendering instead of returning a whole string after. The browser can start processing/rendering while the server is still working. So, for example, if we return just the <head> element, the browser could request/load/compile JS/CSS while we’re querying the Db, for instance.

  2. Preloading xhr content could also be used to speed up overall page performance, though this is easier to achieve in, eg, node.js where client side code can be used server side. Essentially seeding angular services w/ the data they need. For example, instead of the site selector model sending a AJAX request to get the sites, we set the data in the HTML returned and it no longer has to (and maybe this data could be cached server side too?). Things like that.

  3. We could also load the HTML in a pre-generated, cached/gzipped JS asset (like our JS/CSS is currently loaded) (most angularjs apps do something like this via a node.js build tool (ie, via gulp)), so we don't have to keep loading those small HTML files.

  4. If we batch controller requests and send them all at once instead of in multiple requests, would pages like the dashboard load faster? Sparkline loading might be optimized this way, since they usually use reports w/ all the metrics, but just display one. We could load a single report, API.get, and then create the sparkline images and return them all at once.

  5. If we cache API responses in the Transient cache so we don’t have to re-request anything (w/ maybe an upper limit on response size?), would it speed up our requests?
Powered by GitHub Issue Mirror