Recently I got an interesting performance bug on emoji-picker-element: I'm on a fedi instance with 19k custom emojis […] and when I open the emoji picker […], the page freezes for like a full second at least and overall performance stutters for a while after that. If you're not familiar with Mastodon or the Fediverse,…

Lobsters is a community-driven platform for sharing and discussing links to articles, tutorials, and projects related to technology and programming. Readers can learn about a wide range of topics, from software development and system administration to cybersecurity and artificial intelligence. With user submissions, comments, and voting, Lobsters provides a platform for collaborative learning and knowledge sharing among technology enthusiasts.

Lobsters

A developer encountered a performance issue with an emoji picker containing 20k custom emojis, causing significant slowdown. To address this, they explored using CSS content-visibility as an alternative to complex virtualization. By leveraging this feature and related optimizations, they achieved a 45% performance improvement in Chrome and Firefox. Despite this success, the author notes that for maximum performance, a virtual list remains ideal, though CSS content-visibility offers a simpler, accessibility-friendly interim solution.

Improving rendering performance with CSS content-visibility

Another important point is, that the content-visibility still only has less than 80% support rate so far.
<a href="https://caniuse.com/css-content-visibility" target="_blank" rel="noopener nofollow">https://caniuse.com/css-content-visibility</a>
And it only handles the DOM rendering but not static resource loading, so if your content includes not only text but also other resources (like images), you might need to use lazy loading.

Interesting read.
But… The better perf advantage came from removing all the <code>img</code> elements in favor of <code>::after { background-image }</code> and only applying those when in view (via <code>IntersectionObserver</code>).
To me, this sounds like the <code>content-visibility</code> and <code>img</code> combination needs to be improved by the browsers for this not to be necessary.