Menu

Post image 1
Post image 2
1 / 2
0

Why CLS Is Harder to Fix in React Than You Think

DEV Community·nosyos·20 days ago
#9Lb0KoeK
Reading 0:00
15s threshold

CLS is the only Core Web Vital that tends to get worse as a product matures. Every component you lazy-load, every feature flag that conditionally renders content, every third-party widget you add — each one is a potential layout shift. LCP and INP can be improved incrementally. CLS requires you to think about rendering order before you write the component. That's what makes it frustrating. The fix is usually architectural, not a one-line change. Why CLS behaves differently LCP and INP have clear causes you can trace in DevTools. CLS shifts can happen at any point during a page's life, from any element, triggered by content the browser wasn't expecting to have to reflow around. The browser assigns each shift a score based on the fraction of the viewport that moved and how far it moved. Shifts that happen within 500ms of a user interaction don't count — those are expected. Everything else does. Setting width and height on images is table stakes. It helps, but it's not where React apps usually fail CLS.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More