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

cls blog lighthouse chrome web vitals

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


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


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)

CLS issue: more than 0.1 (mobile) CLS UX report

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

CLS issue: more than 0.1 (mobile) certain page

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

The page with CLS issues

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

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:

Min-height for ad block

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

CLS without adding min-height

After the adding:

CLS with adding min-height

The result is obvious.


My blog has images in the HTML containers. I followed the advice from 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:

Validate Fix

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

Validate Fix

The result of the validation

After 5 days, I got some results.

Core Web Vitals Page

Good Urls

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

Good URL’s result

Page experience Page

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

Page expirience signals

The page experience chart:

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.


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.

comments powered by Disqus