What it is: by default the browser calculates the layout and painting of the whole page, even the parts nobody has scrolled to yet. With content-visibility: auto the browser skips the work for sections that are off screen and renders them only when they are about to appear. On long pages this makes the first load faster.

Basic usage

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

Why contain-intrinsic-size is needed

A skipped section has no height, so the scrollbar would jump while scrolling. contain-intrinsic-size gives the browser an estimated height. The auto keyword makes it remember the real height after the section has been rendered once.

Good candidates in a WordPress site

.site-footer,
.comments-area,
.lotgrafix-related-posts,
.lotgrafix-testimonials {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

Rules of thumb

• Do not use it on the header or the first screen of content, because it delays what the visitor sees first.
• Use it on large blocks far below the fold, not on small elements.
• Browser find in page, anchor links and accessibility tools still work with skipped content.
• Measure with Lighthouse or Chrome DevTools to confirm the improvement.

Support note

Browsers without support ignore the property, so the page simply renders as usual.