Introduction
We have all experienced reading an article on mobile, only for the text to suddenly jump down the screen as an advertisement or image pops in, causing us to tap the wrong link.
That frustrating visual instability is measured by Cumulative Layout Shift (CLS).
A high CLS score harms user trust, increases bounce rates, and negatively impacts your Google rankings.
Here are the eight most frequent triggers of layout shift and the exact CSS and HTML techniques developers use to eliminate them.
Missing Width and Height Attributes on Images and Videos
Always include explicit width and height attributes on every <img> and <video> tag in your HTML markup.
Modern browsers automatically calculate the aspect ratio from these attributes and reserve the exact vertical space before the image file finishes downloading.
Combine this with CSS max-width: 100%; height: auto; for full responsive scaling.
Without these dimensions, the browser treats the image as 0px tall until downloaded, pushing all surrounding content downward suddenly.
Late-Injecting Notification Banners and Cookie Consents
Promotional top bars, announcement banners, and cookie consent notices that inject dynamically via JavaScript cause massive layout shifts.
Never push page content down dynamically after initial render.
Instead, render top banners in the initial HTML or display cookie banners as fixed overlays using position: fixed with dedicated z-index.
Overlay modals interact with the screen without altering the document flow of the underlying page.
Web Font Swapping (FOIT vs FOUT)
When a custom web font downloads slowly, the browser either hides text (Flash of Invisible Text) or renders a system fallback before swapping (Flash of Unstyled Text).
If the fallback font has different character widths, line heights, or letter spacing, the entire page reflows when the custom font swaps in.
Use font-display: swap combined with modern CSS font-size-adjust and @font-face size-adjust overrides to match the fallback font's bounding box to the custom font.
Preload critical above-the-fold web fonts using <link rel="preload" as="font" type="font/woff2" crossorigin>.
Frequently Asked Questions
What is a passing CLS score? — A CLS score of 0.1 or lower passes Google's Core Web Vitals threshold. A score of 0.00 is achievable with disciplined frontend development.
Do animations cause layout shift? — Animations using transform (scale, translate) do not trigger layout shifts because they are composited on the GPU. Avoid animating width, height, or top/left.
How do dynamic ads impact CLS? — Always reserve a min-height slot container for ad spaces so content doesn't shift when an ad fills in.