Cumulative Layout Shift issue

Hi there,

Looks like a 2 fold issue.
The gravatars and the images in the Ultp HTML have no width and height attributes. And are being lazyloaded.
In addition to that the WP Rocket Critical CSS is not loading the CSS required to size them on initial load. The upshot is the browser makes space for the original image size, the image then loads and then the CSS that resizes them.

You would need to address the missing width and height attributes with the plugin developer.
And unless you can manually configure the WP Rocket Critical CSS i would recommend disabling it.

Hmmm. I have already created specific critical CSS for that page and all category pages since the default critical CSS was creating some flashing to the SVG icons at the top. And when I disable lazy loading it doesn't seem to improve.

If you open the site in Chrome, open the dev tools and set the network to slow 3g, then switch to performance view and reload to view the time line you'll see the issues.... you can see that there is a considerably larger space reserved for each image. So between the missing width/height attributes and the CSS loading order is the issue.

Right, I did what you told me, David, very revealing but still, I am not sure what exactly I am looking for, maybe you could give me some pointers. I have uploaded a video(attached) with what I have in front of me. I see the CLS on the timeline but I am not sure I can detect the image space allocation you mention, anywhere.

Hi there,

I've checked your site and also attempted to research what plugin you're using. (PostX - Gutenberg Post Grid Blocks)

I've checked how it works (it's out of our scope, I did it anyway, to help) and saw the issue David mentioned.

Its function for the image has issues w/ attributes. The text field it has for the image's height and width just crops the image and doesn't add height and width attribute.

Image width and height is crucial. Read more about it here: https://web.dev/optimize-cls/#images-without-dimensions

Now the suggestion is to attempt to fix this by asking the plugin developer if it could let you add image attributes. Another is to attempt to load the CSS for the img element sizing earlier so it doesn't shift the contents below/beside it because if it loads a bit later, it will push the contents beside it depending on the CSS sizing specified.

Again, we can't control how that third-party plugin functions. The best we can do is to point you to the issue at hand.

Appreciate the pointers, thank you!

No problem. Glad to be of any help. :)