I'll jump directly to the two line of css that you need to add to improve your performance by approx 7x:
{
content-visibility: auto;
contain-intrinsic-size: 1px 5000px;
}How does it work?
The browser acts smart by skipping rendering work with the class you applied with content-visibility: auto.
Browser needs to know the layout of the DOM in order to render, those elements which are not in viewport are not rendered and infact have empty box with contain-intrinsic-size you provided.
To summarize all of the rendering is deferred until it reaches the viewport at which the browser renders the actual layout with the width, height and styles you provided.
P.S: the layout which are not outside of the viewport would have a height: 0, so when deferred layout comes to viewport it would stack on top of each other, so that's why contain-intrinsic-size is needed, However, no worries these are just a fallback values, browser will render the actual ones when it renders in viewport.
Hence one drawback of this is the scrollbars would be wacky and jump to places if the contain-intrinsic-size not given properly. :)
Browser Support
content-visibility relies on the the CSS Containment Spec. While content-visibility currently is supported on mostly chromium tech as in May 2022.
However, content-visibility support is not bad for a good to have feature on high end systems, however with progressing web development it will soon be supported in all browsers too. Hopefully :)
Why do you need this?
Website's nowadays need to be optimal and performant, users on the web have very short attention span. According to Doherty threshold response time to be 400 milliseconds.
Now imagine a website like Facebook, Instagram etc.. taking more time than the threshold? No one would be coming back to these sites again.
When would you use this?
Most common use cases for this is when you have huge list/grid of data that needs to render at the mount of the application.
Example: Static website like specs or documentation or travel blogs etc...