PERFORMANCE · SEO GLOSSARY
CLS Reserve (Layout Shift Reserve)
A front-end technique that pre-allocates fixed space for elements that load asynchronously (ads, images without dimensions, embedded iframes) using CSS aspect-ratio, min-height, or explicit width/height attributes — preventing the layout shift those elements would otherwise cause when they load and displace surrounding content.
Definition
CLS reserve (also called space reservation) is the practice of declaring the exact dimensions that an element will occupy before it loads, so the browser allocates that space in the initial layout and does not need to reflow other content when the element appears. Without dimension declarations, browsers allocate zero space for images, iframes, and ads until they load — then shift all subsequent content downward when the element renders, causing Cumulative Layout Shift (CLS). Methods for reserving space: (1) **HTML width/height attributes on `<img>`**: `<img src="..." width="800" height="600">` — modern browsers use these attributes to calculate aspect ratio and reserve space before the image loads. This is the simplest and most widely recommended method. (2) **CSS aspect-ratio**: `img { aspect-ratio: 16/9; width: 100%; }` — reserves proportional space based on the element\'s width. Useful for responsive images where pixel dimensions vary. (3) **Intrinsic-size padding hack (legacy)**: padding-bottom as a percentage of width (e.g., `padding-bottom: 56.25%` for 16:9) — the legacy method before aspect-ratio was widely supported. Still valid in older browser targets. (4) **min-height on ad slots**: `<div class="ad-slot" style="min-height: 250px">` — reserves the minimum expected ad height before the ad loads. (5) **Skeleton screens**: placeholder content (grey boxes in the shape of the eventual content) — reserves space and improves perceived performance. Common CLS sources that need reserves: above-the-fold images without width/height (especially hero images, product thumbnails); ad slots without minimum height declarations; embedded iframes (YouTube, Twitter, maps) without aspect-ratio containers; font loading (handled via font-display: optional or size-adjust); dynamic content injected above existing content.
Why it matters for SEO
Cumulative Layout Shift is one of the three Core Web Vitals metrics. CLS ≤0.1 is the "Good" threshold; CLS >0.25 is "Poor". Layout shifts are caused by elements loading after the initial paint and displacing existing content — images without dimensions are the most common single cause. CLS reserve techniques directly prevent these shifts at the source. CrUX CLS p75 data from real Chrome users captures whether real-world visitors experience significant layout shift — poor CLS scores negatively affect page experience ranking signals.
How DeepSEOAnalysis checks this
DeepSEOAnalysis audits images in the initial HTML for missing width/height attributes — a direct CLS risk signal. Ad slot containers and iframe embeds are checked for min-height or aspect-ratio declarations. Real CrUX CLS data at p75 from Chrome users provides actual layout shift measurements from real visits, showing whether layout shift is occurring in practice regardless of what the HTML declares.
GLOSSARY
Related terms
performance
LCP Image
The image element identified by Chrome as the Largest Contentful Paint (LCP) candidate on a page — the largest visible image in the initial viewport that determines the LCP timing score, typically the hero image, product thumbnail, or featured photo at the top of the page.
Read definition →performance
Render-Blocking Resources (SEO)
CSS stylesheets and JavaScript files that block the browser from rendering page content until they are downloaded and processed — a primary cause of poor LCP and FCP (First Contentful Paint) scores, requiring deferral, async loading, or inline critical CSS strategies to resolve.
Read definition →technical
Viewport Meta Tag (SEO)
The `<meta name="viewport">` tag that controls how a web page is displayed on mobile devices — required for responsive design, mobile usability, and Google\'s mobile-first indexing, which uses the mobile version of a page as the primary version for indexing and ranking.
Read definition →performance
font-display (SEO)
The CSS `font-display` descriptor that controls how a browser handles text rendering while a web font is loading — affecting both the Cumulative Layout Shift (CLS) metric (from font swap reflow) and the First Contentful Paint (FCP) timing (from invisible text during font loading).
Read definition →performance
Lazy Loading SEO
The SEO implications of lazy loading — deferring loading of images and other resources until they enter the viewport — which improves initial page load performance but can harm LCP if the main content image is lazy-loaded, and can prevent off-screen content from being indexed if text content is lazy-loaded.
Read definition →See how your site scores on CLS Reserve (Layout Shift Reserve).
The free DeepSEOAnalysis audit checks cls reserve (layout shift reserve) and 100+ other signals. Full report, no signup.
Run a free audit →