[Support request] New large CLS in desktop mode

[Henry Bowman]

Google search console on Sept 1st found a new CLS issue on our desktop version only. This seems to be stemming from the lastest or second to latest update on the generate press theme. We have tried to play with some of the new stuff to fix the error, but to date we can not figure out what is causing this one issue.

Agg. CLS 0.25
Cumulative Layout Shift 1.882

[David]

Hi there,

can you provide a link to your site so we can see what the issue is

[Henry Bowman]

sure

[Tom]

Hi there,

My guess is that image at the top lazy loading is causing the issue.

Your lazy loading plugin should have the ability to ignore certain images if set that way – can you try making it so that image (or any image above the fold) is ignored?

[Henry Bowman]

well yes we were looking at the headed background as well. We are using Rocket and it’s had updates every other day for weeks. We have had the same background image for over a year, with no modifications on the customizer.
I know we can adjust the lazy load on the page, but I’m not sure if we can single out one image.

[Henry Bowman]

Yes currently the problem is that the image is on every page of the site because it’s the background header typically only edited in the Generate press customizer, which WP-Rocket is not part of.

[David]

Hi there,

looking at the page speed insight report under the Avoid large layout shifts – all elements listed are the Woocommerce Blocks.

To see whats going on with them, open the page in Chrome, right click inspect to open browser developer tools.
Go to Network Tab – change it from Online to Slow 3G.
Refresh the page you will see when the page first loads there is a much large space then required that gets filled later by the Woo blocks.

This looks to be related to the lazyloader – its miscalculating the image sizes. You may want to ask WP Rocket what can be done to resolve that.

[Henry Bowman]

Well a few weeks ago we ditched the sliders because they were wrecking our mobile score and we replaced them with the product blocks. we just turned off the lazy load function site wide and our score is in the 99% for mobile and desktop, BUT the CLS stat is still flagging an error in search console and in page speed insights even though our over all score is near perfect.

[David]

Can you disable the Critical CSS option in WP Rocket.

[Henry Bowman]

They don’t have a way to do that listed. Of course our overall score for mobile and desktop has never been this good, so we hate to loose that.
IS there maybe a way to set the header background size differently so it doesn’t cause the CLS?

[David]

The main issue is NOT the Header its the resizing of the Woo Blocks.
Critical CSS is an option explained here:

https://docs.wp-rocket.me/article/1266-optimize-css-delivery

[Henry Bowman]

down the rabbit hole we go…lol Turning off the Optimize CSS delivery does help the CLS but it then creates slower First Contentful Paint (FCP), Largest Contentful Paint.

But what is more interesting is that on many of the other pages being flagged for the CLS, other than the home page, for example single product pages, there are no woo blocks and they still have the poor CLS speed

[David]

Yeah i really wish optimization plugins stopped overselling one click features. Critical CSS is not something that can be ‘auto’ added it really is a nightmare.

On that note – i am still seeing Critical CSS on that Product. Try clearing caches.

[Henry Bowman]

Yes, we re-enabled the critical CSS site wide, but the good news is that you can disable it per page, individually. We cleared the cache on that product page and disabled the Critical CSS. The page speed insights however did not improve much that we could see.

[David]

Well there is still significant CLS on the Woo single product related to the Product carousel thumbnails being loaded after the first content paint. I think it may be best you talk with WP Rocket support as something in its settings thats deferring or combining codes is messing stuff up.

[Author]

Posts