Cumulative Layout Shift (CLS) measures jumpiness and jerking of a web page.

CLS is a user-point-of-view metric that has significant impact on how comfortable your site feels to users browsing it.

Bad CLS score is very likely to drive away potential fans. People have become clearly annoyed by ever-increasing bloat on web pages. In very practical viewpoint, we actually access the web in situations where 5 seconds is a lot of time.

Going through a page with high (bad) CLS score feels like this:

It’s awful. You want to move on, to your target on the page, but things get in your way.

Think more like: your web page is a useful door knob. Make it work reliably, every time, without fuss.

In addition, now Google Search rankings penalize a web page for bad CLS scores.

What causes bad CLS scores?

The root cause comes from designing pages in a desperate and uncoordinated fashion:

• in a “space race for customer attention”, we forgot common sense, and overstuffed web pages
• web pages are populated by popups, ads, and email newsletter sign up notifications – among other bells and whistles
• the single most important marketing drum beat has been about getting user’s email address, no matter the costs
• people don’t actually want to give out email addresses – especially since it can be used as part of identity attacks
• a mere asking for e-mail address can leave a creepy feeling for the visitor
• this orchestrated programming for timed, seemingly “casual” and leisurely interruptions on a page is so passé, that people just feel being jerked around, more than having usefully attended to

Is there a simple fix for Cumulative Layout Shift?

Quite possibly. In reality, it depends on the extent of having ruined otherwise fast and nice pages with bloat. I don’t think there’s yet a turnkey solution to many cases.

Better CLS scores come out of:

• examining what exactly causes shifts in layout
• in which stages these shifts happens
• fix missing attributes to HTML elements, so that browser knows in advance how it should lay out a page
• talk to marketing and have the issue properly addressed, before the boat stops dead due to a wrong kind of ballast

Fixing CLS problems touches on the technical side of CSS – which frankly we’d like to sometimes just forget..