It’s nice when thing’s stay still – especially when you’re looking at a webpage. Simply put, CLS is a measure of how still a webpage stays while a user is looking at it.
Google rates this as an important user experience factor.
Cumulative Layout Shift scoring and how to improve your site’s score is a fairly advanced optimization topic within Google’s Core Web Vitals.
They measure the entire height of a website when it first paints (aka FCP – First Contentful Paint) and then see if this changes while the page loads. The total difference between the end result, and the initial height, is called “cumulative layout shift”.
Table of Contents
Google’s Resources
You can see what Google says about it here:
What is CLS?
The measure of CLS within Core Web Vitals shows whether a page stays still when a user is looking at it. Here’s what a problem page looks like:
Watch the content layout shifting in this video.
Not only is the movement annoying, it can also affect important actions such as sales and clicks.
Where to find your CLS score
You can find your CLS score by going to PageSpeed Insights and putting your URL through their Google Developer testing tool. Note you’ll get a different score for mobile and desktop. Developers can also add Lighthouse in Chrome to Dev Tools and run this in local.
As well as getting a score, you can find specifics on which elements are adding to your CLS woes under this tab (this is new):
How to improve your score
You can improve your CLS score by making sure any dynamic elements (for example images or videos, or iframes) into which content loads, has it’s height set onload – i.e. before the actual content loads. For videos, for example, you may like to load an SVG (text) image placeholder while your content (lazy) loads.
Assistance from Silicon Dales
If you’d like assistance from Silicon Dales to improve your Core Web Vitals scores, get in touch.