Reduce Cumulative Layout Shift (CLS) on Your Website for Better SEO

To tackle the issue of cumulative layout shift (CLS), it's essential to grasp the problem and its impact on user experience. CLS occurs when elements are shifted or resized unexpectedly, causing visual jarring and a poor overall impression for visitors. When first starting out, it's vital to understand that CLS is often caused by lazy loading, which can lead to unexpected changes in layout as images and other content load. To combat this, consider employing techniques like preload, preload images or resources before page loading, or use the 'use-optional-images' strategy to ensure that essential images are loaded sooner. Additionally, optimising your images by reducing their file size will also help alleviate CLS issues. By taking these initial steps, you can lay the groundwork

Getting Started

Key Considerations

When attempting to mitigate cumulative layout shift on a website, it's essential to consider the layout and structure of individual elements, particularly those with dynamic content such as images or videos. A key consideration is ensuring that these elements are loaded asynchronously, allowing the page to remain stable during loading. Additionally, using relative positioning instead of fixed positions can help prevent layout shifts caused by changes in element sizes or margins. Moreover, it's crucial to avoid using too many nested tables, as they can exacerbate layout issues, and opt for semantic HTML alternatives instead. By taking these considerations into account, developers can significantly reduce the likelihood of cumulative layout shift on their website.

Practical Steps

To mitigate cumulative layout shift on your website, it's essential to identify and resolve any layout issues caused by responsive design or other factors. First, inspect your website's content and layout using the browser developer tools, paying particular attention to elements that may be causing layout shifts when viewed on different screen sizes. Next, update any outdated scripts or plugins that could be contributing to the issue, and ensure that all images are optimised for web use with a suitable file type and compression ratio. Additionally, consider implementing a content delivery network (CDN) to reduce the load time of your website, which can also help alleviate layout shift issues. By addressing these underlying causes, you can significantly reduce the impact of cumulative layout shift on your users' experience.

Reducing Layout Shift in Practice

Cumulative Layout Shift measures how much a page's content moves around unexpectedly as it loads, which is jarring for visitors. The main culprits are images and embeds without set dimensions, ads or banners that push content down, and web fonts that swap and reflow text. The fix is to reserve space in advance: set explicit width and height on images, allocate space for late-loading elements, and manage font loading so text does not jump when the custom font arrives.

A Worked Example

A blog scores poorly on layout shift because images load without dimensions, so text keeps jumping as each image appears, and readers often tap the wrong link. Adding width and height attributes to every image reserves the correct space immediately, so the layout stays put as images fill in. The shift score moves into the good range, and the reading experience becomes far steadier.

Common Causes of Layout Shift

• Images and iframes without explicit width and height.
• Ads or banners inserted above existing content after load.
• Web fonts that swap and reflow text as they load.
• Content injected by scripts that pushes the rest of the page down.

Measuring and Confirming

Use PageSpeed Insights or the Core Web Vitals report to see your layout shift score and which pages are affected. After reserving space for images, ads and fonts, re-test to confirm the score has improved and that no new shifts have appeared. Because layout stability is part of Google's page experience signals and directly affects how comfortable a page feels, these fixes benefit both your rankings and your visitors.

As you refine your website's on-page SEO, remember to always prioritise user experience, as search engines increasingly favour sites that provide value and relevance over mere technical compliance. — Editor, EnlightenIt