The content-visibility property can be used to increase the rendering performance of webpages. It may be interesting to see how this might be incorporated into Cornerstone.
More info:
https://web.dev/content-visibility/ | https://css-tricks.com/almanac/properties/c/content-visibility/
Sorry this is a little off-topic but I thought this is interesting enough to share and see what your thoughts are.
Hi @JvP,
Really cool idea here. At the moment it feels very content/design specific. We’ll keep it in mind. There are some lifecycle things you can take advantage of now to play around with it. For example, WordPress automatically adds/removes no-js and js classes from the body. That means you could add this Global CSS:
.no-js .x-colophon,
.no-js .x-section:not(.above-the-fold) {
content-visibility: hidden;
}
I’ve not tested it, but I imagine that will set content-visibility: hidden on the footer and any sections where you add a class called: above-the-fold. When the page fully loads it would no longer apply. I’ve not used the technique enough to know if it will make much of a difference, but it might be worth experimenting with.
Pretty cool indeed. The performance improvements some people were able to achieve with it are quite impressive. I’ll experiment a bit as you suggested. Maybe that sometime in the future this could be an option in the builders that you can toggle per element or something.
Ok sounds good! Looking forward to hearing your thoughts after you’ve had a chance to play around with it more.