Have you ever been reading a page online and suddenly the page moves by itself and you lose your place? You might not realise that CLS is actually the name for this phenomenon. For example, I can’t tell you the amount of times I’ve clicked onto Instagram, saw a post I liked and by the time I went to like the picture, it had moved. Before you know it I’m liking something completely random or I’ve accidentally started playing a video (loudly) in public. 

CLS is how much a website “moves” as it loads in particular elements (like images, fonts, etc.) on the page. Google created the CLS metric in order to objectively measure this where the lower the score, the better the CLS.

• Great score: Less than 0.1
• Needs improvement: Between 0.1 and 0.25
• Poor score: More than 0.25

What problems could this cause and how do I identify them?

The first problem (like I mentioned above) is that it can be extremely annoying. Often it’s a pain-point from a user’s perspective as they could be about to click a link or a button, then a banner is loaded above the link/button which pushes the button down. This may mean they click an entirely different thing, possibly taking them off the page completely. 

This may cause more issues than simply a user clicking off the page. Frustrations like this can often be the reason why a user decides to leave the website completely and not convert.

Another problem that CLS causes is that it is now an important ranking factor for Google Lighthouse. This comes under the ‘Performance’ category and could affect your overall score. However, this score may not be completely accurate as Lighthouse only calculates the initial load CLS. Lazy Loaded images for example could cause issues with CLS if you aren’t careful, as you may not see the issue until you scroll further down the webpage.

The good news is that because CLS is a very visual problem, although we can use the Google Lighthouse score as a baseline, it is quite easy for us to measure any issues ourselves simply by completing a user test throughout a page.

What are the causes of CLS?

Images without a specific width and height is normally the thing that “moves” the site around the most. The browser doesn’t know how much room it needs to leave for the images as it is downloaded, so once the image is downloaded it “pops” in. Ads with no size specified can also cause CLS, as well as the loading of particular web fonts.

How can you fix CLS?

2 silver bullets to combat CLS are:

• Ensure you have width and height attributes set on your imagers. This provides a place that is reserved for the image to load into as the browser is downloading it, rather than a random image without a set height pushing its way through to the page.
• Minimise the use of animations that don’t benefit the user journey. If the animations are guiding the user to the next section of the page, then great. These are often anticipated by the user and will not create the same jarring sensation compared to a more random animation. This will also benefit your Accessibility score in Google Lighthouse.

Cleaning up your website will lead to an overall better user experience. It can be easy to overlook small issues like this, but they can ultimately cause the biggest problems. If you want to improve the UX of your website, get in touch with us today.