0

I've read all the documentation regarding CLS and what causes websites to have CLS. I'm having a tough time figuring out what is causing the CLS for the users. And how to stop the CLS for those given users.

I've taken the correct measures to ensure that iframes have a height and width, ensure that the space is saved for the ads, to ensure that there isn't any shift in content.

An example is this page where there is only static content: https://www.nookfriends.com/cookie-policy

When I run the pagespeed insights it says in the that the field data that customers have seen CLS of 0.34 which is very high: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nookfriends.com%2Fcookie-policy&hl=en_GB

Is anyone able to help figure out what's causing the shift and how i'm able to reduce the shift?

1

First and foremost, make sure to read the Optimize CLS guide for general best practices to eliminate layout shifts.

When I run the pagespeed insights it says in the that the field data that customers have seen CLS of 0.34 which is very high: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nookfriends.com%2Fcookie-policy&hl=en_GB

PSI results for the quoted link as of April 23, 2021

Careful! The field data in PSI corresponds to the entire origin, not the specific /cookie-policy page you tested. PSI will fall back to origin-level data when there isn't enough page-level data.

Since you're the site owner, I'd recommend going into Search Console's Core Web Vitals report. That tool will help you identify which groups of pages have CWV issues and it distinguishes between desktop and mobile visitors. From there, you can tell exactly which pages are having CLS issues and drill down into the lab recommendations from PSI.

I'd also suggest using your site with the Web Vitals extension installed, so you can see in real-time how your CWV metrics change in response to user interactions like scrolling/clicking. This is helpful because tools like Lighthouse in PSI don't necessarily know how to behave like a real user, so they have a hard time replicating realistic CWV values.

2
  • Thanks Rick, I added the Web Vital extension very useful and I didn't know about it. According to the extension I have 0 CLS on both desktop and mobile but occasionally Insights reports CLS to me which has had me running around in circles for over a week now. – MitchellK Apr 24 at 7:48
  • 1
    Thank you Rick! That has helped a lot with finding out where the issue lies. I noticed that our top 3 pages have the shift and this is affecting the whole website - dragging our CLS down for the whole website. – Nook Friends Apr 24 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy