How to improve CLS
Unexpected layout shifts can be disruptive for users. Picture yourself engrossed in an article, only to have elements unexpectedly rearrange, disrupting your reading flow and forcing you to locate your position again. This is a frequent occurrence on the web, whether you’re perusing news articles or attempting to interact with buttons like ‘Search’ or ‘Add to Cart’. These incidents are visually unsettling and cause frustration. They commonly occur when visible elements are compelled to shift due to the sudden addition or resizing of another element on the page.
What is Cumulative Layout Shift (CLS) ?
Cumulative Layout Shift (CLS) is a metric that quantifies the visual stability of a webpage by measuring the cumulative impact of unexpected layout shifts of its elements during the loading process. In simpler terms, CLS gauges how much the content on a webpage moves around, potentially causing a disruptive user experience. It is one of the Core Web Vitals, a set of key performance indicators that Google considers crucial for assessing the overall user experience on a website. A lower CLS score indicates a more stable and user-friendly layout, while a higher score suggests a higher likelihood of unexpected shifts, which can be distracting and frustrating for users.
How to improve your Cumulative Layout Shift (CLS) score
Improving your Cumulative Layout Shift (CLS) score involves addressing issues that cause unexpected layout shifts on your website. Here are some strategies to enhance your CLS score:
1. Size Attributes for Images and Videos
Ensure that images and videos have specified dimensions using width and height attributes in HTML. This helps the browser allocate the necessary space during page loading, preventing sudden shifts when the content is rendered.2. Set Size for Ads and Embeds
Similar to images and videos, specify dimensions for ad spaces and embedded content. This allows the browser to reserve space, minimizing the chances of abrupt layout shifts as these elements load.3. Avoid Dynamically Injected Content
Be cautious with dynamically injected content, especially above existing content. Loading additional elements dynamically can cause unexpected shifts. If possible, reserve space for such content to maintain layout stability.4. Preload Web Fonts
Ensure that web fonts are preloaded to prevent text from appearing in default fonts before loading the intended font. This helps maintain the layout consistency, reducing shifts caused by font loading delays.5. Use CSS Transitions for Animations
If your website includes animations, implement CSS transitions instead of abrupt changes. This provides a smoother visual experience for users and reduces the likelihood of unexpected layout shifts.6. Optimize Third-Party Scripts
Review and optimize third-party scripts that may impact your site’s layout. Limit the use of scripts that dynamically modify the layout, and consider loading them asynchronously to minimize interference with the main content.7. Monitor and Test
Regularly monitor your website’s layout shifts using tools like Google PageSpeed Insights or Lighthouse. Test your pages on various devices and browsers to identify and address any potential CLS issues.8. Utilize the ‘loading’ Attribute
Employ the ‘loading’ attribute for images and iframes to control when they load. This attribute can be set to ‘lazy’ to defer loading until the content is near the viewport, reducing the chances of sudden layout shifts.By implementing these strategies, you can enhance the visual stability of your website and improve its Cumulative Layout Shift score, providing a more positive and user-friendly experience.