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
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.
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
And thanks once more. I appreciate the help!
