Does lazy-loading of CSS trigger a recalculation of styles for the whole page and is it important?

Question

In the recently open-sourced by Facebook style engine StyleX there's a following claim

When dealing with a large amount of CSS, lazy-loading CSS is a way to speed up the initial load time of a page. However, it comes at the cost of slower update times, or the Interaction to Next Paint (INP) metric. Lazy-loading any CSS on a page triggers a recalculation of styles for the entire page.

Source: https://stylexjs.com/docs/learn/thinking-in-stylex/#one-small-file-over-many-smaller-files

For all the experience I have, I've never heard that lazy loading of CSS triggers a recalculation of styles for the entire page. This seems plausible to me, though. Therefore I'd be interested to see if there's more reading available on the matter:

• Are there performance implications to lazy-loading CSS? Are they significant? Is there any research on that?
• How can this be measured? I presume the Performance Profiler in DevTools is the way to go, but it'd be great to know what to look for.
• Why there's so little information available on the matter? Is this just not significant enough, unless you have a huge CSS, so no one talks about it?

I've done some searching around but wasn't able to find much at a glance.

Answer 1

Disclosure: I wrote the original quoted text.

It is important to understand what "style recalculation" is. It is the process by which the browser understands what CSS rules need to be applied to what HTML elements. E.g. if you have a div with a class card, the browser needs to find all CSS rules that could target that div. This includes .card {}, div {}, etc.

If you think about it, whenever more CSS is loaded on the page, the browser needs to verify that any additional CSS doesn't affect the styling applied to existing HTML elements. This is "style recalculation".

Also consider that if you're building an app with client-side routing, you're generally loading CSS at the same time as data for a new route. This means the browser has to parse and calculate styles while it's doing significantly more expensive things such as running Javascript.

Does it matter? "Style recalculation" is far from the most expensive thing a browser might do. Within styling, layout is significantly more expensive than style recalculation. However, the impact is more or less linear with the complexity and size of the HTML on the page.

Therefore, for smaller apps, lazy loading CSS modules is not going to be the performance bottleneck. But if you have a big app and you're struggling with update times, removing CSS lazy loading is one of the many things you can do to help. StyleX does this, but so does Tailwind and most styling solutions that rely on Atomic CSS.