Streaming live at 10am (PST)

New Google Page Speed tool - How to fix issues in Webflow

Hi,

The updated Google page speed tool shows a very low page speed at 51% for my Webflow site. I understand how I can improve certain aspects (like using new image formats and compressing images more heavily). But how can other issues be resolved in Webflow, for example:

  • Eliminate render-blocking resources
  • Defer unused CSS
  • Ensure text remains visible during webfont load
  • Minimize main-thread work
  • Serve static assets with an efficient cache policy
  • Reduce JavaScript execution time
  • Avoid an excessive DOM size
  • Minimize Critical Requests Depth

Thanks for your help, I really appreciate it!

1 Like

Yes! Why are there no answers on Webflow for any of these questions?

3 Likes

I think there needs to be a concrete case when discussing site speed. Google tool is known for wonky estimations, sometimes google’s own services fail at its own test.

Here is a lighthouse screenshot from an audit I just ran. Mobile on simulated 4G. Site is just a plain page with lots of elements added to it. No animations and no images.

CloudApp

Most of my client sites score high upper 90’s on desktop, low 90’s on mobile. So the choices you are making is affecting your sites performance.

Here is the full report for this audit in {json}. If you want to get specific, lets. Start by sharing your URL and I will be happy to tell you what you can do to speed up yours.

3 Likes

Hey Jeff,

I’m working on improving my mobile site load as well. I’ve dealt with the photos, but still have the same issues as OP. I’d really appreciate if you could take a quick look at my site, as I’m not sure how to go about addressing these issues. The site is https://savvyjackwax.com and my read only is //preview./preview/savvyjack?utm_medium=preview_link&utm_source=designer&utm_content=savvyjack&preview=c2b6e0f83351105e807b2800ab59da53&mode=preview

hi @SavvyJack,

looked a bit at your site. Your images are pretty high in resolution. I’d make them much smaller and compress them more. Also I see you are using some 12 different fonts - that also slows loading down. Try to only make use of - say - three max.

1 Like

Thanks for the advice @new_work_city. I reduced the font weights for the typefaces I’m using in project settings, but I can see that many Merriweather fonts are still loading. Do you know how I can remove these as well? I guess thats the default font? I don’t see them in project settings. I did play around with the image resolution a lot, and brought them down to just above where they noticeably degrade in quality. Perhaps I can add more lower res versions for mobile only… Can these be compressed further without a significant loss in quality? How would I go about doing that? Thanks again for the help!

can u give the read only link please - the one you posted is broken

Weird. Sure can. https://preview.webflow.com/preview/savvyjack?utm_medium=preview_link&utm_source=dashboard&utm_content=savvyjack&preview=c2b6e0f83351105e807b2800ab59da53&mode=preview

Hi @SavvyJack,

The images look good for size-wise now.

Hi @SavvyJack - I was not following the thread so I missed your topic. In the future you can do an @ include.

That one is used in your navbar.

Go for the low hanging fruit (the main body background), that could be turned into a tiled image for example. The backround image on mobile is 278kb,

When the page is loaded, images that are hidden in CSS are still downloaded by devices. Example would be the two images in the div.savvjack-mustache-wax-open-tin. So since the client has to load them anyway, do you really need both?

Since you are loading the cart on the home page, you have ecom related scripts being loaded. Not much you can do there. Facebook scripts might be optional to you. If you were running a campaign on Facebook, you may elect to use a landing page for that.

You should be able to drop another 100-150kb from the page load without much work.

I would also experiment with different landing pages and see what changes could also effect conversion rates, and page load speeds.

Depends on what is in your arsenal. I typically experiment using Photoshop, where I can see the amount of savings and the effect on quality.

Thanks for all the pointers. I went through everything in the navbar and they are all set for Baskerville or Spectral. Am I missing something? I can’t find element set to Merriweather in the designer.

The background image is currently at its smallest tile unit size to appear as a continuous wood background. I do have different image sizes for the web vs mobile background. Are these both being loaded as well, or does that not apply to background images. If so, does that mean I can use dv block background images for div.savvjack-mustache-wax-open-tin to avoid loading both?

I’m making a Facebook landing page soon, so I’ll be sure to take the tracker off the home page.

Okay, yes I have brought the size down in photoshop using lower resolution and quality jpegs and png-8.

Product Template -> Navbar

The issue is when you set display:none on an element. The browser still loads the content. So if you set visibility on an element for different breakpoints, it is still loaded. Background images will load only when the media query is a match, so the one for desktop on the body, is not loading (downloaded) on mobile, just the mobile background.

You may determine that since only a small part of the body background is visible on mobile, a repeated image will work just fine.

Off to dinner. Later.

Enjoy your dinner and thanks again for all the help!
Took care of the extra fonts. I believe if I understand correctly, that I decreased the image load by implementing background images for the div.savvjack-mustache-wax-open-tin as well as for the header image. Is this the case? (For the header I have a very small <1mb placeholders)
Good thinking for the mobile background. I decreased the height of the image, and also realized I could further compress because i had the mobile background set to ‘cover’ which wasn’t utilizing the full width. It brought the size down to 75kb!
I’m going to work on making the ‘paper’ background images smaller. Is there anything I can do to optimize the “Eliminate render blocking resources” Lighthouse suggestion? Or any other suggestions you have for me ? :slight_smile: And thanks once more. I appreciate the help!

Hey @webdev. I am working on a separate product landing page on the https://savvyjack.webflow.io/ domain. I was thinking it was the add to cart button that was causing the heavy stripe.js load, but I guess it is just having the view cart. So is there any benefit in not having an add to cart button on the homepage as far as page speed, if I still want to have the view cart?

Use browser dev tools to determine page loads and timing. Removes speculation. My free time is limited right now.

1 Like

Hello @webdev and @vincent . I used the lazy loading tips you both have mentioned in other posts (Exclude element from Page Load and I want my header to load first) as a way to delay the loading of my cart wrapper. The stripe and paypal scripts seem to have a large impact on my page load times. I made the cart wrapper class Cart_Wrapper and added the following code to the end of the tag in Project Settings:

(function() { (’.Cart_Wrapper’).lazy({
delay: 2000
});
});

After this modification, the stripe and paypal scripts no longer appear in the Google Lighthouse audits under “Eliminate Render-blocking scripts.” What are your thoughts on this modification? Is it advisable? Thank you for your time.


Website: https://www.savvyjackwax.com/product/mustache-wax
Read-only link: https://preview.webflow.com/preview/savvyjack-v2?utm_medium=preview_link&utm_source=dashboard&utm_content=savvyjack-v2&preview=959011ce61986c625326fcc2687cb0cd&mode=preview

1 Like

I’m having similar issues, when I had my portfolio in React / Gatsby those things were more controllable.
Any ideas on how to improve this?

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdvianna-4e6f78457569fe929b97faddf483fa1.webflow.io%2Fcase%2Fsenna

Hey, I am having issues with mobile speed. It would be great if you can take a look. URL: www.deepersignals.com

Thanks!