November 17, 2021

How to Improve Shopify Speed Optimization?

Artur

Shopify Expert in building themes and stores

11

min read

How does upload Shopify speed optimization affect sale?

In this paper, we won’t cover any useless recipes, only the real ways to improve Shopify speed optimization that you can apply directly to your Shopify store.

What is a good website speed?

According to Google (and we believe this guy), the recommended page load time should be around 2 seconds. However, you should always aim for better and strive to achieve the website speed for about 1,5 seconds and even 1 second if we talk about mobile.

The faster your website works, the lower is your bounce rate (which is the percentage of users who leave your site without visiting any page), and the higher is your customer experience, and the time they spend on your website. Speed is also a very important factor when it comes to SEO optimization and your website rank. If your website is slower than 10 organic pages, you won’t stand nearby.

Google also states that speed is now used as a ranking factor for mobile searches, so if your website works slow on mobile, you’d better change something. In this blog post, you will learn how to speed up shopify website and achieve the best results.

Getting started with Shopify speed optimization

Nowadays, almost all market uses the different eCommerce platforms for their business, in particular, Shopify store. In the pursuit of customers, stores try to attract the attention of users in all available ways. So many sites these days are getting sluggish - huge images, slow load times, pages that are unusable until a custom web font has downloaded. In the context of eCommerce, site performance is now actually more important than ever. As more and more businesses move online, consumers have more choice about where to spend their money, and their patience for less-than-optimal purchasing experiences decreases.

The secret is simple: the faster your Shopify store is loaded, the more customers you will receive. In this case, you need to speed up Shopify store. This paper will help you to learn how to measure, analyze and then improve the page speed of your Shopify store.

Have you read "10 Ways of copywriting", "5 Secrets of delicious soup" and "7 Lifehacks of time management"? Are you tired of seeing these types of articles? Excellent! This paper will not let you died of boredom. If the load time speed of the Shopify store is more than eight seconds on a smartphone, we guarantee that sales on this website are not super. One second – ONE – could be costing you big money. That one second costs you traffic, sales, and can damage your reputation. But the question remains: How to speed up Shopify store?

Metrics

Fast sites get more traffic love from search engines. Slower sites get a lower rank, and it doesn’t take much of a fall to hurt traffic. We need to know what we will optimize! Let's define the metrics on which we can rely. This is due to the fact that a normal modern person’s pace of life is fundamentally different from the pace of human life at the beginning of the last century. Now, information is more readily available - and even more quickly available than the brain can process it. We have become impatient, and our focus and attention are scattered, meaning websites should reveal their content as quickly as possible.

Before you start Shopify speed optimization you have to analyze the load time of the Shopify stor and how shopify page speed influences your website performance.

Analysis

Our goal is to keep the user engaged with the page and deliver the optimal experience, regardless of device or type of network. It’s not so important to spend a lot of time deciding which tool - it’s just important to have a tool. Pick one that you’re comfortable with or have easy access to (PageSpeed insights is easy to get started with for shopify site speed optimization, especially as it comes integrated into Chrome).

A traditional service that analyzes the load speed of websites is Google PageSpeed Insights. Simply add your website and wait until the data is displayed. PageSpeed Insights is the service which reports on the real-world performance of the mobile page and desktop devices, provides suggestions on how that page may be improved.

Simply add your website and wait until the data is displayed. For each of the URL of your landing pages, you will get the Page Speed scores for the desktop as well as for mobile devices as shown below:

example of analyzes the load speed of a website

You received a list of recommendations for shopify page speed optimization:

  • Remove the JavaScript and CSS code that blocks the top of the page (Eliminate render-blocking JavaScript and CSS in above-the-fold content). You need to collect all the Shopify theme styles in one file, and then minimize* them. The same must be done with scripts. Google recommends uploading styles to the inline page. This topic is covered in greater detail below.
  • Leverage browser caching. Google insists that you specify the date or expiration date of static resources in the HTTP headers. But Shopify doesn’t give access to the back-end, so this item cannot be executed.
  • Minify JavaScript. This topic is covered in greater detail, below. Let's just say that optimizing images can reduce the weight of your page by 10-50%.
  • Enable compression. You need to enable gzip compression. By default, each Shopify store already has compression.
  • Reduce server response time. It does not make sense to optimize this area, as Shopify gives each store CDN, and their servers have high response rates.

