Skipping what nobody sees

On a page with thirty sections, the browser works out the position and size of every section and paints them all on load, even though the visitor only sees the first one. content-visibility: auto tells it to skip laying out and painting a section while it's far from the screen, and to do that work once the section gets close.

The content stays in the page, so Ctrl+F still finds it, screen readers still read it and links can still reach it. Neither display: none nor removing the elements gives you that.

Watch out: a section the browser skips is treated as if it were empty, so its height becomes zero and the scrollbar jumps every time a new section gets rendered. That's why you reserve an estimated height for it with contain-intrinsic-size, and the keyword auto before the length makes the browser remember the real height after the first render.