A Complete Guide to Shopify Plus Store Speed Optimization

November 3, 2020 Karl Clement 11 min read

The importance of site speed in e-commerce

The performance of your online store can have rippling effects all the way to increasing conversion rates and even increasing your yearly revenue. You’ve built a great business, that’s why you’re using Shopify or even Shopify Plus, now let’s make sure you’re getting all the rewards you deserve from taking the risks, putting in all that work, and making something people love.

In case you need some convincing a few quick points:

The new Shopify speed test tool is a wonderful way to check your current site's performance and provide some clear areas to focus on improving your site.

We also took the time to guide you in a detailed look at improving performance in many ways with a 13-point ultimate checklist! The content in this guide is above and beyond what we discuss in this article - so please check it out!

Now let’s get get going.

What slows down your online store

Editor's note: Before implementing any changes in your online store, be sure you have a backup that you can easily use to roll back any unwanted changes. Rewind is the top rated backup app for Shopify and is the easiest way to make sure you've got a copy of your site that you can rely on in the rare case the following changes cause problems to your online store.

You can’t make things faster without knowing why things are slow to start with! Once you have a firm grasp of the performance of your website, it becomes easier to identify bottlenecks and future implementations that will slow down your online store. Here are a few examples of items slowing down your website, separated by headers for ease of reading.

How many External plugins or extensions do you have installed?

It's easy to install too many external tools to optimize your experience. Sadly, this can also slow down the buyer's experience and make them leave your store. A good example of online tools are analytics trackers and social media tracking pixels. Getting more information about your users is important, but if your users are leaving because of speed, it defeats the purpose entirely.

If you are already tracking analytics with Google Analytics or Mixpanel, it wouldn't hurt to add heat maps like Crazyegg or Hotjar. However, try to limit the amount of tracking tools being loaded into the page with Javascript. If you want to use combined analytics tools to limit external requests Heap and other analytics suites can be good options.

Customer support and marketing tools also tend to bloat your website with various scripts written in Javascript which increases site load times and can cause other more time consuming problems. While it's important to keep your customers engaged, too many modals, dialogs, and popups asking them for an email address can slow them down. There are some good options for customer support like Intercom that don't require too many scripts to be loaded into the page.

How many Shopify App Store integrations is your site running?

The Shopify App Store is stacked with fantastic integrations to improve your customer's experience. It's easy to get carried away and install every free integration under the sun; the important thing to consider is that almost every App Store install adds Liquid template tags into your theme pages. This can increase site load times and even cause some bad interactions in your stores code, leading to more significant problems.

Even if you uninstall an integration, occasionally some template tags are left behind loading broken links and useless logic. It's important to be mindful of what you are installing and avoid apps that incur too much bloat or become dependent on external resources or APIs.

Remember to check out Rewind as it will let you rollback your entire stores codebase in case an App integration goes wrong.

How many images is your site trying to load at once?

Images are among the worst culprits to slow down a beautiful website.

First, make sure you check the file size of the image so that it's optimized for the web. The larger the file the longer the load time and if a customer is on a mobile connection you're also wasting their mobile data and that's just not nice!

Next, each image being loaded requires an additional HTTP request to pull up the file along with everything else including your CSS and Javascript. The more HTTP requests are placed the slower the page load will happen as the rest of your page won't load until it places each request.

Sometimes a designer can add in images for background effects, transparency effects, or even gradients. 90% of the time, you can recreate these effects using simple CSS tricks recently added into most major web browsers. You can find some amazing resources online detailing the code needed to recreate the visual effect. If you can't recreate the effect with CSS, it's probably too complex for an e-commerce website.

The only images that should be loaded within your templates are logos, icons and product images. Everything else becomes extra load time without providing you with any true value. On top of that, you need to make sure you are loading the correct file types along with some compression to avoid slow loading images.

How large are your CSS stylesheets?

It's easy to get carried away and separate your CSS into multiple files and folders to have everything perfectly organized. Once again, each file being loaded requires an additional HTTP request (call to an external service) causing your browser to wait for it to finish before it makes another call. This is why most times when you install a popular theme for your Shopify site, you'll notice only one primary CSS file being loaded at the top of the HTML file.

Concatenated into main.min.css

You can avoid this by concatenating (combining for your web browser) your CSS files together and remove all additional comments and whitespace to shrink the file size. This method of compression can make your initial request much faster as the file will be loading into the DOM much faster.

How long do your JS scripts take to load?

Javascript is both the best and the worst thing to happen to the internet. While Javascript gives you all the power to customize and animate, it is very easy to install unnecessary scripts and functionality that slows down your user's experience. Most external libraries and services use Javascript to communicate with their service from the customer's web browser. Take for example, services like Intercom that will require you to add a Javascript file to help it communicate with their own platform to save your chat communications. Occasionally these scripts need to make multiple calls to communicate with their platform, which slows down your browser while it waits for the platform to respond.

Javascript can also be used to manipulate the visual state of your website and move things around or add in transition effects. This can slow things down - or even worse - give your customers the illusion of a slow or faulty interface if it wasn't correctly programmed. Imagine you clicked a box on the site and then a slow flickering fades out makes you think it’s broken when it’s actually just too slow. That's why it's always best to have a professional Javascript specialist write the scripts that interact with your interface.

Here’s a great post explaining the importance of Javascript performance on the Shopify platform https://www.shopify.ca/partners/blog/javascript-performance.

Redirects and broken links confuse your web browser and potential customers don't know where they want to go next. It also confuses search engines as they crawl your website and causes you to get a lower ranking for SEO. That's why it's extremely important that your link content is always up to date and doesn't link to pages that aren't there anymore.

Try to do a link audit from time to time to make sure that your outbound links or even internal linking is still working properly in order to avoid this pitfall. A tool like Screaming Frog can help with this.

Have you used a poorly built theme?

Sometimes it's easy to choose style over function, especially when choosing a theme for your Shopify store. If you aren’t building a new theme from scratch and want to base your site on an existing template, make sure to stick with the most minimalist themes from a tried and true source like Shopify’s official theme store, Pixel Union or Out of the Sandbox.

You can find amazing themes created by the Shopify Team or Shopify Partners that follow the highest standards and aren't trying to reinvent the wheel. Themes with complicated user interfaces or odd design patterns can often slow your website by including too many scripts and template tags that send your customers away looking for another shop to buy their goods.

Are you using Liquid Templates in the wrong way?

Last but not least, it's extremely important to use Liquid templates the way they were built. Liquid is a powerful templating language for Ruby and Ruby on Rails and is the basis for your Shopify themes. Shopify’s theme platform parses your Liquid Templates to produce the HTML that is displayed by your web browser. This is how your theme is translated into a visual interface for your uses. In fact the founder of Shopify was one of the main contributors to Liquid and has been using it within the platform since 2006.

When using Liquid template tags, you load different sections of content based on certain conditions. Make sure your scripts aren't reloading multiple sections multiple times to give a desired visual effect as this causes major slow downs before your website has finished loading. This Liquid loop effect can become a large burden on your page speed. Most Liquid template scripts are loaded at the beginning of the page before the content is visible to your customer, which makes it essential to improving your load time.

Here is a great overview of Liquid and how it is used within your Shopify theme https://www.shopify.com/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language

What next?

Now that we have covered all the ways you can slow down your new theme, we’ve prepared a complete checklist for getting your theme fully optimized. Send us your email below and we will email you with our complete checklist.