Cumulative Layout Shift (CLS) is the measurement of unexpected movements on a page as new content loads. If you’ve ever visited a page and had what you were reading suddenly shift due to an image loading or a pop-up appearing, you’ve seen it in action. CLS is one of Google’s new Core Web Vitals – metrics for measuring page performance. In a previous post we discussed what CLS is and how it is measured, but how do you reduce Cumulative Layout Shift on a site? In most cases, it just involves reserving the appropriate amount of space for content before it loads on the page.
Give All Images a Width and Height
Images are often some of the last resources to load on a page due to their large file sizes. If the browser doesn’t know the dimensions of the image before it loads it, the surrounding content will shift when the image finally fills its space. Setting an explicit width and height on the image element allows the browser to reserve that space so that the surrounding area is not displaced when the image loads.
Your image elements should look something like this:
<img width="250" height="150" src="image_250x150.jpg">
For WordPress users, one of the best ways to set image dimensions is by using the WordPress native image functions whenever displaying images in a template.
Reserve Space for Ads, Pop-Ups, and Promos
Ads, pop-ups, and promos can cause layout shifts. A large ad without reserved space will shift the content around it when it loads. A pop-up at the bottom of the screen can push all of the content up. A promo banner at the top of the page can push it down.
Ads can be improved by defining a width and height for the ad container, using a placeholder if an ad isn’t served, and using
overflow: hidden to deal with the overflow from larger ads. Pop-ups, such as a notice at the bottom of the page about accepting cookies, should be fixed to the bottom using
position: fixed. A promo banner at the top of the page should either load with the rest of the content or be fixed to the top. Since content with a fixed position displays visually “on top” of the page instead of inline with page content, there is no need to account for the space it takes up.
Optimize Your Fonts
Web fonts often contribute to CLS. When loading a web font, the browser might initially calculate the necessary space needed based on the fallback system font, and then, when the web font is downloaded, the browser recalculates that space and causes a shift. The way the browser handles loading fonts is controlled by the
font-display CSS rule, so that’s how we solve this issue.
font-display: swap tells the browser to load a system font first while the web font is loading, and then once the web font is loaded, it swaps them out. So, one method of optimizing for layout shift is to use a web font that is similar, if not identical, to a system font. This limits your styling options but can be a good solution if performance is your primary goal.
Another approach uses
font-display: optional and allows for more options. In Chrome browsers, we can use
font-display: optional alongside preloading our font files to load our page with no flashes of invisible or unstyled text.
font-display: optional typically designates a 100ms block period where “invisible” text is displayed while the font loads. If the web font loads after 100ms, it is swapped in. If the web font does not load after 100ms, the system font is used. This doesn’t do much to solve our problems if the font doesn’t load in time, however, the Chrome browser has made further optimizations to this feature. When we preload our font files using
<link rel="preload">, instead of loading “invisible” text initially, the first render is simply blocked for 100ms or until the preloaded font file is downloaded. If our web font loads in time, the page will load without ever having to swap fonts and our performance should measure significantly reduced layout shift.
These issues are common on most sites, so implementing any of these methods can improve your CLS performance score and increase your site’s ranking in Google’s Core Web Vitals. Layout shift is generally caused by content suddenly changing dimensions, like with loading images or swapping fonts, or by new content being injected into the page by late running scripts, like with ads and pop-ups. There are more methods and other potential causes of layout shift, and because the Core Web Vitals are a new metric, new methods of optimizing sites for it are being developed every day. But for now the future is clear, we’re not putting up with layout shifts anymore.
If you need help improving your site’s CLS and Core Web Vitals scores, contact the experts at Hall today.