[Support request] Idea: Implement CSS’ New “content-visibility” for Dramatic Performance Boost

[David]

No point in applying it to the back to top as this has a fixed position – so although it is hooked after the footer it should be displayed way before that is ever reached.

There have been reported issues with earlier versions of Chrome ( patched in Chrome 90 ) that content-visibility rules being applied to Landmark elements caused problems with the accesibility tree – so assistive technologies would not see them. So landmark elements such as <nav> ( which includes the #nav-below ) and <footer> should be excluded.

For archives you would apply it to the individual post.

You can find a list of issues of the CSS3 Working draft git – see here:

https://github.com/w3c/csswg-drafts/search?q=content-visibility&type=issues

How many other issues that may arise, i don’t know… its why its best to tread carefully when applying any working draft or experimental CSS.

[acela]

Thanks David!

I have implemented this on my site and it is making a real difference on reducing rendering times and improving CWV scores.

I found this video helpful in better understanding how content-visibility: auto; works:

[David]

Great to hear that and thanks for sharing!

[93487u5tr938ouh4trnos8fyoh]

If it’s really that good, can’t we make this as an option in the theme itself for non-developers like me?

[Author]

Posts