Lazy Render Content
Use content-visibility: auto to skip rendering off-screen sections entirely until they near the viewport.
Metrics
This technique can move up to 33% of LCP's share of the Lighthouse score.
This technique can move up to 100% of TBT's share of the Lighthouse score.
This technique does not move CLS.
This technique does not move FCP.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
The content-visibility CSS property instructs the browser to skip rendering, layout, and painting of off-screen content. Setting it to auto on large below-the-fold sections means the browser defers that work until the content is about to scroll into view — freeing the initial render to focus on what the user actually sees.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: CLS, FCP, TTFB.
The Problem
Browsers traditionally render all page content up front, even the parts below the fold. For pages with large footers, comment sections, or long article bodies, this means significant CPU time spent on elements the user may never see. It delays First Contentful Paint, keeps the main thread busy when it should be responding to interactions, and consumes memory for content that is not yet relevant.
Performance Impact
LCP
50–200ms
above-fold layout completes faster without full-page layout blocking
TBT
50–200ms
initial layout task split — off-screen sections deferred
SI
100–400ms
visible sections painted sooner when off-screen layout is skipped
CLS
0.05–0.15
content shifting into view causes layout shift if space is not reserved upfront
Risk: Low
small scroll jump mitigated with contain-intrinsic-size; degrades gracefully in older browsers
How it works
01
Off-screen element is skipped
When a section with
content-visibility: autois outside the viewport (and a margin buffer), the browser skips its layout and paint entirely. The element behaves as if it has a fixed placeholder size, set bycontain-intrinsic-size.02
Browser reserves estimated space
contain-intrinsic-sizetells the browser the element’s approximate height before rendering. This prevents the scrollbar from jumping or layout from shifting when the section eventually renders — crucial for a good CLS score.03
Content renders just in time
As the user scrolls and the section approaches the viewport threshold, the browser treats it as
content-visibility: visibleand performs the full layout and paint pass — just in time for the user to see it.04
State is managed automatically
If the user scrolls past the content and it leaves the viewport again, the browser may revert it to the skipped state, reclaiming memory and reducing ongoing rendering overhead.
05
Apply only to independent, self-contained sections
Each target section must be a self-contained layout context with no cross-section dependencies. Apply
content-visibility: autoto top-level sections — article body, comment threads, footer, sidebar widgets — not to elements that are positioned relative to siblings outside the section.06
Combine with lazy-loaded images
Images with
loading="lazy"inside acontent-visibility: autosection are skipped entirely until the section nears the viewport — neither layout nor image fetch happens until needed. This compounds the bandwidth and rendering savings for image-heavy off-screen sections.
Code Example
/* All sections rendered eagerly */n.site-footer,n.comments-area,n.related-posts {n /* no content-visibility */n}/* Skip off-screen rendering */n.site-footer,n.comments-area,n.related-posts-section,n.sidebar-secondary {n content-visibility: auto;n contain-intrinsic-size: auto 1000px;n}nn.article-list-item,n.product-list-item {n content-visibility: auto;n contain-intrinsic-size: auto 300px;n}Pair content-visibility: auto with contain-intrinsic-size on every target element. Without it the element collapses to zero height off-screen, causing a visible layout shift when it renders.
Limitations
- Omitting it or guessing the value poorly causes the element to occupy 0px off-screen, then jump to its real height as it renders. Even with
autoprefixed values, estimate the height reasonably. - Browser Ctrl+F cannot search content that has not been rendered. Direct anchor links (
#section-id) inside a skipped section may not scroll to the correct position. - Content not yet rendered is absent from the accessibility tree until scrolled into view.
- JavaScript that measures element dimensions on load will get zero values for off-screen elements.
- Scrollbar length may be inaccurate until sections render, unless
contain-intrinsic-sizeis set. - Sections with cross-section layout dependencies — elements positioned relative to siblings in another section — may render incorrectly when layout is deferred.
Common Mistakes
Applying content-visibility: auto to above-the-fold sections
The property is designed for off-screen content. Applying it to elements visible on initial load can delay their rendering and harm LCP or FCP — the opposite of the intent.
Omitting contain-intrinsic-size
Without an estimated size, the element collapses to 0px while off-screen. When it finally renders the page layout shifts visibly, increasing CLS.
Using it on too many small elements like individual paragraphs
The benefit is for large, self-contained sections. The per-element overhead of many small skipped regions can outweigh the savings.
Applying content-visibility: auto to a wrapper that includes above-fold content
Applying it to a parent container that wraps the first viewport’s content delays initial paint of visible content — the opposite of the intent. Apply it per section, never to a container that includes the hero or any above-fold element.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement