Member-only story
Improve Performances With Dynamic “Content-Visibility”
Using the power of the content-visibility CSS property on dynamic-sized elements
For non-members, please click here to continue reading.
Initial Considerations
This article presents a few technologies that are only available on some browsers. This should not be considered as the solution you can use to solve all your performance issues but as the solution to improve some of your users’ experience.
Also, you should consider using it more as an experiment than an ultimate performance saver that can help you understand how a browser's rendering works and what can be controlled.
Finally, the code could also be improved by doing several enhancements — performance or features — to make it production ready. I use it on some websites, but it hasn’t been tested at scale.
The Content-Visibility CSS Property
When we have a big page with a huge amount of data, the browser will struggle with one of its steps to display the page because it asks for a lot of work.
The browser will go through the following step:
- Loading
- Scripting
- Rendering
- Painting
The bigger the page is, the slower these operations will be. But in this game, the rendering step is an Achilles’ heel for everyone looking for speed. The browser makes a lot of calculations here to prepare the painting, and the more the page is complex, the more time it takes.
Unlike a house where you can do the painting once the construction is complete — and maybe once in a while for a deserved refreshing — a browser has many reasons to make a lot of renderings over time. JavaScript DOM modifications, scrolls, dynamic carousels, and so on.
To help developers take more control over this, Chromium has introduced a new CSS property call content-visibility that aims to solve this performance by skipping this rendering part when it is not necessary, mainly because the concerned block is out of the screen, which, in our single page applications, can happen a lot…
