
Case study: Analyzing Notion performance (or making a React app load 30% faster) - iamakulov
https://3perf.com/blog/notion/
======
iamakulov
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](https://3perf.com/blog/notion/#cost-of-javascript)

[2] [https://3perf.com/blog/notion/#try-the-lazy-option-of-
babels...](https://3perf.com/blog/notion/#try-the-lazy-option-of-babels-
plugin-transform-modules-commonjs)

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

