Assuming you’ve read up on the Google Page Experience update and analyzed your website using the PageSpeed Insights tool, you might ask yourself, “How do I improve Cumulative Layout Shift?”. In this simple guide, we will discuss what Cumulative Layout Shift (CLS) is, what causes it, and what you can do to improve your website’s user experience.
What is Cumulative Layout Shift (CLS)?
CLS is instability in a page’s content that causes elements on the page to readjust or resize in order to fit the viewport. If you’ve ever been reading an article and lost your place because the page shifted unexpectedly, then you know how frustrating the experience can be. Google wants to set a new standard when it comes to user experience, and as the leading search provider, it has the power to do just that.
What Causes CLS?
While all three of the core web vitals measured by Google are related, and working to improve any one of them will likely improve the other, here are a few examples of common ailments specific to CLS:
- External Web Fonts
- Inline CSS
- Images without set dimensions
- Database queries and other actions that require a response
Why are external web fonts bad?
It never ceases to amaze me how many website designers will include 5-10 different fonts on a project without ever thinking about the impact on performance. While different font may give your website a unique feeling, it is important to ensure that they are actually providing value when it comes to the customer journey. Some fonts cause such a heavy load on the browser’s main thread that removing them can improve the PageSpeed Insights score by more than 10 points overall when switched to a native font.
Other than the obvious page speed drawbacks, there are a few specific use cases that cause noticeable CLS. The most common is using a fallback font with the “font-display” property. A fallback font is a native font that is used in the event the page content is rendered before your fancy fonts have had the necessary time to download. In most cases, once the external font is finished downloading and the main thread is available the browser will quickly swap out the native font with the external one. While using a fallback font can reduce the overall time it takes for your website to load and prevents external fonts from blocking the main thread in critical seconds, it may also cause an unexpected layout shift. Instead, if you refuse to use native fonts, try using <link rel=preload> to serve assets to the browser before it even starts loading the page. Preload basically says “Hey you’re going to need this” to the browser instead of the browser parsing data until it finds the CSS selector that tells it the fonts are needed.
Why is Inline CSS bad for CLS?
Inline CSS is styling used within the HTML content, rather than loading it from a stylesheet. Inlining “above-the-fold” CSS is a common practice to improve a website’s First Contentful Paint (FCP) and Largest Contentful Paint (LCP). While this can greatly improve the rendering speed of content within the viewport, it can also cause the layout to shift once the full stylesheet(s) are executed.
Setting Image Dimensions to Improve CLS
When images do not have set dimensions, the browser doesn’t know how much space to save when rendering the rest of the content. This is especially likely with large high-resolution images that have longer loading times. By setting exact width: and height: properties, the browser will save the correct amount of space, reducing the chance of a layout shift.
In the interest of not duplicating content from the FID and LCP guides, I’ll end with this tool. You can gain more insight into the cause of your website’s CLS in the Chrome Dev Tools window. Right-click on your website, click ‘inspect’ and navigate to the Performance tab. Viewing the layout shift summary will highlight the areas on the page affected by an unexpected layout shift.
