Una Kravets and Vladimir Levin:
[…] you can use another CSS property called
content-visibilityto apply the needed containment automatically.
content-visibilityensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer.
content-visibilityproperty accepts several values, but
autois the one that provides immediate performance improvements.
The perf benefits seems pretty big:
In our example, we see a boost from a 232ms rendering time to a 30ms rendering time. That’s a 7x performance boost.
It’s manual work though. You have to “section” large vertical chunks of the page yourself, apply
content-visibility: auto; to them, then take a stab at about how tall they are, something like
contain-intrinsic-size: 1000px;. That part seems super weird to me. Just guess at a height? What if I’m wrong? Can I hurt performance? Can (or should) I change that value at different viewports if the height difference between small and large screens is drastic?
Seems like you’d have to be a pretty skilled perf nerd to get this right, and know how to look at and compare rendering profiles in DevTools. All the more proof that web perf is its own vocation.
The post content-visibility: the new CSS property that boosts your rendering performance appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.