I’m building a CMS heavy site where we have 12 categories of products and each category has its own hero background video and a bunch of unique hero sections with CTAs.
I want to achieve this by:
Adding a category tag as a CMS field
Making every possible hero header and hero section on one template page
Filtering them with the Conditional Visibility option based on the category of the page
i.e. only show the “Hire a photographer” CTA Hero when the CMS category is set to “Photography” and hide all other CTA Heros
Now my question is this: when we set up a conditional visibility rule for say a DIV in our template page, is that DIV simply set to Display:None or is the HTML not being rendered entirely?
The problem lies with performance. Would my site visitors have to load every possible hero header and hero section on every page visit or am I telling Webflow CMS to not include that section in the DOM at all?
Hope I’m being clear - and thank you in advance for your help!
Okay so I did a benchmark and it makes no difference because Webflow doesn’t run jQuery in the HEAD so my remove() code runs after the DOM is rendered (i.e. I can’t put it in the HEAD), which is frustrating.
Unfortunately I think there’s no real way to counter the fact that using .-w-condition-invisible a lot on a page can be harmful to load times, data packages, and SEO.
Why can’t we choose to run jQuery in the HEAD? There’s a lot of talk about this on the forum but no real answer.
Use the network panel of the browser developer tools to see what happens. Until the script fires, all the assets are being loaded by the browser. Frankly this is a weak point of conditional visibility. It is designed for simple conditions, not scenarios that you describe which would be better handled by a CMS that allows server side code.
Alternately, you could custom code a solution that loads content via AJAX from your site when certain conditions are present.
Unfortunately no. I spent a good amount of time researching solutions but it’d be non-trivial. You can load a json and add the elements with AJAX after page load but you’ll need to set up a server and store your conditionally visible elements on it. The effort wasn’t worth it for my project so we just accepted the performance penalty.