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:
- Pinterest rebuilt their pages for performance they saw a 15% increase in SEO traffic.
- BBC saw they lose an additional 10% of users for every additional second it takes for their site to load
- AliExpress reduced load time by 36% and saw a 10.5% increase in orders and a 27% increase in conversion for new customers.
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.
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!
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.
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?
Have you checked for broken links and redirects?
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
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.