As you can see, some of the items have already been completed for you. You only need to execute three of them: minimized styles and scripts, inline styles and images optimization.

Minimize Redirects and Broken Links

Redirects are not so harmless as they seem to be. Yes, they are better than 404 and send your users to the right pages, but this process of back-and-forth sending influences your website speed and makes it slower. If you want to increase shopify site speed, you need to get rid of redirects. There are two types of redirects: 301 and 302.

301 redirects are permanent redirects that are used after you’ve deleted or changed some page and don’t want your users to see 404 error. In such a way, Google will redirect them to a new nice page. 302 redirects are temporary redirects that are used to redirect users to another page for some time. It may seem confusing for search engines, and they may display two variants of the same page.

To find the redirects on your website, you can use such tools as GooglePageSpeed, Broken Request Tool, Redirect Detective, and Screaming Frog. These tools are absolutely free and will show you all the types of redirects you have on your website, so you can delete those you don’t need anymore.

To improve shopify page speed it’s better to do the following:

  • Don’t link to a page that has redirects
  • Ensure to remove any plugins that result in redirects you don’t need
  • Check your website for redirects that direct to deleted pages
  • WordPress Redirection plugin may be a nice way to stay tuned for new redirects

Reduce the HTTP Requests

In simple words, an HTTP request is a message that a client sends to the server when it needs to request information with the help of hypertext text transfer protocol (HTTP). With the help of this method, a web browser gets the files that it later displays on a web page. These files consist of images, text, CSS, JavaScript, etc. In other words, an HTTP request is all about sending pieces of information back and forth” between a server and a browser.

Why is it bad for your speed? Without HTTP requests, the information on your website won’t be displayed. However, before displaying it, a web page needs to download images, stylesheets, and scripts which takes a lot of time. HTTP are not bad, however, it’s better to keep their number below 50. It’s one of the ways in how to make shopify store faster.

Reduce the Number of Apps Installed

As you may heard, WordPress websites have a lot of plugins, and when it comes to Shopify ones, they include a lot of “apps”. With the help of such apps, you can add a lot of features to your website yourself without the need to ask a developer. However, they may influence your website performance and make it load slower. Such apps increase the number of requests on your page, and as a result, your Shopify store is overloaded with a variety of tasks.

We recommend regularly checking out your installed apps and deleting ones you don’t need anymore. However, it’s better to consult with your Shopify developer before doing it because you can accidentally delete the apps which are integral to your Shopify store.

Scripts and styles

We recommend customizing the assembly in the Gulp. If you can not do this, we suggest you contact a qualified Shopify developer. We collect and minify the styles. You can face the fact that some styles have .liquid file extensions, due to the fact that liquid variables are used in this style, which is taken from the admin panel of the store. They often refer to font type, size, and color. You can safely make them static by copying the values from the admin panel to the style file.

The next step is the inline styles.

You create the liquid snippet - critical-styles.liquid - in which you place the tag <style></style>, inside of which you insert the collected and minimized styles. Connect the snippet through {% include ‘critical-styles’ %} in tag <head>. You’ll need to compile scripts into one file, minimize, and then connect to the bottom of the page, before the closing </body>. All this is also done through Gulp.

Tracking the process of page loading

After optimizing scripts and styles you may speed up the load time of Shopify store.

We take the service of webpagetest.org as a basis. WebPagetest is an open-source project that is primarily being developed and supported by Google as part of our efforts to make the web faster. Enter the address of your site and wait for the results.

tool for speed up shopify store

