Getting started with Shopify speed optimization
Nowadays, almost all market uses
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
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
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
Before you start Shopify speed optimization you have to analyze the load time of
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, 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:
You received a list of recommendations:
- 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.
- 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.
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
The next step is the inline styles.
You create the liquid snippet - critical-styles
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.
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 then you can not do without optimizing Shopify page loading speed.
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.
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.