Fixing CLS issues is a big deal. That's because most of your competitors won't fix CLS problems and as a result won't rank well compared to those who fix CLS problems. So let's learn to understand the real CLS problem, and then fix the CLS problem.
Want to know how to fix CLS? Your visitors too! Actually, they don't care how to fix CLS - they care that it didn't happen.
I recently fixed a bad case of CLS and documented the process. Check out my hands-on demo and explanation or continue reading below.
What is CLS ?
CLS, otherwise known as cumulative layout shift, is a measure of how much a web page shifts. Pages usually shift on load, but Google says it measures "over the entire life of the page."
Why is this important?
The higher the CLS, the worse the user experience.
It's really not fun to go to a web page and start reading the content for something else to load and pan the content. You then have to find where you read and hope the page doesn't shift anymore.
Another example is if you try to click on something and the target shifts because the page loads an additional item.
Your visitors care about "layout shifting," and as a result, so does Google. CLS is now the main ranking signal in Google's search algorithm.
Acceptable CLS Limits
A perfect CLS will result in a score of zero, meaning the page doesn't shift on load.
That's an unfair goal. Not only is it difficult to achieve, but sometimes CLS is a by-product of increased performance. For example, there is a tactic of loading the system default font first then loading the custom font after the page has finished loading. The font change causes less CLS, but delivers content to visitors faster.
Google defines acceptable standards for CLS.
Google categorizes cumulative layout shifts in three tiers: good, needs improvement, and poor.
- Good is <= .1
- Needs improvement is > .1 and <= .25
- And everything greater than .25 you need to get your shit together
How to Find CLS Issue
Step 1 - You need to use Chrome or Chromium as there is a built-in Lighthouse profiling tool
Step 2 - Go to the webpage you want to analyze
Step 3 - Right-click on the webpage and click "Inspect"
Step 4 - Navigate to the "Lighthouse" tab on the top of the drawer that opened
Step 5 - Check "Performance" and either "Mobile" or "Desktop" (whichever one you want to profile)
Step 6 - Ensure the visible website is sufficient to profile. If the drawer is taking up too much space, click the three dots in the top right of the drawer and change "Dock side" to unlock in a separate window.
Step 7 - Click "Generate report"
Step 8 - Note the Cumulative Layout Shift score
Step 9 - Click "View Original Trace"
Step 10 - Check the "Web Vitals" box to focus on these metrics
Step 11 - Find each of the "LS" that appear on the timeline. LS stands for "Layout Shift" and is marked for each point in the page load where the layout shifted around.
Step 12 - Hover over the top row and align the hover with the LS. The top row shows screenshots of the page load, and you'll see where the shifts are occurring.
Step 13 - By scrubbing back and forth, you should be able to isolate the layout shifts. Make note of them.
How to Solve CLS Issue
We've determined which tools can warn us about CLS issues, the tool to find the exact CLS issue, and finally, let's discuss how to fix CLS issues.
The primary CLS issue comes from an image loading in and displacing the content. It's like a boat dropping into the water and pushing the water out.
To fix this CLS issue, we need to create a placeholder for where the image will load into. The placeholder will then get replaced by the image, and no displacement will occur.
The following solution to CLS issues will work for images, iframes, and other content that loads in and displaces surrounding content.
You need to set a fixed width and height on the element.
Take for example an image's html:
<img src="/cat.jpg">
You'll need to make it look like the following, but with your own dimensions.
<img src="/cat.jpg" width="100%" height="450">
The image HTML loads in before the actual image which is the cause of most CLS issues.
By appending the width and height, you are setting the dimensions of the image HTML before the image loads in. Once the image loads in, it'll just take up the space reserved for it.
This method will resolve most CLS issues.