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.”
There are several actions web developers or website administrators can take to avoid a large layout shift. We will talk more about some of these improvements later in this guide, but the first item to cross off your list is to ensure your image and video dimensions are specified in HTML so that the browser knows the precise dimensions required. Like we mentioned earlier, layout shifts can be typically caused by ads. In this case, reserving the largest size of the ad, or using a placeholder if there are no ads to be shown, before the loading of the advertisement library can help.
Another option is to move the ads to a different spot on the page. If it is a dynamic ad, it may be more difficult to set this correctly, but there are best practices you can take with dynamic ads, so that they do not detract from the content. Typically, pushing them to the bottom is recommended, however, that might not be where your potential advertising sponsors would like their ads to be placed, as visitors may not get that far down the page. And on the other hand, you also do not want to place ads too high on the page, especially before above-the-fold content. With that in mind, make sure to experiment with various layouts that provide the right balance of performance and functionality. You may never be able to avoid a layout shift during page load, but ensuring that they are not distracting visitors and users is essential for providing a good user experience.
