How to Optimize Your Shopify Speed – The Definitive Guide

Site speed is an integral part of e-commerce businesses. All online platforms were created with this in mind. Faster delivery of products, quicker reachability to vital information, prompt spreading unheard stories, and grabbing in a lifetime opportunities are just a few reasons why speed is important.

Nowadays, chances are customers will check your website on the go.

Whether that be whilst waiting for the bus or getting off one, that split second might be the moment where your leads determine if they like what they see enough to purchase from your store.

Speed optimization is key if you want to remove that vital extra second loading time.

Research by Google in 2017 that still holds true to this very day is that every second that passes in loading a page, the bounce rate skyrockets by 20 to 30%!

To add up to this data, research by Jay Peyton from RocketFuel done in 2020, indicates that such high numbers are the average score. With the medium being 40 to 60%.

Image Source

In this article, we will present a few ideas for a faster speed of your site, tips within the Shopify platform, and a higher ranking in the SERPs of your web page and business.

You will learn about issues that can be fixed within minutes and expert statements of one of our developers which could rapidly increase your conversion rate and the overall reach of your website if acted on correctly.

Ready? 

Let’s start.

Table Of Contents

• Introduction to Speed Optimization

• Things You Can’t Control

• Things You Can Control

• Matters to Consider

• Conclusion

Introduction To Speed Optimization

With the consumer span getting ever-shorter, everyone working in the e-commerce industry has a subgoal in their every task – to bring out their points as fast as possible, without excluding rich assertions and while ensuring successful conversions.

This includes platform providers like Shopify (our article aspiration), WordPress, and Wix – all of them play a key role in your web page speed – a part over which you have no control (unfortunately).

This brings us to the first section of this article, where we will revise and reveal what happens beyond your reach and vision, concerning your site’s speed. In this segment, you will acquire information on what you cannot control and catch a glimpse of some problems that may arise.

Some Things You Have No Control Over

There are areas in which you have no control over the speed and cannot do much to optimize it. This does not mean, however, that someone else doesn’t.

Let’s take a deeper look: 

• The servers of Shopify

Site building platforms like Shopify have their own well-optimized servers and some providers offer their services globally. Not only are they the place where thousands of pages are stored securely but also the grounds that provide the functionality to your business.
Unfortunately, as we mentioned above, regular users have no power over them.

What happens when these servers get damaged? 

Or when an immoral user decides to attack them through hacking and DDoS attacks?

Well… If your provider finds itself in a similar situation, your site and its speed will most likely be affected as well. This matter can only be resolved by the developers of the hosting company.

Examples

• One of the biggest hacker attacks lasted 6 months and affected the services of Google (used by billions).

• The denial-of-service attacks towards the domain service provider Dyn affected the speed of companies like Amazon, Twitter, The Guardian, Wix, Shopify, and many more. 

Image Source

Luckily, cloud hosting providers that affect millions of users worldwide invest heavily on security and better performance. By enlarging the protection of their servers and the safety of their users every year, these platforms manage to make malicious attacks harder to achieve and limit unpleasant flaws.

• Your customer’s device, network & location

Your store might have the perfect speed on both mobile and desktop devices, but the loading period could still be bottle-necked on the customer’s side.

A few potential reasons for this:

• The network provider of your customer having trouble on their side.

• The location of your customer – some areas around the world do not provide a good connection to the internet or are almost non-existent.

• The device your customer uses. Older gadgets degrade in speed, therefore running further behind from browsers that grow bigger and require more power every year.

These factors can not only slow down your web page loading times but make them faster as well (if your testing ground is slower than the devices used by your customers).

Albeit good to know, you shouldn’t worry about the points made above. Instead, we encourage you to focus your time and efforts on the things you can control and optimize.

Let’s see a couple of areas you can administer.

Factors You CAN Control

Thankfully, many of the speed concerns can be directly intercepted by you. 

Image Source

1. Heavy Apps 

One of the biggest speed degraders are the apps installed on your store.

They offer game-changing tools, but you should choose them carefully. Especially perilous are the ones that change or add to your theme code.

If a significant change is seen, try out another app that offers the same features and functionalities. Periodically go through them and remove your unused Shopify Apps.

 2. Image Sizes 

The sizes of your images play a huge role in your speed optimization process.

Always make sure your photos are not oversized for no reason. If they are, we strongly recommend changing or optimizing them, especially if you use stock images – they are usually crispy sharp and can take more than 20MB. A single compression or extension change could lower this number significantly.

A good way to test your images is through the Shopify Analyzer of SpeedBoostr. The platform could also show you reports of hidden images which you could then remove or optimize.

You can easily lower the size or change the extension with free-to-use online tools like tinypng.com or tinyjpg.com. Moreover, if you are willing to pay, there are numerous apps that can quickly and efficiently compress the images for you. We recommend Crush.pics from the Shopify App Store. Their $4.99 plan is a perfect solution for most Shopify stores.

Further, use JPEG instead of PNG. (JPEGs have way smaller file sizes).

3. Theme size

Speed optimization could start before you even have a website.

Providers like Shopify and Wix offer hundreds of themes, each with its own functionalities and sizes. If the theme you chose is light, naturally everything will be faster. The more functions and options are added to your store, the slower it will get.

This is an important point to consider when browsing the theme store. 

4. Reduce Redirects 

Loading a page twice is never a good idea when it comes to speed optimization. 

