{"id":339053,"date":"2021-04-22T12:04:48","date_gmt":"2021-04-22T19:04:48","guid":{"rendered":"https:\/\/css-tricks.com\/?p=339053"},"modified":"2021-04-22T12:04:50","modified_gmt":"2021-04-22T19:04:50","slug":"the-almost-complete-guide-to-cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-almost-complete-guide-to-cumulative-layout-shift\/","title":{"rendered":"The Almost-Complete Guide to Cumulative Layout Shift"},"content":{"rendered":"\n

Here’s Jess B. Peck writing all about Google’s Core Web Vitals:<\/p>\n\n\n\n

Let\u2019s step back one. CLS is when you\u2019re about to click on a link, and the whole page shifts and you click on a different link instead. It\u2019s when you\u2019re halfway through a blogpost and an ad loads and you lose your place. It is when\u2026 the layout shifts. At least, that\u2019s what it\u2019s trying to measure– both those shifts<\/em>, how often they happen<\/em>, and the irritation<\/em> that causes the user.<\/em><\/p><\/blockquote>\n\n\n\n

I didn’t quite understand just how complex Cumulative Layout Shift is before reading Jess\u2019s piece. As Jess explains:<\/p>\n\n\n\n

CLS is a measure for a robot to approximate the user perception of instability<\/em>. This means we\u2019re getting a unit of change over time. It\u2019s a three dimensional equation, and there are tons of things that can affect it. […] The idea is more to alert devs to a problem area, rather than be a perfect measurement of how annoying a page is.<\/p><\/blockquote>\n\n\n\n

I had this problem on, of all places, Google dot com. I kept tapping an element just<\/em> as it appeared on screen and this sent me to the wrong page.<\/p>\n\n\n\n\n\n\n\n

Jess notes that these metrics are sometimes more of an art than a science, and so we shouldn’t be obsessed with making sure that just these Core Web Vital metrics are okay. Chris mentioned a while ago that he worries folks might begin to game these metrics<\/a> for improving their SEO:<\/p>\n\n\n\n

This feels like the start of a weird new era of web performance where the metrics of web performance have shifted to user-centric measurements, but people are implementing tricky strategies to game those numbers with methods that, if anything, slightly<\/em> harm user experience.<\/p><\/blockquote>\n\n\n\n

Harry Roberts mentioned something similar:<\/p>\n\n\n\n

\n

A new and unusual phenomenon: clients reluctant (even refusing) to fix performance issues unless they directly improve Vitals.<\/p>— Harry Roberts (@csswizardry) March 5, 2021<\/a><\/blockquote>