Few browsing experiences are more aggravating than attempting to click a button only to have an image pop in, push the page down, and cause you to tap an unintended link. Google measures this disruption through the Cumulative Layout Shift (CLS) metric in Core Web Vitals.
Always Reserve Space for Media Assets
The most frequent cause of layout shifts is unsized media elements. When a browser parses an `<img>`, `<video>`, or `<iframe>` tag without dimensions, it allocates zero initial height. Once the asset downloads over the network, the browser recalculates the page geometry, shifting all subsequent content downward.
To prevent this, always specify explicit `width` and `height` attributes directly in the HTML tag: `<img src="diagram.png" width="800" height="450" alt="...">`. Modern browsers use these attributes to calculate the aspect ratio before the file loads, reserving the appropriate box layout and completely eliminating the jump.
Managing Web Fonts and Dynamic Placeholders
Use `font-display: swap` in your `@font-face` rules to ensure text remains readable immediately. Furthermore, match your fallback font's metrics to your primary font using modern CSS properties such as `size-adjust` and `ascent-override`. Always reserve containers with minimum heights for dynamic banners and advertising slots so content never moves abruptly.
Performance investigation checklist
- Measure the page on a representative device and connection before changing code.
- Identify whether delays come from server response, scripts, fonts, images, layout, or third-party services.
- Resize media, reserve layout space, and defer non-critical resources.
- Remove unused dependencies only after confirming required features still work.
- Retest after each meaningful change under similar conditions.
Avoid optimisation by guesswork
Lab scores help diagnose problems but do not represent every visitor. Review field data where available and protect correctness, accessibility, and reliability while improving speed.