{"id":2229,"date":"2023-06-14T01:45:03","date_gmt":"2023-06-14T01:45:03","guid":{"rendered":"https:\/\/ewebtoolz.com\/blog\/cumulative-layout-shift-cls-defined-measured-how-to-fix\/"},"modified":"2023-06-14T01:45:03","modified_gmt":"2023-06-14T01:45:03","slug":"cumulative-layout-shift-cls-defined-measured-how-to-fix","status":"publish","type":"post","link":"https:\/\/ewebtoolz.com\/blog\/cumulative-layout-shift-cls-defined-measured-how-to-fix\/","title":{"rendered":"Cumulative Layout Shift (CLS) \u2013 Defined, Measured, & How to Fix"},"content":{"rendered":"


\n<\/p>\n

\n

Cumulative Layout Shift (CLS) measures the visual stability of a page as it loads. It does this by looking at how big elements are and how far they move. It\u2019s one of the three Core Web Vitals metrics Google uses to measure page experience.<\/p>\n

CLS is calculated during the five-second window where the most shifting occurs.<\/p>\n

\n

Sidenote.<\/p>\n

Expected layout shifts, like after a user action, are fine and expected. Shifts within 500 ms of a user interaction are excluded from the calculations.<\/p><\/div>\n

Here\u2019s how it\u2019s measured:<\/p>\n

\n

layout shift score = impact fraction x distance fraction<\/p>\n<\/blockquote>\n

Or said in a more understandable way, it\u2019s:<\/p>\n

\n

layout shift score = % of the viewport that changed * the distance an unstable element moved<\/p>\n<\/blockquote>\n

The reason CLS is important is it\u2019s annoying when you try to click something on a page that shifts and then end up clicking on something you don\u2019t intend to.\u00a0<\/p>\n

It happens to me all the time. I click on one thing and, suddenly, I\u2019m clicking on an ad and am now not even on the same website. As a user, I find that frustrating.<\/p>\n