How to Minimize Cumulative Layout Shift (CLS)

Google has announced that page experience will affect ranking soon. The page experience update will consider several page experience signals, including LCP, FID, and CLS plus Chrome’s recent fix to CLS. We are in a need to explain what is Cumulative Layout Shift (CLS) that we are talking about.

Suppose you are reading this article and without warning, the text moved down, and you’ve lost your place and an ad unit appeared. This is worse when you were about to tap a link or a button, but just before your finger landed, the link moved, and you clicked something else!

Our guides such as How To Hide AdSense Units On Selected WordPress Post, PHP Snippet to Hide AdSense Unit on WordPress 404 Page, Different AdSense Units on Mobile Devices, AdSense Asynchronous Ads with Responsive Design are not exactly some of the answers to minimize Cumulative Layout Shift (CLS) but they may help you.

Ads are usually requested asynchronously during or after page load. If you don’t reserve sufficient space with CSS for the ads, they can end up displacing visible non-ad content. To give you an example: Your page starts rendering. After 1s, a layout shift of 0.1 occurred, then at 0.5s, another shift of 0.2 occurred.
2 seconds later, a shift of 0.35 occurred. CLS ignores all layout shifts that appear within half a second from user input. It’s called the input exclusion window. The fallacy of this system is numerous. The trick to add CSS has been described by Google.

How CLS is calculated? Impact fraction describes how much space an element takes up in the viewport. If an element takes up 50% of the viewport then drops another 25%, these percentages are added together for a score of 75% i.e. 0.75.

Lighthouse, WebPagetest, Gtmetrix can help you to identify what exactly is the cause of CLS. Apart from the ad units, font loading, icon font loading may increase CLS. You can use font:display directive with values like auto, swap, block, fallback and optional to minimize the effect. Images without dimensions may also increase CLS, which is rare with WordPress. Try to remove ad units from above the fold.

If you invest some time, it is possible to reach CLS near zero. It is unknown what Google will do with the websites with a higher CLS. Hence, give importance to fix the issue. If you inline the CSS, it can drastically increase the CLS. Google is ridiculous, by adding more factors that require more technicalities they are forcefully hiding the actual goal of the websites.