▼
Streaming live at 10am (PST)

Webflow site loading slow (Shopify Buy Buttons)

Community resources
#1

Hi Everyone!

I have a subscription box client (who also sells items outside of that). We are using the Shopify buy buttons since they were already using Shopify as a backend.

As soon as I integrated everything, the site speed drastically decreased. It’s also a very hefty site with tons of images and videos.

What are the best ways to speed up the site?! I have a pre-loader that will act as an age-gate but it will only be on the hop home page.

Here is my read-only: Webflow - Wine Cult

Thank you in advance!!

#2

Hi @Victoria,

First of all it’s a beautiful site that you created.

To optimize for speed, use tools as Google Page Speed Insights, GTMetrix or Google Lighthouse from the browser to get an overall view of your site performance.

The first thing that really concerns me is the uncompressed images averaging 1 to 3.5MB. This is really unnecessary and can be solved by reducing/sizing the images to an acceptable size. On top of that, you should compress the images with a tool like Ezgif.

In addition you should look at cleaning up the class names and reusing them where possible, leave out unnecessary animations and remove fonts you don’t use.

I think if you have carried out the aforementioned you will notice a significant difference in your site’s overall speed and quality. :smiley:

Measure the improvement by checking the Lighthouse or GTmetrix stats.

Cheers and good luck!

Lucas

#3

Thank you so much!!

I went in and compressed all the images to smaller than 400 KB and cleaned up class names. GTMetrix still says i’m at a C-D and Google Page Speed says I’m at 70-73 for homepage on desktop and a whopping 28on mobile :woozy_face:. The shop is my slwest page and really the only place I feel is visibly slow and that’s at a 32 on desktop.

Any ideas? Or maybe I’m totally missing something…

I will swap out most images when my client sends them over so I’m hoping those ones will be even smaller. But I am seeing a lot of things (on GTMetrix) that say clean up thing like this: https://assets-global.website-files.com/5faaf1c1c04a73644f004d41/js/webflow.33b926b97.js and https://assets-global.website-files.com/5faaf1c1c04a73644f004d41/css/wine-cult.webflow.fc6fd4bea.css and I have no idea what it is or how to get rid of it.

I really appreciate the help!!

Cheers-

#4

Hi @Victoria,

I don’t know if you already have your website live but you can gain some more under the hosting settings by adjusting the advanced publishing options, check out this video.

Besides that I would use GTMetrix and Light House as an indicator to pick out the major pain points that affect your loading speed. You will never reach 100% score because of all the factors that are considered and some of them are not supported by the system - nothing to worry too much about.

Finally, you could apply the feature of Webflow that has just been introduced to your navigation menu; link prefetching and prerendering. With this feature the code of the shop is loaded beforehand when you visit the page. → read the note of caution here.

Again try to reduce unused classes and interactions as much as possible, stay consistent in design and avoid unnecessary javascript.

Hope that worked out for you.

Cheers,

Lucas

#5

Thank you so much, @egenix! This has been extremely helpful!

Cheers-

1 Like