▼
Streaming live at 10am (PST)

Conditional Visibility options: simply Display:none?

Design help CMS
#1

Hey everyone!

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:

  1. Adding a category tag as a CMS field
  2. Making every possible hero header and hero section on one template page
  3. 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!

#2

After some investigation, I found that Webflow basically just sets the display to none using a class called .w-condition-invisible

This means that the conditionally invisible objects are still in the DOM when the page loads.

To take them out of the DOM, I added the jQuery’s remove() method to my whole website:

$(".w-condition-invisible").remove();

Now they don’t appear in the DOM either but the performance gains are yet to be tested.

Does anyone have any comments/suggestions about this method?

#3

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.

#4

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.

#5

Hi, were you able to find a solution for that? I’m experiencing the same problem with conditional visibility sections.

#6

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.

#7

Yeah it does not seem worth it to me as well. Thanks for the info, much appreciated