Does this fix CLS issues caused by missing image dimensions?

Hello, there is no such an issue in the WordPress. That must be caused by one of your plugins, so it’s impossible for me to tell if this will help you, but easiest would be, to install this and test it ??

Quite a number of performance optimization plugins have a feature to add missing height and width dimensions. To name a few: Perfmatters (paid), Flyingpress (Paid), WP Rocket (Paid), and Optimize More! (Free on the WordPress repo). It is a widespread issue which is why so many performance plugins offer that option.

What I’m trying to say is that the missing width and height in images is not a problem in the WordPress core.

It comes from one of your plugins.

I’ve been building websites with WP for over 15 years and the only time I can remember this happening was when I tried Oxygen Builder – there were missing widths and heights because of Oxygen.

You should find out which plugin is causing this problem in your setup and then contact their support or read something on the internet about this problem in that particular plugin.

But as I said… try it… maybe this plugin will solve your problem… I don’t know, it’s impossible to predict something like that without information about where the actual problem is in your setup.

It’s not a problem with a specific plugin since numerous optimization plugins solve the problem. You could examine the code of Optimize More! to see how they fix it, but I assure you, this is not specific to just a few plugins.

• This reply was modified 3 months ago by jazir5.

Just for an explanation, I asked ChatGPT to summarize:

A WordPress optimization plugin typically addresses the Cumulative Layout Shift (CLS) issue caused by missing image dimensions through several methods:

1. Adding width and height attributes: The plugin scans your content and automatically adds width and height attributes to <img> tags that are missing these dimensions. This allows the browser to reserve the correct amount of space for images before they load.
2. CSS aspect ratio boxes: Some advanced plugins generate CSS to create aspect ratio boxes for images. This technique uses padding to maintain the image’s aspect ratio even before it loads.
3. Image resizing and scaling: Plugins may resize oversized images to fit their display size, ensuring the dimensions in the HTML match the actual displayed size. (this plugin)
4. Generating image size variations: Some plugins create multiple sizes of each uploaded image, allowing WordPress to serve the most appropriately sized version for each use case. (this plugin)
5. JavaScript fixes: In some cases, plugins use JavaScript to calculate and set image dimensions if they’re not specified in the HTML.

I would expect that the vast majority of optimization plugins use the first method

• This reply was modified 3 months ago by jazir5.