Why is react lazy adding time to first load

Question

I have a small but fun to develop app. It was a fast experiment to learn a bit more about redux and react and I got to the point that I consider the app mature enough to start learning about optimization.

I did some pure component optimization attemts, but they didn't improve the time to first load, so I move on. The next optimization I tried was using react lazy for lazy load some components that I don't need at first time. For example, I have an error component that I only need if I have to show an unlikely error, so that is what I did, and surprisingly (and according to lighthouse) all the first time metrics (time to first interactive, time to first meaningful paint etc) got way worse.

Here is an screenshot of the report before trying to use react lazy:

As you can see, from the performance point of view there was not much to improve, but as I was trying to learn modern react, I tried anyway. Here is the best I have been able to get using react lazy to split one component:

As you can see, way worse. The problems it detected were not all related to caching policies, here they are:

Seems that the main thread is getting busier to parse all the javascript. It makes no sense to me, because going to Chrome dev-tools and inspecting on detail the network requests (on the performance tab) the resulting bundles are downloaded in parallel. However the bundles on both versions are almost the same size, except that the split version of the application has 5 chunks instead of 2:

First bundle without code split

URL
bundle.js
Duration
45.62 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
6.5 KB
Decoded Body
31.0 KB

First bundle with react lazy split

URL
bundle.js
Duration
28.63 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
7.1 KB
Decoded Body
33.7 KB

First downloaded chunk:

Network request
URL
0.chunk.js
Duration
255.83 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
579 KB
Decoded Body
2.7 MB

First chunk with react lazy split(is labeled 5 but it is actually the first):

URL
5.chunk.js
Duration
276.40 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
559 KB
Decoded Body
2.6 MB

My conclusion is that react lazy introduces a significant overhead that only pays off if the size of the loaded components is big enough. HoweVer, does that mean that big aplications can never score high on first paint ? I made some bigger apps with VUE that got almost 90 on performance, so I'm pretty sure I'm doing something wrong here.

Something to mention is that the first screenshot is being served from github pages while the second is being served locally, but that should not influence the problem at hand, should it ?

The code for the non split version of the app is publicly available here: https://github.com/danielo515/itunes

Answer 1

The biggest time consumption in the “Script Evaluation” 1.672ms. So, try reducing this time.

1. Analyze size of JavaScript, which libraries you can replace by the smaller version or use pure JavaScript. If you use CRA try Analyzing the Bundle Size or webpack-bundle-analyzer. For example instead of lodash maybe you can use smaller library lodash-es;

2. Use server-side rendering. Consider use loadable-components (advice from React doc). But if you use slow server (or low level of cashing) has possibility increase a value of "Time to First Byte";

3. Use Pre-Rendering into Static HTML Files.

Also, a very useful tool for web-page speed analyze is webpagetest.org.