Finished Client Site. Bad Page Speed! Suggestions?

Hey community,

I finished my clients fair fashion site. But I´ve huge problems with page load speed.
I checked the site with Googles PageSpeed Insights, but I don´t know where to start.

Biggest problems:
-Background Video on mobile devices
-display:none images are getting loaded in background
-recaptcha javascript
-youtube embed
-support for lazy load cms images?
-webflows automatic responsive images (instances) are not working propably

I´m glad for any advices!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Firstly this is a great looking site, nice work :+1:

Site speed scores are a bit tricky, I went ahead and ran your site through Lighthouse and I wouldn’t consider there to be any huge problems:

image

Biggest problems:
-Background Video on mobile devices
-display:none images are getting loaded in background
-recaptcha javascript
-youtube embed
-support for lazy load cms images?
-webflows automatic responsive images (instances) are not working propably

  • Background videos on mobile are tough, have you considered changing it to a static image on smaller devices?
  • What’s your use of display: none here? This is something that there’s not much getting around unless you’re talking about background images (which are served completely in CSS).
  • I’m guessing you added this to have reCaptcha in the background instead of using the default element in Webflow? I’d guess that displaying the email on-page (instead of hiding it behind a form) is opening up the possibility of spam in general, so this may not be necessary unless you experience a noticeable uptick in spam without it.
  • There are some tricks you can use to prevent the YouTube embed from loading until click, so I’d check the article here and see if you can apply it to your use case.
  • Webflow recently added a new dropdown for loading preference on all images (including dynamic CMS images) that may help on browsers that take advantage of native lazy loading:

image

  • What specific problems are you noticing? I’ve seen other users mention that sometimes responsive images can actually turn out to be larger than their full sized counter part, so I’m not sure if that’s what you’re experiencing. To disable this feature per image, just use the CTRL(CMD)+Shift+O command to reveal the Responsive Image toggle in the settings panel:

image

Hopefully that helps :webflow_heart:

Thank you @mikeyevin!
I ran the site through Lighthouse too and got other scores:

Background videos on mobile are tough, have you considered changing it to a static image on smaller devices?

  • Changing the background video to a static image on mobile devises has no effect on the page load speed, because it is still loaded in background to the assets. :frowning:

What’s your use of display: none here? This is something that there’s not much getting around unless you’re talking about background images (which are served completely in CSS).

  • Same thing with images. I have hidden the slider images on mobile devices. However, they are loaded in the background.

I’m guessing you added this to have reCaptcha in the background instead of using the default element in Webflow? I’d guess that displaying the email on-page (instead of hiding it behind a form) is opening up the possibility of spam in general, so this may not be necessary unless you experience a noticeable uptick in spam without it.

*Unfortunately, I need the reCaptcha process. But it requires a lot of loading time. Is there a better way to do it? 880+619ms Main-Thread Blocking

  • Uh so cool, lazy load for CMS images. I’ve overlooked that, thank you! :smiley:

The main problem is the main-thread-work of 8.8seconds and the Javascript execution time with 6 seconds. Especially on mobile I´ve huge problems. I think I´ll delete the youtube embed and build a new page for the newsletter aswell. So the reCaptcha javascripts are not on the main-page. I´ll also minimize the file-size of the background video.

Ah okay, I checked the mobile-specific version of the site in Lighthouse and I’m getting a similar result.

Same thing with images. I have hidden the slider images on mobile devices. However, they are loaded in the background.

This is expected, as you’re using normal image elements and not background images. Display:none will still render elements on the canvas—just not display them to the visitor. It may be beneficial in your case to see if you can use background images on div blocks instead, and potentially serve up different variations (at smaller file sizes and lower resolutions) for mobile users. You can “delete” background images on specific breakpoints and they won’t be loaded (or in your case, change it to a completely different image) as it’s called using a CSS rule.

Changing the background video to a static image on mobile devises has no effect on the page load speed, because it is still loaded in background to the assets. :frowning:

Ah I see, this may be a situation where some custom code is needed to prevent the video from loading on mobile devices—Webflow’s background video element doesn’t appear to do this by default.

Unfortunately, I need the reCaptcha process.

Can you explain where the reCaptcha is being used? I can’t find any form elements, and I don’t see it tied to your email link in anyway so I guess I’m a bit confused at what it’s doing. I was able to find an article that outlines adjustments you can make to prevent the script from loading unless a user focuses on a form element, however I’d imagine it could be modified to only load when a user clicks on an email link (if that’s how you’re using it now).

I think I´ll delete the youtube embed and build a new page for the newsletter aswell. So the reCaptcha javascripts are not on the main-page. I´ll also minimize the file-size of the background video.

These fixes will do quite a bit to minimize load times, I believe I saw something like 2MB attributed to the video file on mobile which could be a large amount of your score here (alongside the YouTube JS, reCaptcha JS, and some larger than necessary images).