Your Inline Critical CSS Is Probably Lying About Your CLS Score
A technical post-mortem on a deploy that quintupled Cumulative Layout Shift, and the architectural rule that should have caught it.
If you run a React SPA built with Vite and Tailwind, with SSR for crawlers and the SPA shell for everyone else, you've probably thought about FOUC. Flash of Unstyled Content. The brief moment between HTML arriving and CSS finishing where users see browser-default rendering — blue underlined links, default fonts, no layout.
The standard fix is inline critical CSS. Pull your above-the-fold styles into a <style> block in the HTML head. Browser renders them immediately. The rest of the stylesheet loads in parallel. FOUC eliminated.
This works perfectly. Except when it doesn't. And when it doesn't, you get a CLS regression that's worse than the FOUC you were trying to fix.
I shipped this exact mistake last week. We rolled it back in 12 minutes. Cumulative Layout Shift had...
Copyright of this story solely belongs to hackernoon.com. To see the full text click HERE
