Estimated reading time: 13 minutes
When it comes to analyzing performance metrics on Shopify, even an increase of 1% in conversion rates is a good win. However, an integral part of improving performance on Shopify lies in boosting the optimization of your website. This means you need to make websites load, render and respond faster. You might also Shopify dynamic pricing for another optimization tactic but let’s leave that for another day.
It is a well-documented fact that internet users and consumers today have little patience and are not accustomed to watching a blank screen for longer than a few seconds. In Google’s case, for example, a load time delay of half a second led to a drop of 0.6% in user engagement. Bing tested users with a 2-second delay in load time, and their user engagement fell by 4%.
Before you begin to improve your site’s performance, it is always a good idea to measure where your site’s performance currently stands. There are a few tools that can help you with this such as Google Pagespeed Insights, Pingdom and webpagetest.org.
These tools allow you to enter your store’s URL and test its speed free of cost. In addition to the rating, it also gives you actionable advice on how to improve the performance in this area. They offer insights such as the number of HTTP requests needed to load a page, a relative performance score, the size of your page and its load time.
To be able to optimize your e-commerce site and digital marketing strategy optimally, a lot of customer data is required. However, the JavaScript tracking tags that the customer might use for analytics, goals, conversions, etc. tend to slow down the performance of a site.
A Tag Management System, or TMS, consolidates all your tags into a single JavaScript request. This allows for the rest of your website to load unhindered. Here is how a TMS works to optimize your site and assist with tracking.
You can find the detailed guidelines on Shopify’s help manual.
AMP or Accelerated Mobile Pages is a standard open framework that is designed for a publisher to build quick loading web pages for mobile devices. Today, more than 50% of shoppers make a purchase using their mobile devices. It is, therefore, essential that your site is mobile friendly and loads quickly.
Shopify allows you to quickly and efficiently build AMP pages for your site using FireAMP or RocketAMP apps. Both rate highly on the Shopify App Store and can help improve your page load time for mobile devices.
A Content Distribution Network or a Content Delivery Network (CDN) consists of a cluster of highly optimized servers spread across the globe. This distributes the load of delivering content via a server that is located closest to the visitor. In other words, copies of your site’s content are stored in each server’s location so that a local visitor’s experience is faster and much more reliable.
Shopify has partnered with Fastly to provide merchants with a leading CDN at no additional cost. This enables Shopify stores to crop up instantaneously across the globe, especially, US, UK, APAC, South Africa and South America.
Image compression takes on a particular significance when web pages need to load faster. While considering optimizing your images, it is best to ensure that the images you use are (i) of an acceptable size, and (ii) not too many images are added on a single page.
When dealing with new images, you can manually compress your images or use image manipulation techniques with your theme. Modern image manipulation tools are efficient at reducing image sizes. For example, Cloudinary is able to decrease the delivered file size from 569 KB to 45.1 KB, which is more than a 90% decrease in file size.
In the case that you have a theme already installed, and do not want to install a fresh one, you would need to do the following to optimize your assets manually.
{% raw %}{{ 'application.scss.css' | asset_url | stylesheet_tag }}{% endraw %}<body> tag. You can use the following command-
<script src="{{ 'application.js' | asset_url }}" async defer></script>
</body>The performance problems in your Shopify merchant store may be the result of broken links or too many redirects.
Performance and load time speeds are the direct results of unnecessary redirects. You can follow the steps listed below:
Broken links on your site can prove to be quite harmful as this inflates the number of unnecessary HTTP requests to be performed. The Broken Link Checker and Xenu are some of the tools you can use to fix the broken links within your site. Both tools are efficient and free.
To reduce the number of HTTP requests, you can use the HTTP Requests Checker tool, created by GiftOfSpeed. The number of HTTP requests made can be reduced by doing some of the following:
The guide on How to make fewer HTTP requests is a comprehensive deep dive on how to reduce HTTP requests.
An inefficiently coded HTML, Javascript, and CSS file on your page has severe implications on your site’s performance. To resolve this problem efficiently, developers use a tool called minifier that gets rid of the redundant code. For more information, here is one of the popular minification library on Github.
The technique of Lazy Image Loading can prove to quite powerful when it comes to Shopify stores. This technique involves making use of a Javascript library to load images only when they should be visible to the site visitor. This improves page load time.
Lazy Image Loading is especially useful when the theme you use tall pages where a lot of the images will not be visible to the visitor until they scroll down. Therefore, you will not need to load all the images initially.
Hosting service and infrastructure can make or break the performance of an e-commerce site. This is primarily true on high traffic and high transaction days.
Some factors to keep in mind when deciding on hosting platform requirements include:
The Shopify CDN essentially informs the CDN that your assets – JS, images, and CSS have been edit whenever you make a change to them.
In most cases, the main reason for slow performance is visual content. In this regard, Shopify makes use of the asset_url filter to automatically append version numbers to each of the URLs it generates. An example version number at the end of your URL might look like – ?v=1384022871.
To ensure that any edits you make are updated automatically, you need to change your CSS syntax to include the filter for the asset_url. You can use the overview on the Shopify Help Center for all the URL filters used to pull assets.
As a standard practice, CDN allows merchants to use Shopify Plus to power their website’s backend on autopilot. This frees up merchants to divert their attention to other areas of business priorities – maximizing revenue and success of marketing efforts.
Shopify’s enterprise eCommerce platform is known as Shopify Plus. Shopify Plus is aimed specifically for large and growing online brands and stores. Here are some of its advantages:
A large number of apps on the Shopify store automatically add some CSS/JavaScript files to your store. The problem here is that, if your app is not in use, the CSS/JavaScript files continue to run in the background and slow down your store’s performance.
It is, therefore, a good idea to go through your store to check for apps that are no longer in use and delete them. As long as they remain installed, they will continue to run their CSS/JavaScript files.
One of the main reasons for a slow store speed is the site theme. Therefore, it is always a good idea to check for the following aspects:
A Hero layout is a large web banner image that is placed in a prominent place on a webpage. Usually, this is in the front and center of the page. Hero images are generally the first visual that a visitor comes across when visiting a website. It can be a dynamic or static image.
That said, there are implications to using multi-image slideshows on your site. The size and quality of a hero slider to look good can quickly lead to an increase in load times. A single, high quality, intuitive hero image with an explicit action for the visitor, can be a better option.
Liquid Loops are Shopify specific and have proven to be extremely useful. However, particular functions have added benefits but also have some tradeoffs.
For loop, iteration is one such example that can affect merchants. It occurs when the system has to crawl through the whole store to look for any specific condition. This can be conditions like price, tags, etc. In case you have an extensive product catalog, like most large merchants, this loop can take a long time and affect the response time of your store.
As the point of improving the speed of your store’s performance is to give visitors the information they are looking for as soon as possible. That’s where a quick pop-up window is helpful – displaying product details directly from an internal page rather than having them click through the page manually.
However, the challenge here is:
Over the course of your website’s development, it is easy to build up debt in your CSS files. By refactoring and simplifying your CSS file, it will save you size on your stylesheet.
Refactoring will ensure that your site is easy to maintain as well provide a better user experience for your visitors.
Besides, Carousels are the main contributors to poor usability and also load many large and HD images.
Replacing the carousel with a single, optimized image will be better for your site’s performance as well as your users.
It is no surprise that images make up the most significant percentage of weight in most sites. Here is an effortless way to trim down your pictures and theme in just a few clicks:
The application will automatically optimize your assets and shows the number and the size of files that you’ve removed.
CSS has evolved over the years to become quite versatile. In case you are using tiled images as your background, you may want to consider using a CSS background instead.
Concatenation combines multiple asset files into a single file. Concatenation efficiently reduces the number of requests the browser needs to make. This, in turn, cuts down overhead and makes the page load faster.
Minification removes all extra information contained in assets that, though needed for humans to read, is not necessarily required by your browser. Ex- new lines, white spaces, etc. When it comes to Javascript, minification also optimizes your code size by performing tasks like rewriting var aLongVariableNamedUsefulForHumans with var a.
When it comes to reviewing your Shopify store and optimizing it for improved performance, it can be particularly tricky if you don’t have the buy-in of your manager or team for the investment of adequate resources or time.
However, the information and tools shared in this post should be sufficient to get you started to build a business case for working on improving performance and optimizing your store. Most of the points above should be simple enough to do yourself, especially with the corresponding tools and applications shared.
– Use AMP to speed up Page Load Speed
– Conduct Routine Performance Analysis
– Use Google Tag Manager to Organize Tracking
– Leverage CDNs to with Shopify
– Compress and Optimize Images
– Optimize Javascript and CSS Files
– Merge all Stylesheets into a Single File
– Merge all Your Javascript Files into a Single File
– Reduce Redirects and Remove Broken Links
– Reduce HTTP Requests
– Perform Code Minification
– Perform Lazy Image Loading
– Use Fast and Reliable Hosting
– Use the Shopping CDN
– Use Shopify Plus – Shopify’s Enterprise Version
– Reduce the Number of Installed Shopify Apps
– Download a Responsive and Fast Theme
– Avoid Excessive Liquid Loops
– Avoid Excessive Pop-Up Quick View Windows
– Refactor CSS
– Kill Carousels
– Optimize Images
– Use CSS to Replace Background Images
– Concatenate / Minify Images
View Comments
good article
Thank you, Abdul!