It appears that certain images on the site lack specified width and height attributes in their tags.
Why is this important?
Cumulative Layout Shift (CLS) is a critical metric within Core Web Vitals that influences Google's assessment of 'page experience.' CLS measures the degree of unexpected layout movement during page loading.
Without defined width and height for images, browsers are unable to determine the appropriate space to reserve for them. The result is a visual glitch, a 'jump,' as images trigger unpredictable layout adjustments as they load.
What does the Optimization check?
The Optimization is activated for each internal URL that features image elements lacking specified width and height attributes.
How do you resolve this issue?
Add 'width' and 'height' attributes to your <img> tags to prevent layout shifting. For a responsive design, implement the 'srcset' attribute, defining available images and their dimensions so browsers can allocate space efficiently while preserving the image's aspect ratio.
<img width="800" height="800" src="example-800.jpg" srcset="example-800.jpg 800w, example-1600.jpg 1600w, example-2400.jpg 2400w" alt="Descriptive image text"/>
Comments