Boosting Rendering Performance with CSS content-visibility

Browsers spend significant CPU cycles computing layouts, styling, and paint trees for DOM elements that are located far below the initial viewport. In content-heavy feeds, documentation sites, and large data tables, these offscreen calculations contribute directly to high Interaction to Next Paint (INP) and Total Blocking Time (TBT).

The content-visibility CSS property offers a declarative mechanism to instruct the rendering engine to skip layout and painting for elements that are currently offscreen, while still preserving their find-in-page indexability and document outline.

Example #

Consider a long article containing multiple detailed technical sections. Without optimization, the browser calculates geometry and rasterizes images for all sections immediately upon load:

<main class="story-feed">
  <section class="story-card">
    <h2>Introduction to Distributed Consensus</h2>
    <p>Consensus protocols allow distributed systems to agree on shared state...</p>
  </section>
  <section class="story-card">
    <h2>Leader Election and Heartbeats</h2>
    <p>Nodes monitor peer heartbeats and trigger randomized election timeouts...</p>
  </section>
</main>

Implementation #

To skip layout and rendering work until each card approaches the viewport, we apply content-visibility: auto paired with contain-intrinsic-size. The contain-intrinsic-size property provides an estimated height so that the browser does not collapse the scrollbar thumb to zero when offscreen elements are skipped:

.story-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}

// Progressive feature check for content-visibility support
if (CSS.supports('content-visibility', 'auto')) {
  document.documentElement.classList.add('has-content-visibility');
  console.log('Rendering engine will skip offscreen layout passes.');
}

When the user scrolls within proximity of a section, the browser seamlessly triggers the layout pass and paints the section without jank.

Main Point: Pairing content-visibility: auto with an accurate contain-intrinsic-size drastically lowers initial page render times while maintaining stable scrollbar ergonomics.

Credits #

Photo by Joel Filipe on Unsplash

← Home