Performance Optional

Skip work for what is off screen

Skip drawing content that is off screen with content-visibility: auto, and start heavy widgets only when they come into view.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Add content-visibility: auto with contain-intrinsic-size: auto <estimate> to large sections lower down the page. Start heavy widgets with IntersectionObserver.

Example

.below-fold { content-visibility: auto; contain-intrinsic-size: auto 800px; }

new IntersectionObserver((entries, obs) => {
  if (entries[0].isIntersecting) { import("/map.js"); obs.disconnect(); }
}).observe(document.querySelector("#map"));

How to check

A performance trace of the page load shows less rendering time than without the rule. Lab CLS stays 0 while a browser test scrolls to the bottom.

Measured

On a reference site, removing content-visibility: auto from sections far down, together with contain: content on cards, cost 0.15 s of mobile LCP in Lighthouse.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/visibility-aware-rendering.