Every new tab is a cold start. We set out to shrink our bundle, found that bytes weren't the problem, and traced the real delay to how React reveals lazy-loaded and suspended content.
A new tab extension has an unusual performance problem: it starts from scratch every single time you open a tab. There's no warm page to come back to. So when the dashboard started taking a noticeable beat to fill in, we assumed the bundle was too big.
It wasn't. The biggest fix didn't remove a single byte. Here's what we found, including the fix we had to rethink.
TL;DR: in headless Chromium, our widgets' code was loaded within about 100 ms, but the widgets didn't appear until about 380 ms, because a lazy component always suspends once and React then holds suspended content back for 300 ms. Rendering a placeholder ourselves instead of suspending got the first widget content on screen about 240 ms sooner, and most of the dashboard about 200 ms sooner, in Chrome on a Windows desktop. Shrinking the main bundle made no measurable…