CSS Content Visibility Property to Boosts Rendering Performance

Introduction to Content Visibility

Content Visibility is the most impactful CSS in which we can stop the rendering of the elements and reduce the paint and layout shift time. If the large portion of the page is skipped after using content-visibility: Hidden, it will increase the page's speed, and we can check in the lighthouse as well. Overall it increases the speed of the page. It also allows for faster interactions with the on-screen content. Pretty neat.

A web browser consists of various structured bundles of code that are required to perform certain tasks to retrieve HTML, CSS and javascript. Click to explore about, How the Web Browser Renders the Pages

How to Implement Content Visibility?

Example: A travel blog usually consists of stories, each with a few photographs and some descriptive prose. When you go to a travel blog on a standard browser, this is what happens:

A portion of the page, as well as any required resources, is downloaded from the network. The browser styles and arranges all of the page's contents, regardless of whether the content is visible to the user. The browser returns to step 1 until the entire page and its resources have been downloaded. Consider what would happen if you set content-visibility: auto for each blog's individual stories. The basic principle remains the same: the browser downloads and renders sections of the page. The difference, though, is in the quantity of work it undertakes in step 2.

It will style and layout all of the contents that are now visible to the user with content visibility (on-screen). On the other hand, the browser will forgo the rendering task and merely style and layout the element box when processing an entirely off-screen narrative. The loading time for this page would be the same as if it had complete on-screen tales and empty boxes for each off-screen story. We see a reduction in rendering time from 232ms to 30ms in our sample. This performs substantially better, with a 50 percent or more significant reduction in loading rendering costs projected.

Then, we apply the following style rule to the sections:

The splitting of code into components or numerous bundles which can be loaded when there is a demand or in parallel. Click to explore about, Code-Splitting in ReactJs

What are the various methods of Content Visibility?

Contain-intrinsic-size: Specifies an element's natural size.

To use the benefits of content visibility, the browser must use size containment to ensure that the rendering results of the contents do not have any effect on the element's size. This implies the element will be displayed as if it were empty. If the element in a standard block layout does not have a height defined, it will be 0 height. This isn't an ideal height because the size of the scrollbar will change and the height of the content as well.

Thankfully, CSS includes another property, contain-intrinsic-size, which effectively determines the element's natural size if size containment is in effect. We've set it to 1000px as a rough approximation for the height and width of the sections in our example.

This implies it will be laid out as if it were a single child with "intrinsic-size" dimensions, guaranteeing that your unsized divs will still have room to move around. In the absence of displayed content, contain-intrinsic-size serves as a placeholder size.

How to hide content with content-visibility?

Off-screen, the content-visibility: hidden property provides the same unrendered content and cached rendering state as content-visibility: auto. However, unlike auto, it does not begin rendering on-screen immediately. This provides you with more control by allowing you to hide and reveal the contents of an element easily. When compared to other typical methods of obscuring element content, consider the following:

Display: none: Hides and destroys the element's rendering state. This indicates that restoring the element's visibility costs the same amount as rendering a new element with the same contents.
Display: hidden: Hides the element while maintaining its rendering state. Even when hidden, it refreshes the rendering state whenever it is required. The element (and its subtrees) still take up geometric space on the page and maybe clicked on; thus, it doesn't truly remove the content.
Content-visibility: Hidden, on the other hand, conceals the element while retaining its rendering state, allowing any necessary adjustments to be made only when the element is revealed again (i.e., the content-visibility: the hidden property is removed).

When developing complicated virtual scrollers and assessing layout, there are some amazing use cases for content-visibility: hidden. Single-page applications (SPAs) benefit greatly from them. Content-visibility: hidden can be applied to inactive app views in the DOM to prevent them from being displayed but keep their cached state. As a result, when the view is reactivated, it renders quickly.

A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Click to explore about, Performance Monitoring Tools and Management

Impact of content-visibility on Web performance?

The below defined are the impact of content-visibility on the Web performance

Browser support

The CSS Containment Spec relies on primitives for content visibility. While content-visibility is currently only supported in Chromium 85 (and has been judged "worth prototyping" for Firefox), the Containment Spec is supported by the vast majority of modern browsers.

CSS Containment

The Primary key of CSS containment is to enable rendering performance which improves the web content by providing predictable isolation of the DOM subtree from the rest of the pages.

The browser no longer adds the size confinement as the element approaches the viewport and instead begins painting and hit-testing the element's content. This allows the rendering job to be completed just in time to view it. There are four different types of CSS containment:

Size

Size containment on an element ensures that the element's box can be laid out without having to look at its descendants. This means that if all we require is the element's size, we can potentially skip the layout of the descendants.

Layout

Layout containment refers to the fact that the descendants do not affect the page's exterior layout. If all we want to do is lay out other boxes, we can potentially skip the layout of the descendants.

Paint

Paint containment ensures that the offspring of the containing box do not appear outside of the confines of the containing box. Nothing can overflow the element visually, and if an element is off-screen or otherwise hidden, its descendants will also be hidden. If the element is offscreen, we can potentially forgo drawing the descendants.

Style

Style containment ensures that attributes that affect more than just the element's descendants do not escape (e.g., counters). If all we want is to compute styles on other components, we can perhaps forgo style computation for the descendants.

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs. Click here for our Digital Product Development and Engineering Services

Conclusion

Now we can say that content visibility is an excellent CSS property that can speed websites' performance and reduce the rendering of the high weightage elements.

Content visibility is the modern CSS property supported by 79.8% of browsers, and it has a great impact on Websites / Applications. As we know, every coin has two sides, so the disadvantage of this property is its browser compatibility. It is under the draft stage and is not compatible with safari browsers. So if we are targeting Mac Os users, we can't use this property. For further reference, check the image below.