content-visibility: Lazy Rendering for Long Pages
Long pages with hundreds of elements slow down initial render. content-visibility skips off-screen work automatically. Here is how I use it. Modern web pages are heavy. A documentation site, a long article, a social feed. these can contain thousands of DOM nodes, and the browser renders all of them on initial load even though most are below the fold. content-visibility: auto tells the browser to skip rendering work for off-screen elements, dramatically improving initial load and scroll performance. I first used content-visibility on a documentation site with 200+ sections on a single page. Initial render took 3.5 seconds and the page felt sluggish on mobile. After adding content-visibility: auto to each section, initial render dropped to 0.9 seconds. The browser was skipping layout, paint, and style recalculation for about 180 sections that were below the fold. The improvement was not subtle. What content-visibility Does content-visibility: auto applies containment and lazy rendering to an element. When the element is off-screen, the browser skips its layout, paint, and style recalculation. When it scrolls into view, the browser renders it. This is the same idea as lazy-loading images, but for entire subtrees of the…