Idea: Implement CSS' New "content-visibility" for Dramatic Performance Boost

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.

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:

https://www.youtube.com/watch?v=FFA-v-CIxJQ

Great to hear that and thanks for sharing!

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