DEV Community

Cover image for Boost Page Speed By Using Only A CSS Property!
Prosenjit Chowdhury
Prosenjit Chowdhury

Posted on

Boost Page Speed By Using Only A CSS Property!

Google just released Chrome 85, the major update for this browser in 2020. Just like those previous major updates, Chrome got a bunch of fixes and new features. Which includes content-visibility: auto also.

When we develop a site or page for a browser, it requires several steps to render or to show the page to the users. Browser goes through multiple processes before even it paint its first pixel of our site. After that it does these process for the whole page including the contents or elements that is not visible or not in the viewport yet.

browser-process-for-rendering-elements

After publishing of Chrome 85, developers now can easily make this process shorter by using content-visibility: auto to an element. This CSS property tells the browser that specific element can be skipped until it has been scrolled to the viewport.

#element {
    content-visibility: auto;
}
Enter fullscreen mode Exit fullscreen mode

effects after applying content-visbility to auto

I have already applied it to one my project and the performance boosted impressively than earlier. Previously the Lighthouse speed was 66. But after applying content-visibility: auto to the elements that will be scrolled later, made the performance speed to 83. Which is amazing!

So start using it now and discuss your experience in the comments section.

Top comments (6)

Collapse
 
aslasn profile image
Ande

Thanks for bringing it up. Unfortunately long way to make it supported for most users. There's tons of great features online but we always get limited by the browser verson.

For people looking for a in-depth guide on this property,
Here web.dev/content-visibility/

Collapse
 
bonnopc profile image
Prosenjit Chowdhury

Yes, it's a long way. But it’s an incredible tool to enhance rendering performance. I hope all latest browsers will adapt this feature very soon. Btw, thanks for sharing the URL.

Collapse
 
navdeepsingh profile image
Navdeep Singh

Will try it soon.

Collapse
 
mallikarjunece profile image
Mallikarjuna Y

This works well for React apps ?

Collapse
 
bonnopc profile image
Prosenjit Chowdhury

Yes, it works for React apps also. But don’t forget about the dependency of Chrome 85.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.