Ad

CLS Issue: More Than 0.25 (mobile)

- 1 answer

Both pagespeed and lighhouse(even in slow 3g) showing good results as attached. However i am still getting alert of webmaster.

CLS issue: more than 0.25 (mobile)

URL : https://gpuzzles.com/mind-teasers/astronauts-key/

PAGE-INSIGHT:

enter image description here


LIGHTHOUSEenter image description here

This is kind of frustating now and not sure what to do .

Ad

Answer

CLS can be a difficult metric to debug using lab tools like Lighthouse because they only evaluate the initial viewport by default. In other words, they don't behave like a real user. When a real user lands on a page, they scroll around and click on things.

So when trying to debug Core Web Vitals issues, especially for CLS, I'd recommend visiting the page yourself with a diagnostic tool like the Web Vitals extension for Chrome enabled.

I visited the page and after just a second of using it I was able to incur a substantial layout shift (0.484) by scrolling the page down:

enter image description here

It seems like what's happening is that the ad below "category : humour" is injected into the page, and all of the contents below it shift down.

enter image description here

To reproduce this, I used WebPageTest to simulate the real-user behavior of scrolling the page down.

  1. Go to webpagetest.org
  2. Enter your URL
  3. Go to the "Advanced" tab of the Advanced Settings section
  4. Under "Inject Script", enter this code to scroll the page by 500px:
window.addEventListener('DOMContentLoaded', function() {
  window.scrollBy(0, 500);
});
  1. Start the test

You can see the results here.

enter image description here

enter image description here

The filmstrip view above and video demonstrate the problem. After the page partially loads and is scrolled down at the 8 second mark, we can see that the ad asynchronously loads and pushes the content below it down, incurring a layout shift with a score of 0.409, enough to cause the page experience to be evaluated as "poor".

If most of your users behave like this by scrolling down shortly after the page loads, that could be why your 75th percentile CLS score is in the "poor" category.

To fix these kinds of layout shifts caused by ads, refer to the suggestions at https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions:

Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page.

Ad
source: stackoverflow.com
Ad