Conditionally hidden elements still loading?

Design help CMS
1

Hey all,

I’ve got different sections of my portfolio’s “Projects” template page, with the sections for items other than the “Current Project” set to be conditionally hidden.

This works great generally, but when I run my any page through Lighthouse it flags certain items from other projects than the current one as too large/not “next-gen” format, etc.

While I understand that webflow has no current plans to support WebP, and that I should definitely be optimizing all images on my website (currently working through that…), I’m just curious if this is a hiccup in Lighthouse or if all elements from all my other collection pages are being loaded and then hidden on every page?

Thanks for your time.

Here is my public share link: LINK
Here is a screenshot of Lighthouse’s output to show what I’m talking about: LINK

2

If you view the page source you can see that conditional areas are present and just hidden via CSS. So the browser will still have to load the assets even though they are set to display none. No way around this with Webflow.

1 Like
3

Hi.

Add this script to your header and the elements containing the hiding class will be erased from your html.

  <script>
    const eraseHidden =  () => {
      document
      .querySelectorAll(".w-condition-invisible")
      .forEach(
        el => {
          el.remove();
        } 
      );
  }

  document.addEventListener("DOMContentLoaded", eraseHidden);
  </script>
6 Likes
4

I can’t believe this is still unchanged - browser has to load all the hidden elements with no reason.

5

This has literally cut my DOM size in half– many thanks @paco

Without some sort of variable conditions, it’s pretty confusing why they’d opt to still load that content– I was for sure under the impression it was not being loaded :man_shrugging:t2:

1 Like
6

For some reason, the script doesn’t work for me. It still loads all the site elements.

For anyone who wants to create custom layouts for different CMS items, I’m working around this issue by:

  1. Creating an empty page and designing the layout
  2. Making sure this page is hidden from search engines
  3. Publishing the page, right-clicking on the page, and viewing the page source
  4. Copying the HTML for my layout between <body> and </body>
  5. Opening the desired CMS item and adding a custom code element to a rich text field
  6. Pasting the HTML of my layout into the custom code element
  7. Publishing my page
7

Thanks. This literally solves my headache!

1 Like
8

Thank you so much. This is awesome!!!