I want to improve my website’s performance. PageSpeed Insights is giving me a score of 8. Does anyone have any suggestions or guidelines on how I can further improve my website’s loading speed?
I found that my CLS score is quite high. PageSpeed recommends adding width and height attributes to image tags, but my website is responsive. How can I follow PageSpeed’s recommendation without affecting my site’s layout?
It should not be a problem using the width and height attributes on images, because the CSS that makes the images responsive should override those attributes when the screen is too small for the specified size.
Setting the attributes is usually a good idea, as the browser knows how much space the images need even before it loads them, meaning you can avoid layout shift as the page loads. I’m not sure it makes things any faster, but it’s better for UX if you avoid layout shift.
In my view it is slightly better to include aspect-ratio in the CSS instead but the CSS needs to be in the <head> element, or possibily inline style attribute, but not in a linked CSS file that would take time to load.
Why would using aspect-ratio be better?
in order to prevent layout shift, a browser needs to know the aspect ratio of the area to reserve for an image. It does not need to know the instrinsic size of the image. Anyway, if an image is provided by an SVG file it has no intrinsic size.
Say for example a web page has a number of images all with aspect ratio 5:4. The CSS need only be img{aspect-ratio:1.25} and there would be no need to have HTML width and height attributes for each image.
Is using HTML attributes better in any way?
Yes it’s still advised though not as straight forward as expected.
happy reading:
Optimize Cumulative Layout Shift
Responsive images
That article was written before CSS aspect-ratio became available in virtually all browsers.
Is there any reason why using CSS aspect-ratio would not work in avoiding layout shifts? (provided the CSS is in the <head> element or inline style attribute)
It was updated in 2022 when there was pretty much full support but there was less support in 2020 when it was originally written. I believe it still covers the required ground either way.
I’m only basing my observations on thing I’ve read as the last time I did any real tests was years ago 
However my understanding is that no matter what you put in your css the browsers are designed to look at the image attributes first. Once the image has loaded then the css can take over fully.
This passage from MDN seems to suggest that approach:
Once the image has loaded, the intrinsic aspect ratio of the loaded image or the value of the
aspect-ratioproperty is used rather than the aspect ratio from the attributes
I’m not sure that I’m reading that correctly though as it may mean that the css aspect ratio is used from the start.
There is a newer article from Jake Archibald which seems to suggest that either version will work but similarly to me suggests that for image elements having the attributes in the image may be a slightly better approach.
Therefore,
widthandheightattributes feel like the best fit. This means I can just author content, I don’t need to dip into inline styles.
In a lot of cases the images most likely come from a database and the attributes can be stored on each as required. If you had loads of images at different sizes then you would have to set up multiple aspect ratio rules in your css.
The honest answer is that I don’t think it’s clear cut but my preference is to have the correct width and height attributes in the image to start width. After all you are going to need to know what aspect ratio the image is anyway even if you are going to use the css version.
As usual, I think it comes down to what works best for you
The article in Smashing Weekly does not seem to have been fully updated in 2022 as indicated by this paragraph:
The CSS Working Group (CSS WG) proposed the
aspect-ratioproperty that Rachel wrote about previously. This would tackle the complexity problem (issue 2) once it becomes available . . . .
The article you found by Jake Archibald (that’s not me 
) is much more helpful but we should still bear in mind that it is one person’s view… However, I think the article should advise against use of a linked CCS stylesheet file if aspect-ratio is used. I note the article’s concluding comment:
It took a decade for us to get a real solution to this problem, but now you can avoid layout shifts using
widthandheightattributes, oraspect-ratioin CSS, whichever is most appropriate.
Getting that score up will feel great! Try using srcset for responsive images—it keeps things flexible while reducing CLS. Setting width and height in CSS can also help. And don’t forget lazy loading and image optimization! Good luck!
Try to change image format used webp instead of jpeg or png