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.
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.
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
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.
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!
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.
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.
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 ? 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?
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 - #4 by webdev) 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:
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.
Hey there again webdev - so how are you deferring your Google scripts - captcha and analytics coz they’re my main problem - www.tagdesign.co.nz
Thanks so much
Hey @danielvianna! Try using Pingdom or GTMetrix to test your websites. From experience and what I’ve read in the past days on Webflow forums I can see that neither Lighthouse/Webdev are constant.
For example, when opening an Incognito page, my scores are in the 90s on desktop, 80s on mobile. On a normal tab, 60s/70s. Pingdom/GTMetrics are more consistent.
Total Blocking Time issues come from how Webflow host and send minified CS and JSS files. There’s not much you can do there unless you self host. You can also read this post from Bryan to get a better understanding on what Webflow does.
They also don’t support WEBP files so try using a proper optimization for your pngs/jpegs.
There might be a lot of other things you can do on your end to improve the scores, but you might have to provide a shareable link.
Congrats on the software @stacket! Looks super interesting, I’ve liked it to have it for later use.
Right now I’m trying to optimize our company’s website as much as possible, but we’re still adding pages regularly so it makes sense to keep it on Webflow.
And thanks once more. I appreciate the help!
