Menu

Post image 1
Post image 2
Post image 3
Post image 4
1 / 4
0

Why Cumulative Layout Shift Is Harder to Fix Than It Looks

DEV Community·137Foundry·about 1 month ago
#WYzQVevZ
Reading 0:00
15s threshold

Of the three Core Web Vitals, Cumulative Layout Shift often surprises developers. LCP is a loading problem. INP is a JavaScript problem. CLS looks like it should be solved by adding width and height to images, and then it turns out your score barely moves after you do that. The reason CLS is deceptively hard is that the score accumulates from multiple sources, most of which are not images. A CLS score is the sum of all unexpected layout shifts during a page session, and the sources include web fonts, injected third-party content, dynamic banners, browser-extension interference, and animated elements that change dimensions without user interaction. Fixing images helps. It usually isn't enough on its own. How CLS Is Actually Calculated The metric combines the "impact fraction" (how much of the viewport moved) with the "distance fraction" (how far it moved). A shift that moves a large block of content a short distance can score similarly to one that moves a small element a long distance.…

Continue reading — create a free account

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

Read More