Platforms like Shopify have a built-in redirect function that will ask you if it should keep the old URL and redirect it to a new one. You should preferably minimize these changes, unless absolutely necessary.

For a redirect to be initialized, the old URL needs to be loaded first. The common user often bounces back from a loading time of 3-4 seconds (the roughly average for a single web page). 

Doubling this would bring unfavorable results and affect your store performance so we encourage you to avoid redirecting whenever possible. 

5. Fonts

Using unique fonts might delight some customers, but most of the time uncommon fonts are not pre-installed and available on people's devices.

If a customer does not have the font you use, then it has to be downloaded first, before the text can appear in front of them. This will bring longer loading times for your initial customers.

Align your UI design with a font offered by Shopify or a system font instead – a font that is installed and ready-to-use on most devices. Further, you shouldn’t mix more than 2 different styles, as having a lot of different types could also be a degrading factor.

The more famous system fonts include Helvetica, Sans, Calibri, and plenty more to choose from.

6. Code 

If you use a downloaded theme from your provider e.g. Shopify, you will see just how many lines of coding there are (and that is just the front-end).

The location of your theme code is where most 3rd party apps add their own coding as well, thus further increasing loading times.

You must always make a duplicate of your theme and write carefully. 

It’s best if you know what you are adding to the backbone of your site because the worst part about tangling with all this is having a single piece of line or even a word ruin the thousands laying above it.

7. JavaScript code 

Does your site use it? 

If so, try to reduce its amount as much as possible, without lessening the overall experience.

Although languages like JavaScript are widely used to make dynamic and interactive sites, they are abundant in size, which means they take longer to load.

Decreasing the length of a code, whether it’s JavaScript or not, will greatly decrease the time for which your content loads.

These 7 key factors have noticeable effects on the speed of a website.

You can easily check your speed score with one of the numerous online speed test providers like the previously mentioned Speedboostr.

You can and should always test your optimizations. We strongly advise you to check your speed performance every time you make a significant change to your store and code, download new apps or add a bundle of new images.

So far we have listed key factors that affect the speed of your site. 

Now… let’s go through some smaller impactful and/or uncommon events that you should keep in mind and be prepared for.

Things To Consider 

Making all speed optimizations you find necessary may still sometimes not be enough to reach the preferable outcomes. 

Listed below are some scenarios on why your loading times are so important and a few more ideas and tools of what you can do to boost the speed of and prevent a holdup to your website:

• Lazy loading can be super helpful. With this technique non-critical resources load only in the moment of need. A lazy-load function will load images and parts as users scroll, only when they are no longer off-screen. You can implement lazy-loading through a couple of methods (for example by adding a number of existing libraries to your code or by downloading an app, specifically designed for this).

• It would be a good idea to install a caching plugin (Not applicable for Shopify). A great way to fix the poor performance of your website is to cache it. What this means is that instead of constant information being sent back and forth from your provider to the customer, a cached version of a landing page could be presented instead, resulting in faster loading.

• The speed is now a determining factor for your SERP (launching globally in September 2021). Furthermore, it greatly impacts the consumer span and many other pivotal aspects and metrics of your store’s performance that play a crucial role in your reach and place in the SERPs.

• Know what bot crawlers are and be ready for them. Search engines have agents (bot crawlers) that browse the whole wide web. They do so in order to get your web pages into their database. Going through every new web page that pings their radar is costly, so a bot crawler won’t wait for long. The faster a landing page loads, the more content the crawler will get.

• Unnecessary long or confusing meta tags. Meta tags are texts within your page’s code that describe the content inside the web page. Long meta tags on titles and descriptions will confuse the crawlers and they won’t be able to gather any useful information. Shortening them and completely removing the unnecessary ones will ensure faster and more specified results.

Nobody likes a slow-loading page, but a site owner should be the one that dislikes it the most.

As a reminder of how important a website speed amounts to, we are bringing some wild cases to your attention:

• Research by WP blogging states that “a page loading slowdown of just 1 second could cost Amazon $1.6 billion in sales each year.”

• WPOstats research says “For every 100ms decrease in homepage load speed, Mobify’s customer base saw a 1.11% lift in session-based conversion, amounting to an average annual revenue increase of $376,789. Similarly, for every 100ms decrease in checkout page load speed, Mobify’s customers saw a 1.55% life in session-based conversion, amounting to an average annual revenue increase of $526,147.”

• Instagram improvements increased impressions and interactions by 3% by means of lowering the response size of JSON – a programming language they use. A 3% might seem low, but compared to how big the audience of Instagram users is, one might start thinking differently.

As stated above, a single second of a slowdown could result in a loss of valuable customer impression, page traffic, and revenue.

Numerous issues will come out of nowhere, all the time, damaging the speed performance of your web pages. That is why it is important to keep speed in mind at all times and test your site periodically.

Conclusion

Your performance will decide the outcome of a customer’s decision and your site’s speed will make sure that your website visitors truly enjoy their user experience.

People are always on the fly and if you want to grow, make sure you don’t waste your customer's time.

Choose the lightest themes and apps. 

Limit the sizes of your images without losing quality. 

Learn what is written in your store code. 

Regulate the total amount of requests you make towards different tools.

Otherwise, those products will never be sold, that vital information will never be reached, that unheard story will stay silent and the ones in a lifetime opportunity will forever be lost.