Cumulative Layout Shift is the term which designates how much content on a page or website moves around while the page is loading. Ideally, you want your Cumulative Layout Shift to be zero, which means that the content on your page remains in the places it was put in. The good news is that, while CLS is relatively common – most people will have experienced adverts on the top or sides of websites taking up space the content should be in – it’s also quite easy to remedy. Multiple things can cause cumulative layout shift, but once altered, your user experience will be dramatically improved.
The most common causes of cumulative layout shift are web fonts, unstructured images and embedded ads. The most common fix for almost all of these problems is simply to specify the dimensions of the various content on your page: if you establish boundaries for the locations of each item, such as a guest ad banner above your title, then the ad can’t take up more room than specified, leaving your title unobstructed.
Many browsers automatically set aspect ratios based on the height/width attributes of an image, so it’s recommended that you include width and height attributes on media elements on your page so that browsers know how to layout your images. Recently, the popularity of responsive design has meant that stating these parameters has gone out of practice and it is often a factor in CLS. Similarly, setting dimensions on adverts and embeds on your page prevents dynamic ad sizing obstructing the actual content on your site.
Sometimes, for SME’s, the administrative hours involved in going through the HTML details of your site in order to prevent issues such as CLS aren’t viable. Outsourcing these tasks to dedicated experts can be a cost-effective and beneficial solution for the long term functioning of your website – if you’d like to hear more about how Corona IT Solutions could help you, please contact us or read about potential benefits we can bring to your website.
