An Interest In:
Web News this Week
- March 5, 2024
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
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.
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;}
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.
Original Link: https://dev.to/bonnopc/boost-page-speed-by-using-only-a-css-property-3g5g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To