CLS image dimensions
web.dev lists the most common causes of poor CLS as images without dimensions, ads, embeds and iframes without dimensions, dynamically injected content, and web fonts. Declaring width and height (or CSS aspect-ratio) on images, reserving space for ad slots and embeds with min-height or aspect-ratio, placing late content lower in the viewport, and tuning font fallbacks (font-display: optional, size-adjust) remove those shifts.
Sources
- 1
AGrade A: official documentation or a standard. A grade describes the provenance of the sources above; it is not a probability that a change will work. The effect basis says how the size of the effect is known: measured by a study, taken from an industry report, only documented without a size, or not quantified.
Put this evidence to work
Related entries
More in Performance, or search the whole base.
All Performance entries