---
title: "CSS content-visibility: Skip Rendering Offscreen Content"
description: "content-visibility: auto lets the browser skip layout and paint for offscreen elements until they are needed. How to use it with contain-intrinsic-size."
canonical: "https://www.trevorlasn.com/blog/css-content-visibility"
author: "Trevor I. Lasn"
published: "2024-12-05"
last-updated: "2024-12-05"
topics: ["CSS", "Web performance"]
---

# CSS content-visibility: Skip Rendering Offscreen Content

content-visibility: auto lets the browser skip layout and paint for offscreen elements until they are needed. How to use it with contain-intrinsic-size.

By Trevor I. Lasn · Published 2024-12-05 · https://www.trevorlasn.com/blog/css-content-visibility

Web performance optimization can be a real headache. Shaving off milliseconds here and there, minifying everything in sight, and praying to the performance gods.

[Browser support for `content-visibility` on webstatus.dev](https://webstatus.dev/features/content-visibility)

Picture this: you're scrolling through a massive webpage with hundreds of images, complex layouts, and enough content to fill a book. Without `content-visibility`, browsers dutifully render every single pixel, whether you can see it or not. It's like a restaurant cooking every dish on the menu just in case someone orders it.

The `content-visibility` property tells browsers they can skip rendering elements until they're about to enter the viewport. This might sound simple, but it's a game-changer for long scrolling pages.

```css title="CSS"
.my-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}
```

The `contain-intrinsic-size` property is `content-visibility`'s partner in crime. It provides a size estimate so the browser can reserve space before rendering, preventing layout shifts.

`content-visibility` works best on pages with lots of complex, off-screen content. News feeds, product listings, and documentation sites are perfect candidates. I've seen initial render times improve by 30-50% on content-heavy pages.

One important detail: `content-visibility` doesn't just defer paint operations - it skips layout calculations entirely. This means the browser doesn't waste time figuring out how to position elements nobody can see yet.

`content-visibility` isn't free magic though. Each element with `content-visibility: auto` becomes a separate containing block. This can affect positioning and scroll anchoring. Here's what to watch for:

```css title="CSS"
/* This might cause unexpected behavior */
.container {
  content-visibility: auto;
  position: relative;
}

.child {
  position: fixed;  /* Now relative to the container */
}
```

After experimenting with `content-visibility` across different scenarios, I've found it works best when:

1. Sections are clearly defined and independent
2. Content below the fold is complex
3. Users typically don't need immediate access to hidden content

Feeds are a great example - users rarely jump straight to the bottom, and each post is self-contained.