Page speed insights: DOM elements contribute most to the CLS of the page

Hi Henry,

Can you try disabling lazyload for the images? Images above the fold tend to cause CLS if it's lazyloaded.

Let us know how it goes.

I disabled the lazy load but it didn't have any effect on the score, however the website does load smoother on the mobile devices. I went into the customizer and turned off the sale badge settings. This action did of course remove the previous CLS warnings about sale badges, now only to be replaced with new CLS warnings.

5 elements found causing the CLS:
<li class="no-featured-image-padding woocommerce-text-align-left woocommerce-image-al…">
<li class="no-featured-image-padding woocommerce-text-align-left woocommerce-image-al…">
<li class="no-featured-image-padding woocommerce-text-align-left woocommerce-image-al…">
<li class="no-featured-image-padding woocommerce-text-align-left woocommerce-image-al…">

It looks like the CSS meant to display the products in fewer columns on mobile isn't loading when it should (the HTML is rendering first).

Can you try deactivating WP Rocket to see if that fixes the issue? If it does, it could be some sort of defer CSS option in WP Rocket causing it.

I did some testing with the WP-rocket plug in. Not sure if you are aware, but they literally wrote an addon plugin for people (us) that use generate press and WP-rocket called: "WP Rocket | Exclude GeneratePress/WooCommerce Files from Async CSS"

It stops sites from displaying more than 2 columns on mobile devices, without it you have to disable the CSS optimization site wide, or have 5 horizontal columns on mobile phones.

I tried multiple combinations without the add on, and turning off the Optimize CSS delivery. There is also a combine CSS files with the options to exclude, in which we have these files excluded:
/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css

I was able to get a desktop rating of 99% but can not get the mobile rating about 60% as it continues to flag a high CLS on those previously listed elements. even the desktop is getting bad CLS despite the high rating. Overall the "CLS" is the main problem site wide keeping us from getting passing grades in our product display in google search console.

I wasn't aware that they had a plugin for that - is it currently enabled on your site?

Out of curiosity, did the issue go away with WP Rocket temporarily deactivated?

One thing to try, not sure if it will work but it's something we've done in GP 3.1:

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

Does that make a difference?

Hi Tom,
Currently we have the "Optimize CSS delivery" off, so we also have that addon plugin off as well. Another thing that makes this a little different is that we have had to go behind an upgraded Sucuri firewall, CDN, & cache system. Because of this we have another WP rocket add-on which turns off the WP-Rocket "cache" function.

At the moment we are getting the best search console scores we have had all year, so I hesitate to change anything but out of curiosity, what does the CCS you mentioned do?

Hi there,

some CSS is being loaded before the Viewport has been defined in the Theme.
That PHP Snippet that Tom provided makes sure that the viewport is defined before the CSS is loaded. Which may help ensuring that the Mobile CSS gets loaded quicker.

oh ok, I see. Where should that PHP code be placed?

It can go in your Child Themes functions.php - doesn't matter where but best to place it the very end of the functions in there. Or if you're not using a child theme then use the Code Snippets plugin to add it.

More info here:
https://docs.generatepress.com/article/adding-php/

Great thank you. I added it to the bottom of the child theme's function.php

My gosh I think that fixed it. It got my CLS in the green for mobile (which has never happened) and a 80% for mobile overall and at the same time a 97% for desk top! which is a big deal....lol

Thank you for your help