7 Tips To Speed Up Your Shopify Store

speed up your shopify store

Your Shopify store loads in over 2 seconds? I guarantee you are losing a lot in terms of revenue and potential rank in Google’s search results.

You see, for every extra 1 second in your Shopify loading speed, you increase your bounce rate by 10% according to The BBC. And that will cost a lot in the long term. It could even mean reporting profits, or filing for bankruptcy for most startups.

So in the next few lines, I’ll share with you 8 powerful tips to speed up your Shopify store. Most of these tips can be implemented without the need to hire a developer, so you will have no excuse if your website still loads slow after reading this article.

Optimize Images

When we talk about the loading speed of any website, the first thing we’ll always be talking about is reducing the size of the page by compressing images.

There are multiple ways of doing this. You can either do it manually which will cost nothing. Or you can do it on autopilot by using a third-party solution.

To implement this manually, you can upload your images each one at a time to websites like Tiny PNG, and then download them back to your computer. After getting the compressed version, you will need to upload it to the relevant Shopify product.

You may as well use Photoshop to compress images and then upload them to Shopify.

The automatic way to do it is by installing an app called Crush.Pics or similar apps. They are easy to set up, and you can compress your images in just a few clicks.

Another very important tip is to use JPG image format instead of PNG, as JPG files are 99% of the time lighter than PNG files. And that can drastically decrease your page size.

Minify HTML, CSS and JS

You don’t need to be a genius to minify the code of your website. All you need is setting up your domain name on Cloudflare, and you’re almost done.

Once you set up Cloudflare with your domain, and point it to Shopify, you can then hover over Speed in the top navigation bar, you’ll see a minification section with 3 checkboxes for each HTML, CSS, and JS.

When you check these boxes, your code will be minified automatically every time someone visits your website.

There are a few more perks of using Cloudflare such as Brotli compression that compresses your assets a bit further, and RocketLoader that helps load JavaScript files faster.

Preload Google Fonts

Preloading fonts is a very easy process that’ll help you eliminate all the fonts that are render-blocking.

To preload fonts on Shopify, all you need to do is to add “&display=swap” at the end of the URL that pulls the font you’re using into your Shopify store.

Let me explain: First, you need to find all the URLs for fonts in your theme’s code. You can make it easier for you by using the Cmd/Ctrl + F, and then look for the term “font”. That’ll make the process of finding fonts easier.

After that, you want to paste this “&display=swap” at the end of every dont URL.

So if the URL was:

https://fonts.googleapis.com/css?family=Montserrat

It should become:

https://fonts.googleapis.com/css?family=Montserrat&display=swap

Preload CSS and JS

You can apply the same thing we did to fonts to CSS and JS. Just paste the codes below after the webfonts code, and you’re goode to go.

Preload Javascript:

<link rel="preload" href="{{'app.js' | asset_url }}" as="script" type="text/javascript" >

Preload CSS:

<link rel="preload" href="{{'theme.scss.css' | asset_url }}" as="style" type="text/css" >

Reduce DNS Lookups

There are no better ways to reduce DNS lookups when you use Shopify than using less apps.

Most of the apps that add code to your theme will point to additional scripts hosted somewhere different from Shopify’s CDN, which will add an extra domain to your code, and that will reflect in extra DNS lookups.

For example: When you use loox reviews (or any other reviews app) all the content you’ll import from AliExpress will be hosted in loox CDN, not Shopify’s CDN. So there will always be an extra DNS lookup when using such apps.

Let’s not forget about the DNS lookups for Facebook Pixel and Google Analytics. Both of these are responsible for at least 4 DNS lookups, if not more.

The only apps that I personally use that add add extra DNS lookups to my Stores are Shogun, and Judge.Me. And I believe they are evrything you need to create high converting landing pages.

Read: How To Create High Converting Shopify Landing Pages.

Note that when you delete an app, it doesn’t mean that the codes for that app are removed automatically. The codes will still be there, which can be a little confusing.

So what I recommend you do is reaching out to the developer of the app and asking them to remove the code. They’ll need access to your Online Store. Once it’s granted, they’ll remove the code and you’re good to go.

Another way to do it is by installing your theme all over again after you delete all the apps, and start installing only the apps that you really need.

Use a fast and lightweight theme

Themes are developed differently. Every developer has his own approaches and ways of doing things. That’s why some themes are fast, and some are simply not that fast.

That’s why you should do your own research before installing any theme to see if it can add extra speed benefits to your Shopify store loading speed or not.

Another thing to consider when choosing a theme for your store is the number of assets it already has built-in. For example, if you intend on using a countdown timer, you would rather have a theme that will host it locally in Shopify’s CDN, rather than installing an app that will add extra scripts and DNS lookups.

Use Google Tag Manager

If you will be using external tracking codes such as Twitter’s, Pinterest’s, or Smartlook’s, you should really consider using Google Tag Manager.

The thing about Google Tag Manager is that it doesn’t only compresses the tracking codes and makes them load faster, but it allows you to choose the triggers for these tags, the priority (load it immediately, or wait for a certain thing), and a lot more helpful features.

Another thing it will help you with is having multiple Facebook Pixels at the same time, which is not possible with the built-in Shopify integration.

So if you’re using a lot of tracking codes in your shopify store, you can certainly save some mileseconds with Google Tag Manager and make your shopify store slightly faster.

Additional Optimization

If you need help from professionals making your Shopify store load faster, you can reach out to us, and we’ll certainly be happy to help you.

We helped many digital nomads optimize both Shopify and WordPress for speed, and we are sure we can make your store load faster.

1 thought on “7 Tips To Speed Up Your Shopify Store”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top