Before, we learned that content-visibility is likely to improve the pagespeed and performance of your website. But considering all caveats, how should you approach content-visibility implementation yourself?
Before implementing it, it is important to be aware of the (current) downsides of content-visibility. As can be read in that very article, I already did some testing and started to implement it as well, despite known issues. I tried to minimize issues without too much additional coding or effort, as I got my hopes up most of them will be solved by browsers themselves.
Content-visibility on mobile devices
CPU on mobile devices aren't up to par with laptop or desktop CPU. So, mobile devices are likely to benefit more from performance gains. Moreover, as you can't really scroll by grabbing the scrollbar (remember this scrollbar demo? On desktop + Chrome/Edge, try to scroll using by grabbing the scrollbar without getting frustrated), a dancing scrollbar isn't as obvious and thus not as frustrating.
As a result, I chose to only apply the content-visibility property on small viewports.
Alex Russell already wrote about addressing the jumping scrollbars while also staying performant when a browser is being resized. As this requires a bit of JavaScript though, I did not choose to to use this fix.
Only make content invisible once
Depending on your rendering strategy, most browser work might be needed on first pagehit, such as downloading assets. Download of assets isn't blocking the main thread, but at least you get to improve performance and speed up things on an interaction which might be most important when it comes to user engagement: first pagehit and thus first loading experience.
As I already implement critical CSS on first pagehit, this was easy to implement for own cases. This approach also results in not having any of the downsides or caveats that content-visibility is currently suffering from.
Content-visbility conclusion
I've already drawn a CSS content visibility conclusion before. But the take-away of this article is that instead of just implementing new technology, you also have to do it yourself and think about the journey of your website or webshop visitors. It basically is the same for usage of third parties and libraries:
- Don't just implement third parties, but try to improve performance of chatbots yourself, for example;
- And why should you blindly use a framework's outline, when you can improve anchor accessibility even on top of Bootstrap.
Need help reviewing your situation? Let me know!
