CSS content-visibility: Render Long Pages Faster

Short answer: The CSS property content-visibility: auto tells the browser it may skip the layout and painting work for parts of a page that are far outside the screen, until the visitor scrolls close to them. On long pages with many sections, this can make the first display and later interactions noticeably faster. Apply it only to sections below the first screen, give each a size estimate, and test the result, because wrong settings can cause jumping content.

The problem it solves

When a browser loads a page, it does a lot of work before you see anything. It reads the HTML, builds a structure, works out the size and position of every element (layout), and then draws them (painting). On a long page, such as a blog archive, a product list or a landing page with many sections, most of that work is spent on parts that nobody can see yet. The visitor is looking at the top of the page, while the browser computes the footer.

This extra work delays the moment the page appears and makes the page sluggish. On a mobile phone with a slow processor, the cost is larger, as we explain in why websites are slow on mobile. Reducing needless rendering helps metrics such as the ones in Core Web Vitals.

What content-visibility does

The property has a few values. The useful one for most sites is auto. When it is set on an element, the browser checks whether the element is close to the visible area. If it is far away, the browser does not do the layout and painting work for the contents, and it treats the element as an empty box of a certain size. When the visitor scrolls near it, the browser renders it just in time.

The content is still in the page. It stays in the document structure, so it can be found with the browser’s search, reached by screen readers and read by search engines. That is a major difference from hiding content with display: none, which removes it from the display, or from loading it with JavaScript only after a scroll.

Think of it as lazy loading for rendering work, rather than for files. Images use a separate attribute, covered in the lazy loading guide.

A basic example

Suppose your page has many sections, each in an element with the class “section”. This rule would apply the property to all of them:

.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

The second line matters. When a section is skipped, the browser needs some idea of its height, otherwise it counts as zero and the page becomes much shorter. As the visitor scrolls, sections render and grow to their real height, the scroll bar jumps and the content shifts. The value contain-intrinsic-size gives the browser a placeholder height. The word “auto” in front tells it to remember the real size after the section has rendered once, so later visits to that area are stable.

Choose a placeholder close to the typical height. It does not have to be exact, but the closer it is, the smaller the jumps.

Where it helps and where it does not

Good uses

Long articles divided into sections.
Pages with many repeated blocks, such as comments, reviews, cards or product rows.
Footers with large link lists.
Landing pages with many stacked sections.

Poor uses

Anything in the first screen. The header, hero image and main heading must render immediately. Applying the property here only adds delay and may harm your Largest Contentful Paint. See how to improve Largest Contentful Paint.
Short pages. If the whole page fits in two screens, there is little to save.
Elements that other code measures. Scripts that read heights or positions of skipped elements can get wrong values.
Very small elements. The overhead is larger than the gain.

Effects on layout shifts

The main risk is unexpected movement. If the placeholder size differs greatly from the real size, then when a section renders, everything below it jumps. That counts as layout shift and is what the Cumulative Layout Shift metric measures. Read how to fix Cumulative Layout Shift for background. In practice, shifts happen mostly while the visitor is scrolling, so they are often less harmful than shifts at load, but you should still test them. Use the auto keyword for the remembered size, and measure a typical section to set a realistic placeholder.

How to test it safely

Measure before. Run a speed test on a long page and note the numbers. Our guide to the PageSpeed Insights report shows what to look at.
Apply it to one kind of section. Start with the part of the page furthest from the top, such as the footer or the last blocks.
Scroll the page yourself. Look for jumps, flicker and anchor links that land in the wrong place.
Test on a phone. The effect is larger on slow devices, and so are the problems.
Measure after. Compare the same test on the same page. If the gain is small, remove the rule; fewer special rules mean fewer surprises.
Check browser support. The property is supported in current versions of the major browsers, and a browser that does not know it simply ignores it. Check a current compatibility table before relying on it.

For deeper work, the performance panel in the browser’s developer tools shows how long rendering takes, so you can see the real gain.

Does it matter for search rankings?

Not directly. Search engines look at the content that is in your page, and they can see content that uses this property. The benefit comes from faster display and smoother interaction, which can improve the experience that Google measures with real visitors. If rendering was never your bottleneck, you may see no change at all. That is why a before and after measurement is more reliable than a rule of thumb. A page that is already fast, with a small structure and light images, gains little from this technique, and you should leave it alone rather than add complexity for its own sake.

Common mistakes

Applying it to the whole body. This would also skip the first screen. Target individual sections instead.
Leaving out the size estimate. Skipped sections collapse and the page jumps while scrolling.
Using one height for very different sections. A footer, a gallery and a text block have different heights. Give each type its own estimate.
Forgetting anchor links. A menu link that jumps to a skipped section may land a little off, because the final height is not known yet. Test your table of contents and jump links.
Combining it with scripts that measure the page. Sliders, sticky menus and animation scripts that read positions can behave strangely when sections have no real size.
Trusting one test. Results vary between devices and runs. Repeat the measurement and look at the trend.

If any of these causes visible problems, remove the rule from that section. The aim is a smoother page, not a clever technique.

Better first steps for most sites

Content-visibility is a refinement, not the first thing to try. On most small business sites, bigger gains come from simpler actions: compress images, remove scripts you do not use, reduce page weight and keep the page structure small. A huge page structure is a problem of its own; see how to fix an excessive DOM size. If your CSS is large, read how to reduce unused CSS. Do those first. After that, if long pages remain slow to display, content-visibility is a cheap addition.

Keep in mind that it does not reduce the download size. The browser still gets all the HTML, CSS and images. It only saves the work of drawing. Set a limit for the whole page with a performance budget.

What Site AI Audit can and cannot tell you

Site AI Audit measures your pages using Google’s data from real phones, including LCP, CLS and INP, and it reports page weight and compression. It does not read your style sheet to tell you where content-visibility would fit. Use it to find which pages are slow, then test the property on the longest of them. Run a free check, or see the plans for unlimited re-checks.

The bottom line

content-visibility: auto lets the browser skip drawing off-screen sections until they are needed, which can speed up long pages, especially on phones. Use it below the first screen, add contain-intrinsic-size with the auto keyword, test for jumping content and keep it only if the measurements improve.

FAQ

Does content-visibility hide content from Google?

No. With the auto value the content stays in the page structure, so search engines and screen readers can still reach it, and the browser’s find feature still works. It only skips the drawing work for parts that are far from the screen.

What is contain-intrinsic-size for?

It gives the browser a placeholder size for skipped elements. Without it the element counts as empty, the page height is wrong and the scroll bar jumps as sections appear.

Can content-visibility hurt my Core Web Vitals?

Yes, if used on content in the first screen or with a poor size estimate. Apply it only below the fold and test layout shifts.

Is it the same as lazy loading images?

No. Lazy loading delays downloading files such as images. Content-visibility delays the layout and painting work for elements that are already in the page.

Do I need a plugin to use it?

No. It is a CSS rule that you can add to your theme’s style sheet or custom CSS. Some performance plugins offer it as an option, but it is easy to add and remove yourself.