Improve rendering performance with content-visibility

[westonruter]

Feature Description

With the URL metrics gathered by Optimization Detective, it should be possible to automatically apply content-visibility to areas of the page to delay rendering them until they are in the viewport. This has the opportunity to improve INP.

See:

• https://web.dev/articles/content-visibility
• https://nitropack.io/blog/post/content-visibility-inp
• https://www.speedkit.com/blog/field-testing-css-containment-for-web-performance-optimization?s=03
• https://wordpress.slack.com/archives/C02KGN5K076/p1702577463610039
• https://dev.to/sebastienlorber/css-content-visibility-for-react-devs-4a3i
• https://web.dev/blog/css-content-visibility-baseline
• https://www.debugbear.com/blog/content-visibility-api

[westonruter]

Content-Visibility is now baseline!

[tunyk]

Please add this CSS at least for basic WordPress themes

[westonruter]

@tunyk How do you see it being used in themes?

I believe this would be most effective when content-visibility is applied to each root block element in the post content or else for each post's container element in the loop on an archive page. In order to do this, it is necessary to have the height of the element computed on the various breakpoints. This is something that Optimization Detective can provide. I think this would be independent of any theme-specific styling.

[tunyk]

I agree, in the context of standard themes. But if we are talking about all themes, then you should take into account that many of them use infinite scroll and Ajax.

[westonruter]

@tunyk So how do you see this being applied? In order to apply content-visibility you need to know what the intrinsic dimensions are for the element that is being hidden prior being shown to specify in the contain-intrinsic-size style, right? I'm having a hard time envisioning how apply content-visibility in the context of infinite scroll. Also, isn't infinite scroll somewhat of an alternative to content-visibility in the first place? With content-visibility you can have a huge document and not hurt rendering performance. With infinite scroll you start with a small document and then add to it as you scroll. So both are effectively two ways to solve the same problem.

[tunyk]

There is no clear-cut solution here. Theoretically (depending on the implementation of infinite scrolling), the Speculative API may also be involved here.

[westonruter]

For reference, I put together an example of the impact that content-visibility can have when applied to the container element of a post in The Loop on an archive page:

Disabled: PageSpeed Insights
Enabled: PageSpeed Insights

For both mobile and desktop, the LCP is degraded when using content-visibility for some reason.

[westonruter]

Oh, the degraded LCP may be because I included content-visibility for the initial post as well:

#post-1241 {
    content-visibility: auto;
    contain-intrinsic-size: auto 846px;
}

This results in lazy rendering of the first (sticky) post which is in the initial viewport. Lazy loading (or rendering) anything in the initial viewport is a performance anti-pattern. I'll remove that and re-test.