I’m a bit shocked to find out that Webflow’s Conditional Visibility feature actually only hides content. It doesn’t remove it. Is there a reason why they decided to still load all the hidden content?
I’m using this feature to show three very different layouts of a page depending on the content and this means the page ends up loading all three of them, but hides two.
This is also really bad in terms of accessibility. Screen readers will still ‘see’ the hidden content. The least Webflow could do is set tags appropriately for screen readers so that they ignore content that’s hidden.
Webflow renders the content statically to the hosting platform. A reason WF sites are so fast. So no dynamic code runs on the hosting platform to render pages real-time like you would have via a server-side language like PHP. So the only way you can have conditionals right now is to load it all and hide it via CSS. Loading lots of content using conditionals also loads the page with all that extra content and media (if present) which is bad for page performance.
I have used Ajax to control the loading of content on pages (from other pages or collection items), driven by custom code to work around it. If real dynamic content is a requirement I use other CMS platforms or reactive code like Vue instead.
You could use custom code to address the needs of screen readers as a workaround. Good luck with your project.