Streaming live at 10am (PST)

Conditionally hidden elements still loading?

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

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


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

    const eraseHidden =  () => {
        el => {

  document.addEventListener("DOMContentLoaded", eraseHidden);