As more businesses are moving their operations to the web, they choose Shopify, a robust cloud-based platform particularly suitable for small and medium-sized companies. It enables merchants to set up and launch online stores in literally days. If we take a look at the data on builtwith.com, we’ll see that the popularity of Shopify has […]
As more businesses are moving their operations to the web, they choose Shopify, a robust cloud-based platform particularly suitable for small and medium-sized companies. It enables merchants to set up and launch online stores in literally days.
If we take a look at the data on builtwith.com, we’ll see that the popularity of Shopify has been growing by leaps and bounds recently and has especially been on the increase over the last couple of years.
With so many competing Shopify stores around, every aspect of a site is important: content, security, user experience, and others. However, there’s probably no characteristic as crucial for an e-commerce store, a Shopify store in particular, as the loading speed. Here is why.
If we compare the conversion rate of online shoppers worldwide over the past few years, we will see a steady decrease in this indicator. While 2.9% of Internet users converted in the second quarter of 2018, in the second quarter of 2019 this number amounted to only 2.58%.
One big reason why consumers don’t convert is slow operation of online stores. No one wants to watch a progress bar or wheel on a blank screen. According to some data from Google’s analysts, a site that takes from 1 to 3 seconds to render may experience a 32% higher bounce rate. Sites that perform even slower than that simply have no chance to survive.
Apart from actually waving good-bye to potential customers, owners of crawl-at-a-snail’s-pace Shopify stores are in for another unpleasant discovery: Internet users may not even find their sites on search engines. How is that?
The thing is that search engines, with Google in particular, regard site speed to be an all-important indicator in their ranking algorithms. If a site is slow and causes bounces, Google thinks, “Well, I’ll move it down the list now. I don’t want users to think that I’m incompetent at my job of directing them to the most relevant, fast, and high-quality resources.”
Thus, a crawling Shopify store is a candidate for relegation to Google’s ‘dark zone’ where few Internet users ever roam.
So, how can you make your Shopify store faster in order to avoid the problems we’ve just described? Well, the Shopify guys have already done some work for you, but there’s some magic you can put in yourself as well. Let’s take a look at both of these ends so that you can see the whole picture.
E-commerce is getting more global, reaching out to every corner of the planet. A site that’s not optimized for delivering content fast to users regardless of their geographical location is sure to be less popular among the international audience.
What can you do then? A solution to this problem was found a while ago. This is a Content Delivery Network, or CDN for short. In a nutshell, it’s a number of interconnected servers placed in different parts of the Earth. A CDN allows a user located somewhere in Germany to access your Shopify site as fast as a user sitting in their California home.
Normally, with sites based on content management systems such as WordPress, owners have to connect to a CDN themselves. Shopify, on the other hand, provides off-the-shelf access to a high-quality CDN with no additional fees attached and no set-up effort required. So whatever continent your visitors come from, the loading speed of your Shopify store stays the same.
Shopify makes working with a CDN even more efficient by using URL filters for images and other visual content that can significantly pull down on a site’s speed. When an image has been altered in some way, its version number changes. Then, Shopify passes this information to the CDN, which retrieves the most up-to-date copy of the resource. The main takeaway: the site “flies.” To learn more about the Shopify URL filters, visit this site.
Note that using the default Shopify CDN is not the only option. There are other CDN solutions available. However, with the platform-provided CDN, you can be absolutely confident in the smooth and fast operation of your store independent of a visitor’s location.
The platform is hosted on its own server, in contrast to self-hosted systems like Magento. Shopify’s users don’t have to deal with any server configuration or server speed optimization. All this is taken care of by the Shopify team.
Good hosting is especially important during holiday sales when the number of visitors increases exponentially. This exerts a tremendous pressure on the infrastructure, causing some sites to stop functioning properly or completely. As a consequence, e-commerce sites suffer a loss of revenue.
Shopify excels in the server response time, exceeding the speed of some other similar cloud-based platforms up to 4 times, let alone self-hosted solutions.
Even with online shoppers’ activity at its peak, Shopify stores can easily sustain the load since the platform provides unlimited bandwidth. For Shopify Plus, the server is almost never down (99.98% uptime). Read why it’s so important to avoid downtime in e-commerce.
It’s not all a bed of roses, though. As your store is growing more mature, you may notice that it’s not working as fast as it used to. “Hey, what’s going on?” you ask yourself. There can be several reasons why even Shopify sites may suddenly stop performing well. Let’s go over the most common of those issues and see how you can combat them.
Shopify is a great platform capable of doing all the useful things out of the box. As is the case with other e-commerce systems, though, it’s also extremely flexible and allows site owners to add extra functionality by means of apps.
Need to translate your store for international customers? Install an appropriate app. Want a new safe delivery option added to your site for the duration of the quarantine? Take advantage of this app. The variety of applications is huge, and they allow you to address every aspect of managing your store.
All this, however, comes at a cost. Numerous apps running inside your Shopify site may deal a painful blow to its performance. This is because even if you’re not using an app, its code is still executing behind the scenes.
Alas, you have to make a very tough decision here: which apps to “kill.” Go over all your add-ons and get rid of those you rarely or never use. Besides, there’s probably no point in keeping two apps that serve the same purpose, such as those that facilitate working with social media. Leave only the one that’s more effective in your opinion.
Disconnecting apps from your store is only part of the work you have to do, though. Whenever an app is installed, it adds its business logic to your store’s internal files, so you also need to find and erase every trace of the app you’ve just uninstalled.
Another important thing when it comes to apps is that some of them may be of low quality. Their code can be buggy. Besides, it is stored on an app provider’s own server, which may not be configured for speed and optimal performance. There are a lot of factors that can affect a server’s operation, starting from how it is actually set up and how much memory it has and ending with request processing sequence.
The GetDevDone Shopify development team knows what apps in the Shopify app store are the most stable and can use them as tools to create the most complex business logic without losing data processing speed and ensuring the highest speed on the front end.
A Shopify store theme may look and feel fantastic. It may have a unique design and tons of cutting-edge features. However, it may cause the store to load and run so slowly that users may not even wait to see how beautiful it is and simply bounce away.
Therefore, knowing if the theme you’ve built or downloaded from the store is fast enough is very important as far as performance is concerned. We suggest the following steps to address this problem:
Once you’ve determined your theme speed. you can look for another ready-made one on the official website or on other resources.
Other options include tweaking the existing theme’s code and building a completely new theme from the ground up. Both of these alternatives assume deep knowledge of the staple web technologies, design, and user experience. Naturally, they are also not free and can cost quite a pretty penny down the line.
However, what you get as a result outweighs all the expenses, believe us. A fast, reliable, well-tested, and secure custom Shopify theme is a surefire way to ensure your customers’ trust and loyalty.
Want to choose the carte blanche approach? Our development team is happy to offer our services. With over 300 Shopify development projects completed to date, we’re the true experts in the e-commerce field.
Visuals for Shopify stores are their curse and blessing at the same time. It’s obvious that no e-commerce site can do without visual presentation of goods. Have you ever seen an online store with textual descriptions only? We haven’t.
A clear, high-quality image can say so much more than just plain text. However, visuals can also be heavy sinkers for e-commerce stores, taking up well over half of their total byte size, so you must always seek a compromise between quality and speed.
First, take stock of the images that you’ve added or are adding to your site. Those with a high dpi (dots per inch) value should be reduced in weight. The provider itself recommends using images of 2048×2048 pixels for square photos of goods.
You can find a bunch of various tools for this purpose such as this one. They will allow you to make your images smaller but keep their quality intact.
If you absolutely must retain the high resolution of certain or all of your visuals, consider using the so-called lazy loading technique. Without getting into the nitty-gritty, it adds high-dpi images to a page only after the former has completely rendered in the browser.
Apart from modifying your images, you should also decide if you need so many of them. Even optimized images, when used in large quantities, may not help you achieve your goal. This is because every image sends a request to the server.
The more resources to be loaded, the more requests sent. Every request waits for a response. This lengthens the loading time. As our practice shows, the best way to address this problem is to use data URIs (Uniform Resource Identifiers).
In general terms, data URIs allow you to convert an image (or any other type of file for that matter) into a string and put it right into the HTML or CSS code. Visit this blog to learn more about data URIs and see an example.
Unlike a real image, a data URI sends zero requests to the server, thus reducing the loading time tremendously. There are some online data URI generators you can use, such as this one, but the recommended practice is to generate data URIs using JavaScript functions (.toDataURL(), and .decodeURIComponent()) right inside your store’s code.
Does this effective technique seem a bit complicated to you? No worries. The GetDevDone Shopify development team can help you with the image to data URI conversion to make your Shopify store times faster.
Whenever you add a marketing app to your Shopify store, it provides snippets of code called tags that you incorporate into the theme.liquid file. These tags are used to send some data to the tool when an event on a certain page is generated, such as clicking a link.
With time, you may have placed so many tags in that file that it affects the loading speed of your Shopify store. The reason is that all those snippets of code execute one by one in sequence when any page is rendered in a browser.
What can you do if all these tools are important for your business growth?. The best solution is to use the Google Tag Manager (GTM).
It enables you to trigger events determined by tags only on some specific pages instead of loading the list of tags for the entire site every time. For instance, if you want to track all the outbound links on a footwear product page, you add the corresponding instructions in the GTM. This reduces the loading time while giving you the marketing data you need.
Getting accustomed to using the GTM requires some learning and practice, though. If you wish to go the self-taught way, you may find this post useful. Otherwise, our Shopify developers can leverage the power of the GTM to the maximum for you.
Of course, you need a point of reference to understand if the speed of your site has improved or not after applying the techniques we’ve listed above. For this purpose, you can take advantage of these tools:
| Test My Site | GTmetrix | Pingdom | PageSpeed Insights |
| Good for testing your site’s speed on mobile devices | Performs the loading speed analysis and measures the time every request took | Analyzes the loading speed and gives tips on how to improve it | Gives a score based on a site’s speed. Points out the most critical issues (for mobiles and desktops) and gives performance enhancement recommendations |
Loading speed is an important factor that contributes to higher conversion and lower bounce rates. Shopify is a cloud-based solution optimized for fast speed and smooth performance.
Apart from taking advantage of some default features, Shopify store owners can apply certain speed-boosting techniques themselves. They can uninstall unnecessary plugins, use a faster theme or tweak the existing one for better performance, reduce the sizes and numbers of images, and organize their tags by means of the Google Tag Manager.
Of course, there’s so much more that can help Shopify merchants ensure a faster speed of their sites. However, we hope that our advice can serve as a good starting point.
The GetDevDone Shopify development team have completed over 300 projects for clients from 164 countries. We are experts in Shopify store speed and performance optimization. If you’re planning on starting your own online business, we can make an up-and-running Shopify store for you within a short time frame. Tell us how you view your future store today and get back a fast, well-performing, and beautiful-looking e-commerce site.
Learn what headless Drupal is and when you should choose it for your own project. In this post, we discuss decoupled Drupal. We define it, talk about its most common use cases, its advantages and drawbacks, and, finally, give recommendations as to whether you should make your own Drupal website headless. Walking down the decoupled […]
Have you noticed that your Drupal website is slow? Before you seek professional assistance to fix the problem, try some simple methods we have described in this post.
A crisis is not only a bad time when people are suffering and business growth is stalled or starts going in reverse. A crisis also creates new opportunities. One of the economic sectors that the current COVID-19 pandemic is likely to boost rather than kill is e-commerce. The reason should be obvious. With half the […]
