Fixing the image dimensions for blog post featured images for CLS fix

[Joel]

Hello,

I’m trying to improve my CLS scores for Google’s PSI and one of the major issues I have is my images placeholders seem to be a different size to the actual images that are loaded. This causes the space reserved for the image to jump as it loads (lazy loads using Siteground Optimizer).

With images needing to be responsive for mobile / desktop, I’m not sure if I can add some CSS to make the image placeholders (or whatever it is that dictates the amount of space reserved for the image as it lazy loads) match the size that the image should come out as when it loads on mobile / desktop.

I’ve tried looking around through this support and within Sitegorund’s site, but can’t see anything that would resolve this problem. Any ideas?

Please note, I’ve turned off my featured images to avoid the issue but this is not an ideal solution.

[David]

Hi there,

the CLS metric is currently being provided for information only.
It won’t be until later this year or into 2021 when Google include it within their ranking algorithm. So don’t worry about it affecting your rank today.

Simple fix – use a better lazy-loader.
You can even do away with a plugin as WordPress 5.5 now adds the loading=lazy attribute to images. This is browser based lazy loader supported in Chrome, Edge and Firefox ( Safari to come ).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joel]

Hi, does that lazy loading feature with WordPress 5.5 fix the issue of CLS though? Otherwise changing would be pointless. I understand that CLS and CWV aren’t going to be implemented fully until 2021, but I’d still like to improve the user experience now and stop the sloppy loading of images.

Is there nothing that can be done to resolve this issue?

[David]

All of my testing with the WP 5.5 lazy loading has worked correctly without any CLS issues.
If you want to apply it yourself then use a different plugin – i find SG Optimizer has its faults and we recommend using Autoptimize instead which includes lazy loading that performs better.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joel]

Hi, thanks. I’ll give it a try and see if it’s any better.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts