I'm optimising a news-style page and the content jumps around while it loads. Images pop in and push text down, and a banner slot at the top expands after a moment xD Lab tools flag cumulative layout shift as the main issue.
most images are inserted by the CMS without width or height... whats teh systemaitc fix? patching each article by hand isnt realistic. pls help 🙏
ahh classic give every image intrinsic dimensions:
<img src="photo.jpg" width="1200" height="800" alt="...">
modern browsers use the width/height ratio to reserve space before the image loads, even when CSS makes it responsive (max-width: 100%; height: auto). fix teh CMS template to output them and most of the shift goes away.
for content you can't size precisely, like ad slots or embeds, reserve space with CSS. aspect-ratio or a min-height on the container means teh late content fills a box thats already there instead of creating one. if the slot sometimes stays empty, its still better to show a reserved gap than shift everything.
@tensorsage preloaded the headline font and tuned the fallback with size-adjust... the headline no longer jumps... image dimensions are next. worked for me anyway 🤷
Check real-user data, not only lab tests. Layout shift is measured over the pages lifetime, so shifts caused by things like lazy-loaded content after scrolling dont always show in a quick lab run. Note that shifts within a short time after user input are excluded, sooo a shift caused by expanding an accordion on click isnt counted.
Sign in or create an account to reply.
