Two lines of CSS that boosts 7x rendering performance!
Tags: webdev, css, performance, html
Published: 2022-05-29 09:45:04

I'll cut the crap out and jump directly to the two line of css that you need to add to improve your performance by approx **7x**:

```css
{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}
```

---

## Why do you need this?

Website's nowadays need to be optimal and performant, users on the web have very short attention span. According to [Doherty threshold](https://lawsofux.com/doherty-threshold/) response time to be 400 milliseconds.

Now imagine a website like Facebook,Instagram etc.. taking more time then the threshold ? No one would be coming back to these sites again.

---

## When would you use this?

Most common use cases for this is when you have huge list/grid of data that needs to render at the mount of the application.

Example: Static website like specs or documentation or travel blogs etc...

Would love hear in comments if you have any other use cases for it.

---

## How does it work ?

The browser acts smart by skipping rendering work with the class you applied with `content-visibility: auto`.

Browser needs to know the layout of the DOM in order to render, those elements which are not in viewport are not rendered and infact have empty box with `contain-intrinsic-size` you provided.

To summarize all of the rendering is deferred until it reaches the viewport at which the browser renders the actual layout with the width, height and styles you provided.


P.S: the layout which are not outside of the viewport would have a `height: 0`, so when deferred layout comes to viewport it would stack on top of each other, so that's why `contain-intrinsic-size` is needed, However, no worries these are just a fallback values, browser will render the actual ones when it renders in viewport.

Hence one drawback of this is the scrollbars would be wacky and jump to places if the `contain-intrinsic-size` not given properly. :) 

---

## Browser Support

`content-visibility` relies on the the [CSS Containment Spec](https://caniuse.com/css-containment). While `content-visibility` currently is supported on mostly chromium tech as at the date of writing.

However, [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility#browser_compatibility) support is not bad for a good to have feature on high end systems, however with progressing web development it will soon be supported in all browsers too. Hopefully :)

---

## Alternatives

There are alternatives to improve performance using JavaScript, such using [List virtualization](https://www.patterns.dev/posts/virtual-lists/), but who wants to write 100's of line of `js` and maintain it when you could do it in *2 lines* of `css`

Further reading; that you could do it in js:
[react-window](https://react-window.vercel.app/#/examples/list/fixed-size)
[react-virtualized](https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3/)

---

## Excellent demo and explanation: 

{% embed https://youtu.be/FFA-v-CIxJQ %}

---

### Further readings:
https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility


Regards,

{% link https://dev.to/mnathani/best-way-to-learn-closure-in-javascript--29dp %}