CLS once more: why hustle no more good?

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:

austin powers GIF
I’d be happy to move on, given chance.

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..

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: