Layout shift is the most fixable Core Web Vital. The causes are well understood, the fixes are mostly a few lines of HTML or CSS, and the improvement is immediately visible to visitors. Work through this checklist in order.
1. Find what is shifting
Before changing anything, find the culprits. In Chrome DevTools, open the Performance panel, record a page load, and look for the Layout Shifts track. Each red marker points to the element that moved.
2. Give every image dimensions
Images without width and height attributes take up zero space until they load, then push everything below them down. Adding the attributes lets the browser reserve the right space from the start, even for responsive images.
<img src="/hero.webp" width="1200" height="630" alt="Product dashboard" style="width:100%;height:auto">3. Reserve space for embeds and ads
Videos, maps, social embeds, and ad slots often load last and push content around. Wrap them in a container with a fixed aspect ratio or minimum height so the space exists before the content does.
.embed {
aspect-ratio: 16 / 9;
width: 100%;
}
.ad-slot {
min-height: 250px;
}4. Stop web fonts from reflowing text
When a custom font replaces the fallback font, differences in letter width can reflow entire paragraphs. Preload your main font file and use a size-adjusted fallback so the swap is nearly invisible.
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
}
body {
font-family: "Inter", "Inter Fallback", sans-serif;
}5. Never insert content above existing content
Cookie banners, promo bars, and late-loading notices that push the page down are a major source of shifts. Overlay them instead, or reserve their space in the initial HTML.
Target
LightLoader handles steps two through four automatically by measuring media and reserving space before it loads. If you would rather fix things by hand, this checklist covers the vast majority of real-world layout shift.