Webflow CMS rendering all hidden layouts

All,

I’ve been trying to reduce load times for my website on mobile. I took a look at my lighthouse score (23 performance, pretty abysmal) and noticed something odd. The layouts I have set up to hide are being rendered. Lighthouse is loading a huge mp4 from a hidden cms layout within the layout that is visible.

Conditional Visibility doesn’t prevent sections from loading—all it’s doing is preventing them from visibly showing on the page.

Without seeing your project I can’t give any specific suggestion towards a way to fix the issue, but you should avoid creating dynamic pages with lots of image/video content that’s mostly hidden on any given item. Instead, use Conditional Visibility to hide the structure that contains the items, and feed in the actual image/video content (image/multi-image fields, YouTube/Vimeo video links, dynamic embed codes, etc) via your collection fields. This will prevent any content from loading until the fields are filled, in which case your site would also reveal the structure that contains that content.

If you’re running into issues or have other questions, just reply with your read-only link (or shoot me a message if you’d rather not share it publicly) and I’d be happy to help out further :+1:

1 Like

Hi Mikey,

Here’s the read only link. Kind of pulling my hair out, because I rebuilt the same page as a simple static page with the same content and it gets a 98% performance score. This cms system (i followed a tutorial on webflow university youtube channel) uses layouts assigned by a cms dropdown. So i have a handful of projects each with their own layout. I was told the hidden layouts wouldn’t be rendered, but i don’t believe it. It also seems like images pulled from cms fields don’t lazy load… even though i’ve checked those settings.

https://preview.webflow.com/preview/fragment-23f6c8?utm_medium=preview_link&utm_source=designer&utm_content=fragment-23f6c8&preview=841751993c0d7a2e12a8d5a9f1b62a04&pageId=5fadd6223c8f7743114f6c48&itemId=5fadd6223c8f778deb4f6cb6&mode=preview

Thanks for sharing the link! I’m not sure if this is a Webflow template but either way the site looks great—nice work :+1:

In terms of the issue with the Work Template collection pages, I tried my best to peel back the hidden sections to see how the various projects differ from one another (along with taking a look at the staging site) but as far as I can tell they are all following the same layout–large, full-width top image followed by the project details, then a slew of images that follow a repeating pattern (full width, right aligned, then left aligned). Is this the case more or less?

If so, the solution is simply laying out your collection page with the structure showcasing the longest possible page—meaning the most amount of images that you include for any given product. For example, let’s say after the main image and intro copy, you want up to 15 image (or up to 5 groups) of that 3 image pattern I mentioned above. Your “template” page would have all of the necessary sections “designed” within the largest possible structure and whether or not you uploaded an image for that field would dictate whether that structure was used on the live page.

Right now you’ve got the template page setup with duplicates of the same structure for all of your clients but if you unhide all of those sections for any given client you’ll notice that it just displays the same content a bunch of times. With how the CMS works, you’ll keep the exact same structure (in this case, think of it like just one of the layouts you’re using) and then let the dynamic data determine which content it displays. Since the pattern of content is the same, there’s no reason to have these different “layouts” at all—you can totally remove that dropdown in each project:

image

Instead, just include Conditional Visibility on each of those image sections to only show when that specific image field is “Set”:

image

That’s it! Now it should not only be easier to add new projects (or update your Work Template collection page) but you won’t be loading any duplicate content unnecessarily :tada:

Thanks for the insight.

I think i have solved some of the bigger hurdles of optimization. One thing i’m hung up on is caching video. I have some video tags that seem to redownload every time the page is refreshed. Is there a way around this? Currently they’re being served by cloudfront/s3.

Bryce