Nolan Lawson discusses a performance issue encountered with the emoji-picker-element, particularly when handling a large number of custom emojis on a Mastodon instance. The challenge arose from the presence of nearly 20,000 custom emojis, which resulted in a significant number of DOM elements and caused the page to freeze and stutter during rendering. Each emoji was represented by a button and an image, leading to a total of around 40,000 elements. Despite using lazy loading for images, the sheer volume of elements made rendering slow, far exceeding the recommended limit of 1,400 elements by Lighthouse. Lawson initially considered implementing virtualization to manage the large number of elements but was hesitant due to its complexity and potential accessibility implications. However, he later realized that CSS content-visibility could provide a simpler solution. This CSS feature allows certain parts of the DOM to be "hidden" from layout and paint processes, improving performance without affecting accessibility or requiring virtualization. To implement this, Lawson used the emoji categories as a sizing reference, applying CSS custom properties to estimate the size of off-screen elements. This approach allowed the browser to reserve space for these elements without rendering them immediately, which significantly reduced layout costs. After testing, he found that the initial performance improvements were modest, but further investigation revealed that the lazy loading of images was still causing performance issues. By removing the lazy loading attribute and instead using CSS to set background images on pseudo-elements, Lawson was able to halve the number of DOM elements and create a more efficient loading mechanism. This change resulted in a substantial performance boost, with improvements of around 40% in Chrome and 35% in Firefox. Ultimately, the emoji picker’s performance improved from approximately three seconds to just over one second, making it much more usable. Despite the success of this solution, Lawson expressed concerns about scalability for even larger instances with more emojis. He acknowledged that while content-visibility provided a good interim solution, a virtualized list would still be the optimal approach for maximum performance. He remains hopeful for future developments in web standards that might introduce built-in virtual list capabilities, but for now, he finds content-visibility to be a practical alternative that balances performance and accessibility.