1---
2title: CSS content-visibility for Long Lists
3impact: HIGH
4impactDescription: faster initial render
5tags: rendering, css, content-visibility, long-lists
6---
7 
8## CSS content-visibility for Long Lists
9 
10Apply `content-visibility: auto` to defer off-screen rendering.
11 
12**CSS:**
13 
14```css
15.message-item {
16  content-visibility: auto;
17  contain-intrinsic-size: 0 80px;
18}
19```
20 
21**Example:**
22 
23```tsx
24function MessageList({ messages }: { messages: Message[] }) {
25  return (
26    <div className="overflow-y-auto h-screen">
27      {messages.map(msg => (
28        <div key={msg.id} className="message-item">
29          <Avatar user={msg.author} />
30          <div>{msg.content}</div>
31        </div>
32      ))}
33    </div>
34  )
35}
36```
37 
38For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
39