What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

content-visibility provides control over when elements are rendered, so rendering can be skipped for elements not yet in the user's viewport. It is only available in Chromium browsers, and shouldn't negatively affect the other browsers which have not launched this feature.

These posts do a great job explaining it...

https://web.dev/content-visibility/
https://dev.to/dailydevtips1/i-made-my-website-28ms-faster-with-content-visibility-466e

This PR only applies to a handful of divs. We could go further with this, but this is some simple low-hanging fruit— Especially with the footer appearing on every single page load.

This functionality uses contain-intrinsic-size to tell the browser approximately what size to expect. It doesn't have to be spot on, but it should be approximately correct. That makes it harder to use with, say, comments where they could be really any size variation and predicting a good height to pitch to the browser seems more trouble than it's worth. In this case it takes elements which won't vary greatly in size (even with different window widths).

SEO: This should have a positive impact on UX in a very tiny way, but since this is being promoted by Google, I have to think the search crawler should appreciate it.

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

It's hard to see this working. But if the size was calculated decently the scrollbar shouldn't radically change in sizes.

Please replace this line with instructions on how to test your changes, as well
as any relevant images for UI changes.

UI accessibility concerns?

I believe this would not affect accessibility by implementing this in the standard way, but if anyone has ideas why it would, feel free to chime in.