content-visibility and contain-intrinsic-size: Slash rendering time by 10 with two lines of CSS

In the frantic race for web performance, every millisecond saved on the Main Thread is a victory. While we have long relied on complex JavaScript libraries to manage lazy rendering, modern CSS brings a native solution of formidable efficiency: content-visibility.

The problem is simple: the heavier a DOM page is, the more time the browser spends calculating the layout and painting elements, even those located 5000 pixels below the fold. By using content-visibility, you instruct the browser to skip the rendering work for off-screen elements.

#The hidden cost of invisible rendering

When a browser loads a page, it performs a series of critical steps: building the DOM, the CSSOM, then calculating style, layout (geometry), and finally the “paint” (drawing pixels). On a page containing thousands of nodes, this stage can paralyze the processor for several hundred milliseconds.

This is where the concept of containment comes in. Historically, the contain property allowed isolating parts of the DOM to prevent the recalculation of a small component from triggering a recalculation of the entire page. content-visibility is the logical and automated evolution of this concept.

#1. content-visibility: auto, the smart rendering engine

The auto value is the most powerful. It allows the browser to determine whether an element is in the viewport (the visible area) or not. If the element is far from the user’s view, the browser:

• Does not calculate the layout of its children.
• Does not paint its content.
• Treats it as if it had strict “containment”.

As soon as the user scrolls and approaches the element, the browser triggers rendering just in time.

Technical implementation

Here is how to apply this optimization to page sections smoothly, using clamp() to adapt dynamically to screen size without media queries.

Copy.optimized-section {
  content-visibility     : auto;
  /* Using clamp for fluid management of reserved space */
  contain-intrinsic-size : auto clamp(25rem, 60vh, 75rem);
}

/* Avoiding unnecessary overrides on already visible sections */
.optimized-section:not([data-priority='high']) {
  margin-block : clamp(1rem, 5%, 3rem);
}

#2. The scroll jump problem: contain-intrinsic-size

Using content-visibility: auto alone has one major flaw: the browser assumes the unrendered element has a height of 0px. As the user scrolls, the element is rendered, its actual height is calculated, and all content below it “jumps” abruptly.

This is a disaster for CLS (Cumulative Layout Shift), a key Google indicator for SEO.

To fix this, we use contain-intrinsic-size. This property acts as a placeholder or fallback size. It tells the browser: “Even if you don’t render this element, reserve this space”.

Modern and precise syntax

It is now possible to use auto combined with a size value. If the browser has already rendered the element once, it will remember its actual size instead of using the estimated value, making the scroll perfectly fluid.

Copy.dynamic-card-container {
  content-visibility     : auto;
  /* Defining intrinsic width and height */
  contain-intrinsic-size : auto 100% auto clamp(15.625rem, 30vh, 31.25rem);
}

#3. SEO and Accessibility: What impact?

This is the question all SEO experts ask: if the content is not rendered, can Google see it?

The answer is yes. content-visibility: auto does not hide DOM content the same way display: none does. The content remains accessible in the render tree for search engines and screen readers. However, since the content is not “ painted”, it is recommended not to use it on critical text elements for immediate accessibility (like the main navigation menu).

Why it is good for your SEO

1. LCP (Largest Contentful Paint): By freeing the processor from useless rendering tasks, the browser can focus on the main element of the page.
2. INP (Interaction to Next Paint): Less rendering work means a main thread that is more responsive to user clicks and interactions.

#4. Advanced optimization strategies

To maximize performance, you should not apply these properties to every small element. The trick is to target “chunks” or logical sections of your page.

Copymain > section:not(:first-child) {
  content-visibility     : auto;
  contain-intrinsic-size : auto 50rem;
}

In this example, we leave the first section (often above the fold) alone for immediate rendering, while optimizing all subsequent sections.

#5. Comparison: CSS vs JavaScript (Intersection Observer)

Before this property, we used the IntersectionObserver API to add or remove CSS classes. Here is why the native method is superior:

• Raw performance: CSS runs at the rendering engine level, not in the JavaScript virtual machine.
• Zero delay: The browser knows exactly when to start rendering to avoid white flashes, which is very difficult to synchronize perfectly in JS.
• Lightness: Less JS means less code to download, parse, and execute.

#Conclusion: A giant leap for web performance

Implementing content-visibility and contain-intrinsic-size represents one of the most cost-effective optimizations in terms of “effort / gain” ratio. With just a few lines of code, you can transform a heavy, stuttering page into a fluid, app-grade experience.

This is the essence of modern engineering: delegating intelligence to the browser to focus on the added value of your interface.

FAQ

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →