CLS issue: more than 0.1 (desktop)

[neildt]

Our website is showing in Google Webmaster Console, that all of our pages have the issue "CLS issue: more than 0.1 (desktop)".  There are no reports of the same problem for these same URLS on mobile.

We've run a few CLS tools and saw

But we can't see what is triggering this layout shift.  Can anyone offer any insight?

[nvchien]

Hi @neildt 

In Chrome browser, you can go to Inspect > Network tab , tick "Disable cache" and choose "Slow 3G" to observe the problem more clearly.

I think that is issue with the image (the layout is shifted after images loading)

[neildt]

I used https://gtmetrix.com/reports/www.atopalm.co.uk/Tuwn6mxH/#video and you can see that there is a big gap before the page is loading

But I'm not sure what the cause of this is.  Can you offer any insight?

[nvchien]

Hi @neildt,

I'm not sure, but we need to observe to debug before knowing the real cause of the problem.

With the gap between heading and body, I'm assuming the problem is with the style of the body tag

body {
  display: grid;
  ....

you can try updating it to display:block; and check it again.

[neildt]

Tried changing to display:block; but still the same.