The web continues to advance forward and like a few other convenient CSS properties such as native image lazy loading, Google have once against shipped a new feature which I am hopeful will make it into other browsers shortly called content-visibility which is part of the CSS Containment Specification.
The crux of this new property is you can tell the browser to ignore rendering of certain elements that are off-screen. Traditionally, when you load a webpage, it will draw it from top to bottom (regardless of what is visible and what isn’t), this is why virtualisation techniques are popular (especially for long grids).
As you can see in the handy reference image provided by Google, the browser will only draw the first few elements and then ignore the rest until it’s used. Rendering time is significantly reduced and therefore, increases your first paint as well as load time by a huge factor.
A good use-case for content visibility is a feed. Think of a site like Pinterest or application like Instagram which shows a few images above-the-fold, but a bunch more below-the-fold. Why should the browser rendering everything, especially if the user doesn’t scroll beyond what is visible? (maybe they click the first item they see).
Perhaps one of the coolest and most exciting features of this property besides speeding up initial render of your applications astronomically is being able to use it for hidden elements. Think of it as display: none; on steroids by being able to specify content-visibility: hidden which will hide the element and preserve its rendering state, if there are any changes that need to happen, they’ll only happen if the element is visible.
You’re probably excited, you want to rush out and make your websites and applications faster for your users; here is the kicker — This feature is only launched in Chromium 85, with Firefox prototyping the property but not committing to its implementation. This means Chromium-based browsers (Google Chrome, Microsoft Edge and Opera) will have support.
When you see such useful and exciting features being shipped in Chromium, it makes you thankful that Chrome is the dominant browser with 65% of market share in July 2020 because it means you can use this feature today with great effect. Understandably, Mozilla has fewer resources than Google, so implementing new features like these into Firefox takes a little longer and requires more assessment before proceeding.
The future of the web is bright.
