ECOMMERCE / HOW TO MAKE YOUR SHOPIFY ECOMMERCE WEBSITE LIGHTNING FAST
Some things are worth waiting for – websites are not one of those things.
Speed matters when it comes to websites. Faster websites improve user engagement and improve ecommerce conversions. There’s tons of information out there proving this as fact. So why do we still see Shopify ecommerce websites loading in 5 seconds or more?
Shopify has become a leading ecommerce platform through its ease of use and accessibility for non-technical users. Managing a Shopify store day-to-day is a heck of a lot easier than most of the competition. Same goes for building on top of the platform.
However, these same strengths can also be the platforms achilles heel. Many Shopify ecommerce store owners suffer from slow loading websites.
So is this an issue with Shopify’s infrastructure? Is Shopify inherently slow? Do I need a full ecommerce website redesign to achieve better page load times?
The quick answer – absolutely not.
While Shopify does have some limitations regarding in-browser caching, 99% of the issues we see with page load speeds on Shopify stores come back to user error. Unfortunately, the ease of access and use that makes Shopify so great is often it’s downfall when it comes to page load times.
Without proper asset or code management, it’s a matter of time before your store becomes bloated and sluggish (A little like me after Thanksgiving)
How You Should Monitor Your Website Speed
Our preferred speed test tool comes from Pingdom. Google and GTMetrix also have very viable tools.
We prefer Pingdom mainly based on the balance of information and the visualization of that data. Without getting into the nitty gritty of what everything on this page means, the key things to focus on at a glance are total page size and requests.
When performing a test we run it 3x and average out the results, because sometimes random factors may throw off a single report.
A lower page load time will always be better than a longer load time, but generally we classify page load times as:
- <3s Ideal
- <5s Acceptable, but has room for improvement
- >5s Unacceptable, most likely causing you to lose money
The reason we put the barrier at <3s for optimization is because in many cases, while you could squeeze out additional page speed through advanced techniques, the cost-to-benefit is often diminished. Unless you’re rivaling Amazon’s sales volume a 1s or 2s load time won’t make a tremendous difference in your bottom line.
Start By Attacking Page Size
We approach these types of optimizations by going after page size first – and we suggest you do the same.
How To Handle Images
Reducing page size is primarily optimizing assets, which is easy (albeit boring) work.
Our preferred tool for attacking images is Kraken. This nifty image optimization tool is great for ecommerce website development because it allows you to bulk optimize and then bulk download those optimized images.
Handling individual images, such as promotional banners is pretty straight forward. Just replace the image on a case-by-case basis with your Kraken optimized one.
If you have a large product library, bulk downloading and uploading product images in Shopify can be a chore.
To handle bulk downloads we use Shopify’s native product export feature to create a CSV. With this extension installed, we then open up that CSV in Google Sheets and use the extension to bulk download all of the files in the image column. You can then take the zipped file folder and drop it directly into Kraken so it can work it’s magic.
After Kraken’s completed its optimization, you need to get these files back on the site.
We’ve done work arounds with cloud storage tools such as Dropbox to get images in their efficiently, but honestly, we feel the easiest solution is to use this app PxUpload. The $14 is well worth the headaches and time wasted manually doing this.
Reduce The Length Of Your Home Page
There has been a trend of websites adopting really long home pages. E-commerce websites are some of the worst offenders.
Most of the time we discover that after entering into a home page, only 50% of our clients homepages are being viewed.
Why? Well, if you’re doing things right customers shouldn’t have to take time to scroll down your home page. Everything they need will be presented within 1-2 scrolls.
More often than not, they’re going to click your initial offer or use your navigation to jump into a product category they’re interested in.
Using tools like Hotjar help validate these findings by showing you both scroll thresholds and click interactions.
Any section of your home page going unused is extra weight you can remove. Ditch it.
Reduce Other File Sizes
Images will always end up being the biggest impact on page size, but there are other offenders too.
Our client, CoverFX had a theme with a ton of inline CSS styling which was adding nearly 200kb of bloat to their home page. Moving this inline markup to a separate style sheet lifted their page load speed by 15%.
When you’ve cut this stuff down to it’s bare minimum, it then it’s time to minify scripts. Google has some great resources you can use to make sure all of your scripts are as small as possible.
Limiting Total Requests
Opt For Less
The same logic for page length and weight applies for requests. Longer pages tend to have more assets, more assets create more requests.
Keep your home page to it’s bare minimum.
Leverage Google Tag Manager
DON’T install apps or individual scripts on your website for user / sales tracking. Leverage Google Tag Manager instead.
Combine Requests via. Concatenation
This technique is a bit more advanced, and definitely requires some developer know-how to execute correctly.
Shopify uses a CDN to host theme assets such as JS and CSS files. We aggregate those files before they are served to the user to reduce load times. The CDN then serves compressed versions of these files close to our clients’ customers.
Combined with our low request count due to the use of aggregation, this allows us to load and render our Shopify clients’ pages in fractions of a second.
Our theme build system is structured around this concept, and combines things automatically before we deploy through the use of Gulp.
For those of you who are a bit more tech savvy, this article from CodeHanger does a great job of explaining how to accomplish this.
With proper planning, and a bit of due diligence it’s not hard to keep your Shopify website fast.
The quick win work usually lies with the optimization of assets, specifically images.
When you’ve exhausted as much as you can do with asset optimization, moving on to minifying requests is the next best step. Combine scripts and CSS wherever possible.