Cross-platform web design can be challenging, as websites need to be accessible from various devices with different screen sizes and resolutions. WordPress has made it easier to design websites that work well across multiple platforms, but building a one-size-fits-all solution can still be complicated. One issue that users may experience when navigating a website is Cumulative Layout Shift (CLS), which occurs when a page’s visual elements suddenly change or load incorrectly. This can cause text to become larger or smaller, images to change position, or the entire page layout to shift.
So why does CLS occur, and how can we prevent it? In this article, we’ll explore what CLS is and how you can optimize your website to minimize it.
What is Cumulative Layout Shift?
The most common form of CLS is lag in the loading of images. On complex websites with many visual elements, you may notice that text loads before media elements, and the layout of the page changes when all the visual elements are finally loaded. These incidents can occur whether you’re scrolling or not.
When a web page has a high CLS score, it’s hard to determine when it has fully loaded. The more complex and media-heavy the website is, the higher the likelihood of experiencing layout shifts. However, not all complex or feature-heavy websites have high CLS scores. For example, Amazon’s online store has many widgets, images, and links, but it loads quickly without any perceivable shifts.
What Causes Cumulative Layout Shift?
CLS tends to occur because web browsers load elements sequentially at different times. Additionally, media elements on your website may have unknown properties, such as dimensions. If you don’t specify the width or height of a media element (such as an image), your web browser won’t know how much space to allocate until the web page loads completely. This can cause a drastic layout shift. Inefficient loading is the primary reason for most CLS.
It’s important to note that even if you don’t notice the layout shifting in real-time, it doesn’t necessarily mean there isn’t any shifting occurring. Web browsers often cache website data, so it’s easier to load web pages when you revisit them. Measuring the CLS score is the best way to determine if your website undergoes substantial layout shifting.
How to Measure Your Website’s CLS Score
The CLS score denotes the number of layout shifts a web page experiences throughout its lifespan. We can derive the CLS score from what is known as a session window. A session window describes the number of layout shifts that occur within a five-second interval. To calculate the CLS score, we need to multiply the distance fraction by the impact fraction:
CLS Score = Distance Fraction x Impact Fraction
A CLS score of 0.10 and below (0.0 – 0.10) is great. A CLS score above 0.10 but below 0.25 (0.10 -0.25) is moderate and requires improvement, while a CLS score above 0.25 (0.25 <) is poor.
There are many online (and offline) tools that can calculate the CLS score for you. Currently, the most popular way to measure your web page’s CLS is through Google’s PageSpeed Insights. It allows you to ascertain your website’s user experience statistics for both the mobile and desktop iterations.
How to Optimize CLS
The best way to see which elements are causing your high CLS score is to use the Google Web Vitals CLS debugger. It shows you a GIF of all the shifting features on your website. Ads and media files are the most common culprits for high CLS scores. Other causes may include fonts, asynchronous CSS, animations, and Iframes. To improve your CLS score, you’ll have to optimize these elements.
Ensuring that your website has a respectable CLS is as important as ensuring that it has strong local SEO and relevant content. Google’s search engine tends to give preference to websites that provide a great user experience and are well-optimized.
To improve your site’s CLS score, you can take the following steps:
1. Add dimension properties to all media files
If you upload media files with unknown properties, it will increase the risk of layout shift because your web browser will need to figure out the size of your image and determine the layout orientation after loading. By uploading media files with missing size properties, you’ve placed too much work in the web browser’s hands. You must add the height and width properties for every visual media file you upload.
2. Ensure fonts are loaded locally
Text must remain visible during font loading. The first step to achieving this is to ensure that fonts are loaded locally instead of being pulled from third-party font websites. If you find that your fonts are being pulled from a third-party website, you can use a plugin such as OMGF to host them locally and load them faster.
3. Avoid FOIT and FOUT
Flash of invisible text (FOIT) occurs when you fail to specify a fallback font. During flash of unstyled text (FOUT), you’ll be presented with the web browser’s default fallback font until it can load your specified font. To fix this, you can add the property font-display: swap.
4. Preload fonts
To ensure you’re hosting fonts locally, you can then preload your fonts with plugins like:
5. Disable CSS delivery optimization
If you’re using WP Rocket to optimize CSS delivery or loading CSS asynchronously with LiteSpeed Cache, it may cause a flash of unstyled content (FOUC). If you want to improve your CLS score, we recommend disabling these options in their respective plugins. Alternatively, you can set what is known as a fallback critical CSS.
6. Disable animations
If you are using animations, we recommend that you disable them for the mobile version of your website because animations can stymie your website’s loading times. If you insist on having animations for your website, we suggest using the CSS transform and translate options.
The best way to eliminate most layout shift is by modifying how your web page is loaded. In turn, you can increase your WordPress site’s speed and efficiency. As always, it’s about improving the user experience. The more responsive your website is, the greater the likelihood of users bookmarking it and revisiting it.