24 Shopify Performance Optimization Tips for Users & Theme Developers

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%.  

General performance best practices

Conduct routine performance analysis

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.

Use Google Tag Manager to organize tracking

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.

Use AMP to speed up page load speed

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.

Leverage CDNs with Shopify

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.

Compress and optimize images

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.

Optimize Javascript and CSS files

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.

Merge all Stylesheets into a single file

1. From within your theme’s asset folder, create a fresh file called ‘application.scss.liquid’.
2. Paste all the content from each stylesheet into the freshly created file.
3. Next, from your theme’s master layout (theme.liquid), delete the link tags for the old stylesheet into the new main file. The code looks like this:

{% raw %}{{ 'application.scss.css' | asset_url | stylesheet_tag }}{% endraw %}

Merge all your Javascript files into a single file

1. From your theme’s asset folder, create a fresh file called ‘application.js.liquid’
2. Paste all the content from each javascript file into the freshly created file.
3. Next, from your theme’s main layout (theme.liquid), delete all javascript link tags, and add these to the newly created main file, towards the bottom – right above the closing:

<body> tag. You can use the following command-
<script src="{{ 'application.js' | asset_url }}" async defer></script>
</body>

Reduce redirects and remove broken links

The performance problems in your Shopify merchant store may be the result of broken links or too many redirects.

Redirects

Performance and load time speeds are the direct results of unnecessary redirects. You can follow the steps listed below:

1. From within your Shopify admin, go to ‘Online Store’ > ‘Navigation’
2. Click ‘URL Redirects’
3. Click on ‘Add a URL Redirect’ to add your first URL redirect

Broken links

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.

Reduce HTTP requests

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:

• Combine & inline your CSS scripts.
• Use inline JavaScript code for smaller snippets.
• Combine all JavaScript files.
• Minimize the use of design & functional images.
• Convert images to Base64 code.
• Limit the number of social buttons.

The guide on How to make fewer HTTP requests is a comprehensive deep dive on how to reduce HTTP requests.

Perform code minification

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.

Perform lazy image loading

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.

Shopify specific performance tips

Use fast and reliable hosting

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:

• Memory as well as bandwidth limits that will determine if the platform will have the ability to scale per demand. Especially during seasonal promotions and flash sales.
• The amount projected traffic as well as peak user load it can handle. This ensures that the platform will not crash when there is a sudden uptick in visitors.
• Appropriately PCI compliant security, to ensure that your visitors and users’ data is secure at all times.

Using the shopping CDN

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.

Use Shopify Plus – Shopify’s enterprise version

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:

1. Development and Maintenance Costs – While operating an eCommerce store, it can be expensive when it comes to time and resources.
2. Predictable Pricing – Shopify Plus offers an advantage in predictable pricing. The pricing starts at $2000 a month based on your specific requirements but stays constant from the day you sign up. Unless of course, your needs change over time.
3. Technical Support – With Shopify Plus you have the advantage of a dedicated Account Manager who takes care of all technical needs or glitches.
4. Reliability at Scale – Shopify Plus ensures that thousands of visitors, running simultaneous sessions have a secure, fast and efficient experience.

Reduce the number of installed Shopify apps

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.

Download a responsive and fast theme

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:

1. Select a responsive and fast theme.
2. See if the theme has an updated version and have a look at the live preview.
3. Once you’ve selected a theme, remember to ensure it is kept up to date.
4. A theme that has been optimized for performance will have all styles in just one CSS file, all javascript in one javascript file. It is recommended that before zeroing down on a theme, run the theme through Google PageSpeed Insight and analyze the results.

Instead of sliders, consider using a hero layout

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.

Avoid excessive liquid loops

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.

Avoid excessive pop-up quick view windows

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:

1. It adds an extra step for the visitor.
2. The user might click it accidentally which might result in a frustrating experience.
3. It can be confused with the actual product page.
4. And most important, excessive pop-ups can significantly impact your page load time.

Performance best practices for building shopping themes

Refactor CSS

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.

Kill carousels

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.

Optimize images

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:

• Download and open ImageOptim

• Drag and drop your theme’s assets folder into the application

The application will automatically optimize your assets and shows the number and the size of files that you’ve removed.

Use CSS to replace background images

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.

Concatenate / minify images

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.

Conclusion

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.