How I Fixed the CLS issue on my blog (case study)

If you don’t know what does CLS mean, please read an introduction about CLS on web.dev

• Motivation
• Introduction
• CLS fixes
  • Advertisment block
  • Images
• Validation in Chrome Web Vitals
• The result of validation
  • Core Web Vitals Page
  • Page expirience Page
• Summary

Motivation

• improve page experience
• increase the stability of a content
• fix all mobile usability problems
• improve core web vitals

Introduction

I found the following issue when was on the Web Vitals Page in the Google Search Console of my blog:

Need improvement: CLS issue: more than 0.1 (mobile)

I clicked on this error and it showed me certain page and similar pages with this error:

I opened this page in mobile mode and investigated the main key factors that make the Cumulative Layout Shift:

I found the 4 main keys that create CLS issues:

1. Twitter button - It’s created dynamically using the script
2. Advertisement block - It’s created dynamically using the script
3. Image - The image has no dimensions
4. Disqus comments block - It’s created dynamically using the script

I decided to try to fix only the 2 and 3.

CLS fixes

Advertisement block

For the advertisement wrapper block, I added a min-height . When we load the page we will have a preserved place for the ad block, so it doesn’t create a shift:

I tested the effect of this action using the Lighthouse. Here is the result before adding min-height:

After the adding:

The result is obvious.

Images

My blog has images in the HTML containers. I followed the advice from web.dev optimization guide and added the following style to the images:

img {
	height: auto;
	width: 100%;
}

Validation in Chrome Web Vitals

After these changes I validated this fix in Web Vitals:

The validation started and was about 4-5 days in my case:

The result of the validation

After 5 days, I got some results.

Core Web Vitals Page

As you see there are no more pages in the Need improvements section and we got new pages in the Good URLs.

Page experience Page

In the Page experience signals I got no errors for Core Web Vitals:

The page experience chart:

Unfortunately, I didn’t screenshot this chart before the experiment started, but the values of Good Url’s were around 30%. Currently, it’s close to 70% and growing.

Summary

This post is my experience of fixing CLS. However, there are many other things we can improve. For example. we can remove Twitter Button and swap it to HTML/CSS button. Disqus comment block can be removed and changed to the link with a separated resource for comments.