A layout shift, or cumulative layout shift (CLS), occurs when an element, like an image, button, text, form, etc., moves position during the page loading process. If you have ever accessed a page and as it is loading began to interact with a button, but the button moves and you clicked on advertisement or something you did not intend to click instead, that is a cumulative layout shift. This can be extremely frustrating to users and can cause the user to select something they did not. This can be especially troublesome on mobile devices where the viewport is limited to the size of the user’s device.
Online advertisements are typically the cause of these shifts, as they load asynchronously, after the core elements of the page. CLS is one of three metrics that make up the Core Web Vitals. The other two metrics are Largest Contentful Paint (LCP) and First Input Delay (FID). We will discuss those metrics later in this guide. CLS is a measurement of how much of an impact shifting layout has on usability as it pertains to a user’s experience. While it does not have a major impact on your site’s overall Lighthouse score, in the eyes of a user, it should be considered much more of a priority. A Lighthouse score of 0.1 (75th percentile) is considered “good.” A score over 0.25 is deemed poor and “needs improvement.”