CLS on Woo Commerce Shop

Hi there,

lets deal with the shop archives first.
Couple of things:

1. The lazy loader is not reserving enough space to for the Images, so on load the images are occupying more space and forcing the content down. Temporarily disable the lazy loader to test this.

2. Slight improvement for loading the mobile CSS - add this PHP Snippet:

add_action( 'after_setup_theme', function() {
    remove_action( 'wp_head', 'generate_add_viewport' ); 
    add_action( 'wp_head', 'generate_add_viewport', 1 ); 
} );

Hello David! I've added the code but the CLS is still present on https://www.mooksdesign.co.uk/shop/

Oddly it's slightly improved the product pages that have a flex-slider —

https://www.mooksdesign.co.uk/shop/memorable-year-cassette-mixtape-art/

It's improved the LCP — but not the FCP.

Just focusing on the shop page, so the snippet i provided fixed one of the issues. But you still have the issue with the lazyloading. What the following performance test that shows the site being loaded:

https://www.screencast.com/t/1HONOuG8

You see on initial paint, there are no images, and theres no space been reserved for them, when the images are loaded everything gets shunted down to accommodate them.

And the same is happening ( sometimes ) with the single product page.

Not sure what lazyloader you're using but its not adding responsive placeholders to accommodate the images

Hi David — thanks so much for this.

I'm using the lazy loader that's integral to WP Rocket. But my images are being served up by ShortPixel — I wondered if that was causing a clash?

It could be shortpixel as i haven't seen the issue before with WP Rocket.

OK — so I've turned off short pixel but it doesn't seem to have made much of an impact. Which makes me wonder why I need it at all!! I literally can't see anything else that could be causing the clash.

Maybe I will turn off lazy load in WP rocket and try a separate plug-in... it's driving me bananas!! Need to fix it before I lose the plot lol!!!

Hmmm... checking the site no without shortpixel and disabling WP Rocket using a query string.
I notice the Shop images do not have any width height attributes which isn't normal. And would create the issue.

Are you using any woo or other image related plugins or custom functions ?

No — nothing like that. Here's a list of all the plug-ins I'm using —

https://www.screencast.com/t/3VzoNCR3E

What do you have in the Code Snippets ?

I have two — this one:

add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'generate-fonts' );
} );

and this:

add_action( 'after_setup_theme', function() {
remove_action( 'wp_head', 'generate_add_viewport' );
add_action( 'wp_head', 'generate_add_viewport', 1 );
} );

Very odd that the width/height attributes have been stripped.
If you go to media attachments and select one of your shop page images, in the sidebar details does it show the image has a width and height value?

Hi David — yes — they do. here's an example:

https://www.screencast.com/t/jRRJxJmuZs

I just checked the site again... and those missing attributes are back! Maybe a server caching issue after disabling shortpixel (?!!?).

So that points the finger at the Lazy Loading option. You may want to check with WP Rocket with whats going on there. They should be inserting a correct sized placeholder for the image....

Thanks David — will speak to them and report back! :)