Core web vitals - how to debug and improve cumulative layout shift (CLS) issues

TLDR : Check your cookie popup!

It seems everyone is talking about core web vitals at the moment, spurred on by Googles’ recent announcement that page experience (which includes core web vitals) will start influencing search ranking in May 2021.

We won’t go into detail on web vitals in this post - there is plenty of information already on the web, including from Google themselves on the excellent web.dev site.

Instead, this post will look specifically at cumulative layout shift - or CLS as it’s known. I like to think of this as the jerkiness measure of your site - the higher the number the worse the jerkiness.

Getting your CLS score is pretty easy - you can use pagespeed or lighthouse (built right into chrome). I will assume (because you are reading this post) that you have done this already AND you are not happy with your score. So - what next - how do you go about diagnosing and fixing the issue?

The reading online makes lots of great suggestions, mostly around helping the browser reserve space for elements that are late loaded (images, video etc). This is all good stuff - however - it didn’t help me and the sites I was working on.

So first off I switched to incognito mode (I wanted to simulate a fresh first-time visit to the site - for various reasons) in chrome, loaded the site and then fired up the performance tab in the chrome dev tools. This is a scary looking tab - there is a lot going on here - and you can safely ignore 98% of it (at least for now). You just need to make sure the ‘Screenshots’ tick box is ticked - then hit the little refresh icon - this will refresh the page and start profiling the page load. It’s worth pointing out that this is running locally so you can use it on your local dev sites.

This takes a few seconds and when complete you should have a lovely looking film strip of screenshots along the top - mouseover and you get a larger version. Start at the left and move rightwards - and keep your eyes open for any obvious content shifts.

I did this for 3 individual and unrelated client sites - and found the cookie popup to be the culprit in 2 of the sites - it was appearing mid-way through the load and pushing ALL the content down - fixing this took around .4 off the CLS score (which is a lot). The other site had the ENTIRE expanded mobile menu briefly rendering at the top of the page - which then disappeared (as it should) and shifted all the page content up by about 800px! Fixing this took about .5 off the CLS score.

So - the takeaway from this is probably before you spend ages fiddling with width and height attributes on your img tags, have a quick look to make sure there isn’t some low hanging fruit massively impacting your CLS.