Murtaza Nathani

Posted on May 29, 2022 • Edited on Dec 3, 2022

Two lines of CSS that boosts 7x rendering performance!

#webdev #css #performance #html

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:



{
  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 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. While content-visibility currently is supported on mostly chromium tech as at the date of writing.

However, content-visibility 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, 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
react-virtualized

Excellent demo and explanation:

Best way to learn Closure in JavaScript ?

Murtaza Nathani ・ Jun 22 '22

#webdev #javascript #programming #beginners

Latest comments (58)

Real AI • Sep 27 '22 • Edited

"Now imagine a website like Facebook,Instagram etc.. taking more time then the threshold ? No one would be coming back to these sites again "
debatable , they have that thing that pushes your dopamine buttons that override your panic of getting out of the slow site as fast as possible.

Murtaza Nathani • Sep 27 '22

Ah yes, I agree they do hit the dopamine.. :(

Check this comment out:
dev.to/mnathani/comment/1p622

Konstantin BIFERT • Jul 22 '22

Wow, thanks for that one!

Murtaza Nathani • Jul 22 '22

Welcome

Gabin ✨✨ • Jul 9 '22

That's very interesting, hopefully support will get better. As a side note, as for virtualization libraries I would rather recommend tanstack/virtual or react-virtuoso.

Murtaza Nathani • Jul 11 '22

wow, nice @zhouzi ..

Thanks for sharing these are good alternative to js virtualization 👍

Andry Zirka • Jun 30 '22

hi. I tried use your ficha in real project. Unfortunately, I got a problem in the Chrome browser. jsfiddle.net/huy2o5rf/ Can you please explane why style

.btn_menu__checkbox:checked+.block_navigation {
transform: translateX(0);
}
would not work with your ficha ?

Murtaza Nathani • Jul 12 '22

hii @blackstar1991 , i saw your fiddle, and the css that you have applied is global

this would have no effect in the optimization:

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

as in my understanding it would render the whole page will render after checking the layout without any optimization.
In your case, if you apply the above css in your items class bl_nav__item, it could work.

P.S: this optimization is usefull if you have 1000's of record loaded at the same time and you dont want to render it all at once..

I hope i am able to understand your issue and this could be any help.

Andry Zirka • Jul 12 '22

in my example, I wanted to show you that we got problem with hidden element on a page. jsfiddle.net/rd2b37t4/ A psevdo menu dosn't work. .btn_menu__checkbox:checked+.block_navigation dosen't work if using your ficha

Jin • Jun 28 '22

This solution requires that you first load all the invisible data, create components for it, form the DOM, and only then will the browser decide that for 99% of that DOM, you don't need to calculate the layout.

The best solution is not to form this huge DOM at all. And don't even load invisible data. I told how to achieve this here: https://github-com.translate.goog/nin-jin/slides/tree/master/virt?_x_tr_sl=ru&_x_tr_tl=en&_x_tr_hl=ru&_x_tr_pto=wapp

Murtaza Nathani • Jul 11 '22

Thanks for sharing you work @ninjin , it looks great...

It depends on the usecase , well if you dont want to load all the data, then can't we do pagination or infinite scrolling ? that are the built in optimization..

Jin • Jul 11 '22

Yes, of course, and there I was just talking about how to get the effect of lazy loading and rendering without making any effort to optimize at the application level.
See the huge example: nin-jin.github.io/habrcomment/#art...
And its source code: github.com/nin-jin/habrcomment
Pagination and endless scrolling can't work well here.