Case study: Analyzing Notion performance (or making a React app load 30% faster)

Hey Hacker News! I’m a long-time user of Notion (an advanced note-taking app). Notion’s web app has been quite slow for me, so I decided to reverse-engineer it and see why. Here’s a case study with findings and recommendations!

TL;DR:

* Notion has a large startup time because they serve a lot of JavaScript. This JS has to be parsed, compiled, and executed – and this takes time. This is especially slow on Android phones [1].

* The obvious solution to this is code splitting. But in case of Notion, there’re a few other low-hanging fruits. For example, if you switch to CommonJS, you can (surprisingly) speed up the startup by deferring unnecessary modules [2]. Or, there’s a bunch of unnecessary libraries in the bundle (including 3 duplicates of CoreJS).

* Apart from JS execution, there’re also a few other issues. Analytics is loaded early – and it defers loading and execution of other, more important resources [3]. And page resources don’t have `Cache-Control` headers being set, which could lead to different caching behavior in different browsers.

Overall, based on my measurements and some guesses, I think Notion can cut around 30% off their initialization time – simply by tuning some configs and deferring some loading.

Would be happy to hear your feedback :)

[1] https://3perf.com/blog/notion/#cost-of-javascript

[2] https://3perf.com/blog/notion/#try-the-lazy-option-of-babels...

[3] https://3perf.com/blog/notion/#defer-third-parties