[Support request] Leo’s Block Element Page Hero Demo – CLS/LCP issue

[Scott]

Hey guys!

I implemented the design in Leo’s Video on Block Element Page Hero and it created a few Core Web Vitals problems that I hope we can tweak – love the design!

I am getting CLS on mobile and desktop and it is flagging the entire “gb-grid-wrapper” as the problem on PSI.

Also, on mobile, I am getting a high LCP because of the background image. Because it’s a background image, I can’t find a class to exclude it from lazy loading and it isn’t being converted to a webp like the other images.

Any suggestions or tweaks I should implement?

[David]

Hi there,

disable the Optimized CSS delivery option in WP Rocket, its probably the number one cause of CLS issues we see. And then retest the site.

[Scott]

Thanks David – that was a very quick fix to the CLS problem… It’s fixed!

Any suggestions for the LCP issue from the dynamic featured image?

[David]

The image is only around 50kb – loading a more compressed file may be help. When you set the Background Image on the Container Block there is an option to change the Image Size – not sure what you have it set to but maybe Large or Medium-large could cut down its size without too much loss of quality.

Otherwise you will could remove the image on mobile with some CSS – as its pretty much covered with text on small devices. Add this CSS:

@media(max-width: 420px) {
    .remove-bg-image.gb-container {
        background-image: none;
    }
}

Then select the Container Block with the bg and in Advanced > Additional CSS Class(es) add: remove-bg-image

Otherwise you will need to look upstream and try reducing the render blocking CSS files and JS. In WP Rocket you can still enable some to the combine/minification just avoid the Optimized CSS Delivery.

Other opportunities is to defer any Analytics Javascruipts.

[Scott]

Thanks for the suggestions – green lights all the way now – thanks so much!

[David]

Glad to be of help

[Author]

Posts