[Resolved] Getting a CLS issue (Large Layout Shift) on the main container

[Eugene]

Hi Guys

I’m getting this CLS issue in Pagespeed.web.dev:

https://prnt.sc/XbzAS5F4FBSJ

Is this a GP issue?

[David]

Hi there,

On those page speed reports they are telling you which HTML element is being shifted.
What they don’t tell you is what is causing that element to be shifted.
As its just HTML, it itself cannot cause the shift. Its most likely a CSS optimization on your site thats causing it.

If i check the post you provided i see the page visibly shift a split second after load.
Which looks related to the Nitro CSS optimizations. Can you disable them and we can relook ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eugene]

Hi David

I’ve enabled safe mode on Nitropack so it’s only active now with params ?testnitro=1. It seems as though the issue persists.

This is a normal GB Pro page, so there isn’t any further optimisations done on the page.

[David]

So i tested the page on local developers tools and webpagetest.org, as that test is provides the same detail i can get in dev tools:

Without Nitro:

https://www.webpagetest.org/vitals.php?test=220901_AiDcAW_7AN&run=1

CLS: 0.02
This score is constant across several tests

With Nitro:

https://www.webpagetest.org/vitals.php?test=220901_BiDcH6_7FH&run=3

CLS: 0.37
This score fluctuates – thats the lowest i got. on average it was:

https://www.webpagetest.org/result/220901_BiDcDA_7GQ/

Now when I Google PSI test it – i get messed up results. 4 out of 10 tests on desktop resulted in a Network fail when checking desktop. And all other tests reported high CLS regardless of Nitro on or off. This could be Googles US servers loading a cached file.
Is it possible to completely disable Nitro and clear / disable any Page Caches on the server to eliminate that being an issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eugene]

It seems to have been a Nitropack issue

Thanks for your support in any case!

[David]

Glad to hear you found the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts