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.
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.
Measure the improvement by checking the Lighthouse or GTmetrix stats.
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 . 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 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.