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:
Further readings:
https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
Regards,
Oldest comments (58)
This sounds too good to be true 😂 I'm definitely gonna try it out. Thanks for sharing!
Haha.. the world is surely a better place to live in :p
Let us know what you find out after trying.. it's always good to share knowledge :)
Let us know when you try it out.. would love to hear your findings
It depends on your usecase of where this feature is best used for...
Yes one side effects of this is the scrollbars position, but in my understanding it's not issue considering Infinite pages or huge static chunk that needs to render
Not really sure what your usecase is... however for example if you have a list of items/elements, then try adding it on item..
One of the best way to test it using chrome dev tools.
Nice! I never knew about this, I'll have to give it a try when I my hectic schedule isn't too hectic!
haha yea.. try with your on going work ;)
This is awesome
Awesome article.
Thanks 🙏
I had trouble getting this to work for my use case, which also involves lazy loading images inside the sections where I attempted to apply this CSS trick. The negative side-effect of lazy loading images inside a section with this CSS applied was that when I rapidly scrolled down the page to a given section, the image didn't always render correctly (weirdly pixelated or obscured) until I scrolled away and then back. In the end, what seems to work best for my particular scenario is relying entirely on the JS Intersection Observer API:
developer.mozilla.org/en-US/docs/W...
Ummm, interesting...
Just a thought do we need to lazy load image's if you already rendering only what's in viewport ?.. since we aren't rendering other than what's in viewport, so for me it looks like tradeoff..
Also maybe try playing with different
contain-intrinsic-size, might help with obscureness. ?Moreover, intersection observer is also a good option.. there's always more than one solution to do it.. whichever suit's the best.. )
Nice. Thanks!
Welcome
Great article.
Looking forward to trying this
Thanks 🙏