Select the Details tab. Here, you will see the page loading process, file by file. Notice the red color of the table row. This means that this file or resource is not loaded, and you need to fix this. It may be a picture which no longer exists but, in the code, it has not yet been removed. This can be removed, and so can the service statistics which, in principle, you do not need; you can delete or restore these. On the Content breakdown tab, you can see the weight diagram of your page. Pay attention to the ratio. For a typical Shopify store, the weight of the images should be greater than the weight of the scripts and styles. If your scripts weigh more than pictures, then either you have a web application with sophisticated functionality, or your website is "overgrown" with libraries that may not be used at all.

If you want to improve the speed of your Shopify store and know how to increase shopify website speed then you can not do without optimizing Shopify page loading speed.

Image optimization

Images are the most important content for any e-commerce store. There is no way you can compromise with the quality of the images but you also need to limit the sizes of the pages.

Google PageSpeed Insights have already given you links to a list of images that are not optimized. We cast them all in tinypng.com. TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size! Try downloading and uploading them back to your website.

Unfortunately, not all pictures are available to you. Some pictures can be located on the application server that you are using and, therefore, optimizing them will not be successful. In addition, you can use the services at webpagetest.org, which we have pointed out above. On the Image Analysis tab, you will be prompted to see how much you can reduce the size of specific images, and in which formats you can convert images. Page loading optimization is a continuous process. You need to regularly check the pages speed scores and note them to keep track of your page's performance. Get your hands dirty with the low hanging fruits first and then focus on other issues.

We believe that this article has described the process of Shopify speed optimization as fully as possible. Till now we have discussed the things you can manage to speed up your Shopify website. For you will be child's play. But there are few page issues which you can’t fix until you are a seasoned Shopify developer. MakeBeCool team will be happy to help your website achieve space download speeds and improve your shopify page speed.

Page Speed Testing Tools

Now let’s review the most popular tools (mostly free) you can use to speed up your Shopify site.

Pingdom

Pingdom is a straightforward tool that helps you quickly analyze your website load speed, even if you are just a novice. This tool suits well for both experts and people who just begun; it's an easy tool for optimizing your website performance and checking it at over 70 global polling locations.

Its main features include:

  • Uptime monitoring
  • Alerting
  • Page speed monitoring
  • Visitor insights
  • Transaction monitoring
  • Server monitoring

Google Pagespeed Insights

You’ve definitely heard about this one. This tool analyzes the loading speed of all pages on your website and gives suggestions on how to improve it. It gives two separate optimization scores: for your desktop and mobile version.  A performance score above 90 is perfect, and you should strive for itl, 50-90 is a score you need to improve, and a score below 50 is a poor score that significantly increases your user experience.

Using Google Pagespeed Insights is really easy. All you have to do is to open this tool, enter the URL of the website you want to optimize, and click the Analyze button. You’ll see the performance score at the top of the results page together with different sections of data such as Field Data, Lab Data, and Audits.

WebPageTest.org

While PageSpeed Insights shows you how to increase your website performance, the abilities of Webpagetest are much higher. It shows how you can improve your site and what affects the loading time of your site. WebPageTest is mostly used by developers, as it displays a lot of technical data which may be difficult to comprehend for newbies.

Chrome DevTools

Chrome Developer Tools is an in-depth toolkit for developers you can install directly to your Chrome browser. With the help of these tools, you can edit web pages in real-time, quickly detect problems, and make your website more optimized. Here you can find how to use these tools to evaluate and improve the speed of your website.

Google Lighthouse

Lighthouse analyzes the performance of web pages by giving your website 4 scores between 0 and 100. Here’s what you can analyze with this tool:

  • Load time (Performance)
  • Accessibility
  • The use of HTTPS, security criteria, errors on the page, and the attributes of images
  • SEO elements of each page

Conclusion

It's not a secret that conversion rate is crucial for any e-commerce store, and your main goal should always be to improve it. Makebecool knows how to work with shopify speed optimization and improve your conversions. First of all, we will analyze all the problems that affect the speed of your website and find solutions that will work for you. After that, we will test the results to ensure that everything works as intended. Your success is our main goal, so we do everything possible and even more to make you feel satisfied with the result.

Share this blog post

Share with us your idea

Our Shopify Consultant will help you determine the ways of increasing professional growth

Related articles

Let’s discuss

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.