Content-visibility / CSS containment
CSS can skip laying out and painting offscreen sections, then render them as they approach the viewport instead of doing the whole page upfront.
See it
What it is
'content-visibility: auto' lets the browser skip layout and paint work for an offscreen section while keeping that section in the document. CSS containment is the underlying boundary: properties such as 'contain: layout paint' tell the browser that changes inside an element cannot affect certain work outside it. This can make a long article, feed, or dashboard much cheaper to load and scroll.
Pair 'content-visibility: auto' with 'contain-intrinsic-size' so the browser reserves an estimated block size before it renders the real contents. The 'auto' form can remember the last rendered size, which helps later visits to that section avoid a jump.
Gotcha: containment changes layout behavior. Size containment can make an element ignore its contents when calculating its own size, and a bad intrinsic-size estimate can move the scrollbar or cause layout shift when the section appears. Apply it to independent, below-the-fold sections, not blindly to wrappers that size themselves from children.
Ask AI for it
Reduce initial rendering work on this long page with CSS containment. Apply 'content-visibility: auto' only to independent sections below the fold, and pair each with 'contain-intrinsic-size: auto 800px' as a starting estimate. Replace 800px with a measured typical height for that section type. Do not apply size containment to wrappers whose dimensions must come from their children. Record Chrome DevTools Performance traces before and after, scroll through every section, and verify layout time falls without new Cumulative Layout Shift, missing focus targets, or broken sticky positioning.