How to Speed Up Your Shopify Store

Ecommerce, Shopify

As the year’s holiday rush comes to a close, consumers are putting finishing touches on their gifts. For the online retailer, it’s a completely different story. This time of year usually involves evaluating how well their stores performed and planning how to optimize for next year. What was the most important factor for their success? Was it greater advertising spend? Was it the right mix of marketing channels to reach the right buyers?

We believe a highly underrated factor in boosting sales is page load times. We interviewed Sina Khanifar, co-founder of Repeater Store and page load optimization expert, who gave us some interesting numbers that made us think about page load times in a whole new way.

slow

If you’d like to start the new year in high gear, here are some tips on how to speed up your Shopify store.

I. Key tools for measuring load times

Google’s Pagespeed Insights. This tool gives you a quick overview of your site. But don’t take their results as gospel – many of the recommendations can be too general and not very actionable.

WebPageTest. This is a great tool for analyzing exactly how quickly your page loads, and what’s causing the lag.

The Network Panel from Chrome. If you’re looking for more in-depth information on your current load times, Chrome’s network panel is the tool to use. The network panel allows you to throttle your connection and record network activity. You can see exactly which resources are loading, in what order, and what files are taking the longest to download. You can access it by holding down cmd+shift+c on Macs or ctrl+shift+c on PCs. A good benchmark, according to Sina, is a 4-second page load if the connection is throttled to DSL. To find out your load time, click the “No Throttling” dropdown, select “DSL”, and refresh the page.

Read more about the network panel here.

II. Speeding up your load times

1. Compress images.

Sina works to compress images as much as possible. Shopify does this to some degree already, but your theme images might benefit from more compression. He recommends using ImageOptim’s online MozJPEG tool for compressing MozJPEG, as well as ImageAlpha and ImageOptim. If you have large product images you’re best off lazy-loading them using javascript instead of loading them directly in the html.

2. Remove any unused apps.

3. Concatenate files.

The browser will have fewer files to load before displaying your page. Unfortunately, Shopify makes this a bit difficult by not supporting the scss `import` function. If you want to work around this, Sina recommends using grunt or gulp job to concatenate multiple files together. Here’s a github repo that’ll help you get started: https://github.com/Shopify/shopify-css-import (If this sounds too complicated for you, then it is – contact your dev!)

4. Use a CDN (Content Delivery Network) to serve your images, videos and any other sizeable files.

CDNs like Amazon Cloudfront specialize in serving website files at any location in the world. They make a huge difference in load times.

5. Take a closer look at your JavaScript.

Make sure you are minifying javascript files in your theme, and remove any unused javascript. In particular, Bootstrap ships with lots of extra javascript modules that you may not be using.

Move as many javascript files as you can from your “head” tag to right below your closing “body” tag. That way the browser won’t wait for them before loading the site. Alternatively, you can add “async” tags to the “script” tag.

6. Use the dns-prefetch tag.

In a nutshell, the tag (added to the html file) minimizes DNS lookups which cuts down load time. More info here.

Why is it important to continually optimize your Shopify site’s load time?

Since users care about page load performance, search engines have started using page load speed as a factor in their rankings. Google even uses page load times in determining the position of Adwords. So, not only does load time affect how many users will stay on or return to your site, but it also affects how many users will arrive to your site in the first place, and how much that click-through or impression will cost you.

In this post, we outlined tips to speed up Shopify stores, but optimizing your page load time is largely the same whether your store is powered by Shopify or something else. Shopify does some of the optimization for you, but you should go above and beyond to attract extra traffic to your site. Sina follows Shopify’s general blog, as well as their developer blog, where you can find great articles on optimizing your e-commerce store. Other resources Sina uses include Gavin Ballard’s blog and the eCommTalk Shopify Group on Slack.

Since Repeater Store moved their site from Magento to Shopify, they’ve enjoyed Shopify’s vast ecosystem of supporting apps and plugins. We’re launching our payment platform for Shopify next month, enabling merchants to cut their processing fees in half. If you’d like to try Sezzle for free for 30 days, let us know.

Questions?
Write to @sinak or @repeaterstore on Twitter, or on their Facebook page.

Sezzle Curve