Lazy rendering without IntersectionObserver
The old way used JavaScript's IntersectionObserver to detect when elements entered the viewport, then loaded or rendered them. Now CSS handles it with content-visibility: auto.
2 content-visibility: auto;
3 contain-intrinsic-size: auto 500px;
4}
2const observer = new IntersectionObserver(
3 (entries) => {
4 entries.forEach(entry => {
5 if (entry.isIntersecting) {
6 renderContent(entry.target);
7 }
8 });
9 }
10);
content-visibility Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Faster page loads
The browser skips layout and paint for offscreen content. Pages with long lists render significantly faster.
No JavaScript needed
IntersectionObserver requires setup code, callbacks, and cleanup. This is two CSS properties.
Automatic size estimation
The auto keyword in contain-intrinsic-size remembers the real size after first render, so scrollbar height stays accurate.
How it works
The old approach used JavaScript's IntersectionObserver API to watch elements as they scrolled into view. When an element crossed the viewport threshold, a callback would trigger rendering or loading. This required setup, teardown, and careful management of observer instances across the page.
With content-visibility: auto, the browser handles all of that internally. Offscreen content gets skipped during layout and paint, and contain-intrinsic-size provides a placeholder height so the scrollbar stays stable. When the user scrolls near the content, the browser renders it automatically.