There are many articles on Shopify speed optimization that you can find on the web. In the majority of them, they are all repeated and no one will tell you which one to follow. And these articles are very useful, I agree with them. But there is also very useful information in the usual site optimization guides that are not related to Shopify. After all, Shopify stores in the first place websites, and then an e-commerce platform. Therefore, thinking globally will be fruitful for everyone. I will remove all unnecessary details and give really important advice for all occasions. It will be equally useful for those who want to start working with Shopify or have been working for a long time, but always think about speed. After all, speed is a very important thing.
Let's start by understanding why you should pay attention to download speed. By googling this information, you will find that it will increase sales. And indeed it is. Everything must work quickly. Many kinds of research have been done, statistics on the importance of speed from many cool corporations Google and others. Below there is a couple of that data:
Google: "A mobile page that dropped from 1 second to 10 seconds had a bounce rate of 123%."
SOASTA: "Every second of mobile page delay reduces conversions by 20%."
Google: "If a site takes longer than three seconds to load, 53% of users will leave." - While with this I bet 🤔
Google: "Slow loading speed is a negative ranking factor in Google."
Is speed that important? After all, many popular sites do not pay attention to speed, because they satisfy the needs of users. Sometimes the information that the site provides is more critical to users than the speed. But I will not go into this, as in the following articles we will discuss this topic in more detail. This article is about how to open a fast store.
I cannot say for sure that a fast store = a successful store. But I'm sure that a fast store = a convenient store for all your users.
The section "Newbies" is devoted to the errors encountered by those who have just opened a new store. And what should be done so that in the future you do not need optimization services.
If you are new to Shopify, then surely you are not thinking about the site load speed. You are fascinated by the very fact that soon you will have your store. You will start selling your products. And everything seems to be perfect. Nothing stops you from living in harmony with Shopify. But sooner or later the moment will come when you start paying attention to the rating on the theme page in the Shopify admin panel. Start researching and find out that your store is in dire need of optimization. That by optimizing you will improve conversion. That speed is very important. Google itself advises. But a little later, you will find out that it will be impossible to optimize the store just like that. We'll have to make sacrifices. Sure, all this can be avoided if everything is thought out in advance. We were all newbies and made many mistakes. It is through pain and gains that we begin to understand better, become more experienced.
Everything is very simple. This is why many shop owners do not pay attention to many details when they open a store. Not farsighted. All you need to start is by choosing a good theme. There are many themes to choose from on the Internet. Some vendors write that the theme is fully optimized. But it's better to check through PageSpeed Insights (PSI i.e) - this is a tool that analyzes the content of a web page and offers solutions that will speed up its loading. PSI shows the overall score for page load speed, which is cool. Moreover, Shopify has implemented a PSI assessment for itself as well.
Choosing an optimized theme can make your life much easier in the future.If you like the theme, take a measurement here.
Let make it clear. The green zone is a PSI score of 90 or higher. Yellow zone from 50 to 90. Below 50, red zone, bad zone. We will take the results of mobile versions since problems arise mainly in the segment of mobile phones. The results for computers are generally satisfactory.
If the rating is in the green zone (there are few such themes, but they exist and are inferior in functionality to other themes with a lower rating), then do not be happy ahead of time. Check carefully, is such a theme is right for you? Typically, themes that are so optimized cut a lot of functionality to be in the PSI green zone. Therefore, check carefully, if everything suits you, then congratulations, you have a very smart theme. You have already taken the first step.
Now let's consider another case. Let's say your store sells advanced products, you need the theme to match your expectations. To make it convenient for you when setting up the theme, and for users when visiting. So that you can provide your information to clients as creatively as possible. In that case, themes in the green zone will not work for you. We need a balance between speed and functionality. And best of all, you need to look closely at the themes with a score ranging from 60 to 80. Yes, this is the yellow zone. There is nothing wrong with that. The red zone is much worse. First of all, carefully check the theme, if the theme meets your requirements, then install.
The theme is the foundation of your store. One of the important things to start a successful store on Shopify. Choosing a good theme can save you a lot of time in the future. So, please take your time and choose your theme wisely.
Apps are as important as themes. They bring a ton of useful functionality. Starting with increasing sales, ending with image optimization. And just like themes, apps must be chosen wisely. After all, a large number of installed apps can significantly degrade performance. This is because each application includes its files (JS & CSS) to function normally. This, in turn, will increase the page size. And JS files still have to be executed. All this will lead to the fact that one day your store will start to slow down. PSI will be in the red zone, which is not good at all.
Everything is simple, as in the case of themes. Measure through PSI. You must have an empty theme with no apps installed to get a real rating. After you have chosen which application you will use, install and measure again. If the score remains the same, cool. If it fell by a couple of points, it's okay. Under any circumstances, after installing two or three apps, the score will decrease. And that's okay. The main thing is that the score does not decrease by 20-30 or more points. In this case, you must decide to maintain this app or delete it. If you need the application, then leave it, otherwise, delete it. It's simple.
Try to get used to this approach. Otherwise, if you have 20 applications in the store, then no optimization agency will be able to bring the rating to the yellow zone. Only by uninstalling applications. And then, this is only if your theme is optimized. Therefore, it is very important that you control the number of applications and that you have a fast theme. If you have a lot of applications and besides a bad theme, then this is the worst-case scenario of all possible ones. And what to do in this case, which we will discuss in the next section.
Media resources are an important part of any website. In terms of organizing media assets, Shopify has done a great job. And you don't need to wonder if you uploaded the image correctly. Shopify will prepare a whole set of images for all types of screens. Also, all files will be stored in a CDN (Content Delivery Network) so that users from all over the world can quickly see content on their end. The main thing is that your file will not exceed the 19MB limit. If you think your image weighs a lot, you can compress it while maintaining quality. There are many compression tools, you just need to enter "compress image" in Google search. For example TinyPNG.
With images, most of the problems have already been resolved, but problems with videos may arise. Themes do not take into account that the download of the video should also be postponed. Otherwise, your site will weigh a lot, thereby increasing the full page load many times over. To avoid this, add Lazy loading for the video. For images, lazy loading is already used in almost all themes. But this was not anticipated for the video.
Lazy loading is a method of loading media assets that are not display-critical. When using this method, resources will be loaded only when necessary. For example, when the user scrolled to a certain place on the page.
Summing up, we can understand that the root of all problems is precisely the beginning. Because you are new to Shopify, you may not even suspect that any of your actions can lead to a deplorable state of your store. And this can directly affect your sale, the user experience of your store, and thus loss rate will increase. And since it's too late to do everything in a new way, you have to look for optimization services. That is, there are additional costs. But starting over is also an expense. Therefore, we will consider this topic in the next article, which we will devote to non-optimized stores.
And if you're a newbie, then you're ready to open your store and still make it fast by following these simple tips. Most importantly, you will save a lot of time.
Need help with Speed performance? You can always contact us.