Cumulative Layout Shift (CLS) measures how much content unexpectedly shifts while a page is loading. A high CLS is usually caused by images without fixed dimensions, slow-loading fonts, dynamically loaded ads or banners, and scripts that push content upward in the page. By reserving dimensions in advance, loading fonts smartly, and controlling dynamic elements, you can structurally lower CLS and prevent frustrating clicks on the wrong element.
What is CLS and why does it matter
CLS is one of the Core Web Vitals used by Google to assess a website’s user experience. It indicates how stable a page’s visual display is while it loads. If a button shifts right at the moment a visitor wants to click it, this counts as a negative experience. Besides its influence on search results, a low CLS mainly results in a more pleasant, reliable website where visitors don’t accidentally click the wrong link.
Common causes of layout shifts
The most common causes of a high CLS are easy to recognize:
- Images and videos without width and height attributes, causing the browser to reserve space only after loading.
- Web fonts that visibly swap with a system font (flash or invisible text), causing text lines to change width.
- Ads, banners, or embeds that load without reserved space.
- Content inserted above existing content via JavaScript, such as cookie notices or alerts.
- Animations that move other elements instead of only using transform.
Step by step to improve CLS
Give images and videos fixed dimensions
Always add width and height attributes to images and videos, or use CSS aspect-ratio. This way the browser immediately reserves the right space, even before the file has loaded.
Load fonts smartly
Use font-display: swap or optional in your CSS, and consider hosting critical fonts locally instead of via an external font network. This prevents large shifts when the font switches.
Reserve space for ads and embeds
Give containers for ads, iframes, and embeds a fixed minimum height in CSS, so they don’t push other content away once they load.
Place dynamic content deliberately
Preferably show notices, pop-ups, or cookie banners as an overlay instead of inserting them at the top of the page. This way they won’t push existing content downward.
Use transform for animations
Animate elements with CSS transform and opacity instead of properties like top, left, or margin, so the layout of other elements doesn’t change.
Measuring and monitoring CLS
Regularly check whether your improvements are having an effect. Browser tools with performance measurements show per page which elements are responsible for layout shifts, so you can make targeted adjustments. Note that caching and server performance also influence how quickly content loads: a slow server increases the chance that images or fonts arrive later and still cause shifting. At Tandata, web hosting runs on NVMe storage with LiteSpeed servers, ensuring fast response times; via Plesk you can also easily find caching and SSL settings that contribute to a more stable loading experience. For more background on server settings and optimization, check out the knowledge base.
Frequently Asked Questions
What is a good CLS score?
A low score, close to zero, means your page barely shifts during loading. Aim for as few unexpected shifts as possible in the first seconds after loading.
Does a cookie banner always cause CLS?
Only if the banner pushes existing content downward. If you show the banner as an overlay on top of the page, it has no effect on the layout of the rest of the content.
Does a faster server help against CLS?
Yes, indirectly. A faster server ensures images, fonts, and scripts arrive more quickly, reducing the chance that content still shifts later.
Do I need to fix CLS for every page separately?
Most causes, such as missing image dimensions or incorrectly loaded fonts, often occur site-wide. Fix them in a theme or template, and you’ll immediately improve multiple pages at once.
Conclusion
You can improve CLS by giving images and videos fixed dimensions, loading fonts smartly, reserving space for dynamic content, and performing animations with transform. Combine these adjustments with a fast, reliable hosting environment for the best result.