3 ms·
I wouldn't be surprised if this is because it reduced the Cumulative Layout Shift (CLS). Having larger images defined reduces the likelihood you'll have layout
by tiffanyh 5y ago
I wouldn't be surprised if this is because it reduced the Cumulative Layout Shift (CLS).
Having larger images defined reduces the likelihood you'll have layout shifts while the page is painting, which greatly impacts your overall score.
https://web.dev/vitals/ https://web.dev/vitals/
- freeone3000 5y agoDidn't the web fix this with <img width="xxx" height="xxx" /> long ago? Page authors know how big the image is going to be on page load, so renderers can just allocate the space for the image there. No need for layout shifts.
- eyelidlessness 5y agoThis is correct. Weirdly, Lighthouse will ding you if you set the dimensions in CSS rather than HTML, even if the CSS is loaded first, blocking rendering thereby preventing layout shift.
- ascorbic 5y agoI'm pretty sure it just warns you if the width and height aren't set, but it doesn't affect your score unless the layout actually shifts. You're fine if you've set the size in CSS instead
- walshemj 5y agoA lot of web designers don't do this any more
- walshemj 5y agoYeh I have been looking at a major brands site and the thing that triggers "poor" pages seems to be CLS based on what GSC is telling us.
- WillPostForFood 5y agoThe end result was that increasing the size of our thumbnail images raised our performance score by reducing our LCP score.
- vlucas 5y ago... LCP is specifically mentioned in the 2nd paragraph of the article, in addition to the conclusion quote: > The end result was that increasing the size of our thumbnail images raised our performance score by reducing our LCP score