google-search-consoleclscore-web-vitalshubspot-cms

How to reduce CLS issue: more than 0.25 (desktop)


At present,97 URLs are affected by CLS issue more than 0.25 (desktop) and 85 URLs affected by LCP issue: longer than 4s (mobile) on our website.

Website - www.sopact.com to look into it.

How can we fix these issues?

Thank you in advance.


Solution

  • Run some of the affected pages in Page Speed Insights. Select desktop as that is your biggest problem area. The tool has a "Show audits relevant to" option where you can select CLS. The report will then show only issues related to causing Layout Shifts on desktop devices.

    Expand each issue to get more details on what is causing the issue and sometimes what to do to fix it.

    If you want to dig deeper the Chrome browsers Performance tool can provide a lot of details. It also lets you throttle your browser so you can more easily see the layout shifts happening.

    If you enable screenshots you can hover along the screenshot row to see how the page changes as it loads. Make sure you start hovering at the point the new page is loading as the initial part shows the previous page before it is replaced.

    I have the feeling in your case you have elements that are off screen expanding your main div as they load, and causing it to shift. The Page Speed Insights lists some element that could be adjusted so that they don't expand the div as the load. e.g. define their height in advance.