Join the Webstudio community

Updated 2 weeks ago

Does Webstudio truly hides hidden CMS component (for fast page speed and clean code)

At a glance

The community member is concerned about whether hiding components in Webstudio will affect the live code and page performance. They plan to use Webstudio to rapidly build landing pages by hiding unused components and A/B testing different variations. The AI from the chat provided an answer, stating that when components are hidden using the "Show" property in Webstudio, they are truly removed from the DOM on the server side. This means the hidden components do not load or impact page performance, making it an efficient approach for conditional content and A/B testing scenarios.

I just wanted to double check with you guys if when I hide components in Webstudio if they will appear on the live code (so slowing down the page speed / web vitals without any use).

In Webstudio it says under "Show" (where you set visibility of a component):
"Removes the instance from the DOM."
So it sounds like it should work well. But I want to double-check to know if I can rely on this method for scaling.

The case:
Let's say I have this landing page here (s. screenshot).
In it there is a logo bar with the clients worked before. And I hide it in Webstudio. Will it be in the code? Will it affect page speed for the user even while it's hidden?

My idea is to build landing pages rapidly with an Airtable database and a Webstudio template that gets filled by this Airtable data (think a blog CMS but for landing pages). A/B Splittesting would be so easy from there on in Webstudio (at least with paid ads).

The landing page template is a long page with all possible sections and components – and we would hide the things we don't need with checkboxes in Airtable and conditional visibility in Webstudio.

This idea resonated with quite some clients so far because they can launch landing pages extremely fast with it and even a/b splittest what works best to max out results.

The question again: Does Webstudio loads components in code of users that are hidden? Do hidden components affect page load speed and web vitals?
Attachments
image.png
image.png
Marked as solution
The AI from the chat answered:

When you hide components in Webstudio using the "Show" property, they are truly removed from the DOM on the server side.

This means:
  1. The show/hide operation is performed on the server, making it very quick and lightweight
  2. Hidden components do not load or impact page performance
  3. The components are completely removed from the DOM, not just visually hidden
This makes it an efficient approach for conditional content and A/B testing scenarios, as hidden elements won't negatively impact your page speed or web vitals.
View full solution
H
1 comment
The AI from the chat answered:

When you hide components in Webstudio using the "Show" property, they are truly removed from the DOM on the server side.

This means:
  1. The show/hide operation is performed on the server, making it very quick and lightweight
  2. Hidden components do not load or impact page performance
  3. The components are completely removed from the DOM, not just visually hidden
This makes it an efficient approach for conditional content and A/B testing scenarios, as hidden elements won't negatively impact your page speed or web vitals.
Add a reply
Sign up and join the conversation on Discord