---
title: "Skip work for what is off screen · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/visibility-aware-rendering
updated: 2026-10-20
licence: "All rights reserved"
---

# Skip work for what is off screen

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Optional
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Skip drawing content that is off screen with `content-visibility: auto`, and start heavy widgets only when they come into view.
- How: Add `content-visibility: auto` with `contain-intrinsic-size: auto <estimate>` to large sections lower down the page. Start heavy widgets with `IntersectionObserver`.
- 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.

Example:

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

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

**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`.

- Previous: [Keep the back button instant](https://agentwranglers.se/playbook/website/performance/bfcache)
- Next: [Fence off self-contained parts](https://agentwranglers.se/playbook/website/performance/css-containment)
- [Performance](https://agentwranglers.se/playbook/website/performance)