Archived topic
Leo's Block Element Page Hero Demo - CLS/LCP issue
5 replies · Started by Scott on May 2, 2021
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?
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.
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?
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.
Thanks for the suggestions - green lights all the way now - thanks so much!
Glad to be of help
