1

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.

Richa
  • 21
  • 1
  • 5
  • 1
    Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Oct 26 '21 at 13:02
  • As above split your question to one of the problems, CSL or LCP. And provide url examples of the pages that are causing your concern. – Tony McCreath Oct 27 '21 at 11:58
  • CLS URL - https://www.sopact.com/monitoring-and-evaluation https://www.sopact.com/impact-measurement @TonyMcCreath – Richa Oct 29 '21 at 16:39
  • I voted to close this question because the code with the problem is linked externally. Please [edit] this question to include the [minimal code that exhibits the issue](/help/minimal-reproducible-example) directly in your question. [Code linked externally may not be permanently available, and may not be licensed such that it can be used in answers](//meta.stackoverflow.com/questions/254428/). – Stephen Ostermiller Sep 20 '22 at 12:22
  • [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/q/254428) – Adriaan Sep 20 '22 at 12:28

2 Answers2

1

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.

Tony McCreath
  • 2,882
  • 1
  • 14
  • 21
0

There is a page test tool which tells you more about your CLS rating: https://www.webpagetest.org/

I am not sure if this tool is somehow related to Google, but in my case it outputs the same CLS rating.

If you have a close look you will recognize that this tool is not able to do parallel loading. And I assume this is same for the module which Search Console uses. Real world browsers load files in parallel which shortens loading times drastically. This one does not - so you get loading times of several seconds for bigger pages. Well, fonts are loaded after CSS and images. In my case the delayed loading of fonts (several seconds later) caused the problem.

To improve the loading time in a sequential environment you can use certain preload technologies.

<link rel="preload" href="/fonts/anyfont.woff2" as="font" crossorigin />

The tag above will advice the browser (and Google's tool) to load the font upfront. When it is loaded in your CSS later, it will already be available in the cache.

ESP32
  • 8,089
  • 2
  • 40
  • 61