When your high-volume ecommerce business faces a massive traffic surge or a rush of transactions and sales, you need a platform that performs under pressure:
- Days before their busiest holiday, Shopify Plus helped AAF improve its load time, doubling conversion rates and profit margins
- Before being featured in O Magazine, Peepers replatformed, saved $100K, optimized site speed, and lifted conversions by 25-30%
- Mava Sports achieved a ~7% conversion rate and a 3X return on its Facebook ad spend after increasing page speeds by 5X
Curious about getting similar results? Keep reading … or schedule a Shopify Plus demo today.
According to Harry Shum, a former speed-specialist researcher at Microsoft: “Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web.”
The stakes are high, and that’s why we’ve put together a near-exhaustive resource to guide you …
12 ways you can improve ecommerce site performance and page speeds:
- Use Fast and Reliable Hosting
- Leverage a Content Delivery Network (CDN)
- Organize Your Tracking with Google Tag Manager
- Prioritize Testing & Optimizing Your Mobile Performance
- Use Pop-up Quick View Windows Sparingly
- Beware of Excessive Liquid Loops
- Decrease Thumbnail Image Size
- Ease Up on Homepage Hero Slides
- Weigh the Benefits of Installing Another App
- Compress and Reduce Images
- Minify Your Code Universally
- Reduce Redirects and Remove Broken Links
How Does Page Speed Affect Ecommerce?
Page speed (or, load time) refers to the total amount of time it takes the content on a specific URL to load. Site speed, in contrast, is an average of various load times services like Google use to score a site in aggregate.
Late last year, Skilled crunched the number on 12 separate case studies related to page speed and discovered a host of troubling results …
When it comes to customer expectations and site performance:
- 79% of customers who are “dissatisfied” with a website’s performance are less likely to buy from that site again
- 64% of smartphone users expect a website to load in four seconds or less
- 47% of online shoppers expect web pages to load in two seconds or less
Perhaps more startling is the difference a second makes in ecommerce:
- If a site makes $100K per day, a one second improvement generates an additional $7K daily
- A one second delay in load time normally equals an 11% loss in pageviews
- A one second delay also means an overall 7% drop in conversions
What’s more, your page speed also impacts a new visitor’s ability to find your ecommerce website through both PPC channels and organic search engines.
With the first, slow sites produce slow landing pages. Slow landing pages lower your Google Quality Score. And a lower Google Quality Scores means a higher cost-per-click.
With the second, what SEO experts have long suspected regarding organic ranking, Google recently made official in what they’ve dubbed the “Speed Update”:
“Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.”
Where should you start?
Analytics for Improving Site Performance and Page Speed
If you have a Google Analytics account, look for a tab called ‘Behavior,’ then select ‘Site Speed,’ and click on ‘Overview.’ This page will give you some important stats that you’ll need to monitor including your average user’s download time, domain lookup time, and average server response time.
Next, check out the ‘Page Timings’ section which gives you a breakdown of your website by pages, plus an overall loading rate for each page – and even each browser. A red box will indicate any lagging and slow pages:
So, what can you do to increase ecommerce site performance and speed?
1. Use Fast and Reliable Hosting
Your hosting service and infrastructure can make or break overall ecommerce site performance — especially during high-traffic and high-transaction days.
The list of name-brand retailers that experience ecommerce site crashes during Black Friday — like Best Buy, Lowes, Macy’s, and more — continues to grow every year. Beyond the bad publicity, the lost sales from that downtime can be painful to accept.
According to an ITIC survey:
81% of respondents indicated that 60 minutes of downtime costs their business over $300,000.
Some factors to consider when researching hosting platform requirements include:
- Memory or bandwidth limits to determine if the platform can scale on demand during planned flash sales and seasonal promotions
- Projected traffic and peak user load to ensure a platform won’t crash due to a sudden spike in visitors to your site
- PCI compliant security to protect your users’ data at all times
Why start with hosting? Because …
Merchant Spotlight: Bombas
When Bombas first began getting featured on high-profile TV shows like Shark Tank, its ecommerce site load quickly increased from 500 daily transactions to upwards of 5,000.
Unfortunately, on its old hosting platform, Bombas’ site crashed immediately after the original show and subsequent reruns aired on CNBC.
Broken product images and a sluggish checkout experience cost the company many potential new sales and repeat customers.
Replatforming to Shopify Plus gave the Bombas team confidence that the ecommerce site would scale and stay up and running during high-volume traffic spikes, such as future Shark Tank reruns.
Regarding Black Friday Cyber Monday, David Heath — co-founder at Bombas — explains:
“It’s the one time of year that we offer a sale, so preparing for this is a year-long effort — between customer acquisition, our email plan, developing and releasing new product, making sure that we’re in stock, and then making sure that we’re fully staffed up on customer service to make sure that everything runs smoothly, and that all our customers get their products when they’ve ordered them.”
Whether we’re doing 500 or 5,000 orders a day, Shopify Plus automatically scales with us, without us having to do anything extra.
What explains the difference?
Thanks to its cloud-based infrastructure — as opposed to Magento’s on-premise approach — Shopify Plus not only maintains 99.98% overall uptime but our storefront loads 2.97X faster than other SaaS platforms, like BigCommerce, and analysts suggest checkouts are up to 40% faster.
In addition, merchants on Shopify processed $1.1 million sales per minute at Black Friday Cyber Monday’s peak.
As Greg Merrell, the co-founder of simplistic — a Shopify Plus Solutions Partners that specializes in high-volume, high-traffic flash sales — says:
“Shopify Plus is the only platform we trust to handle the massive spikes in traffic and transactions that come from Good Morning America, The View, and other nationally televised flash sales.”
“With over a thousand successful flash sales we can unequivocally recommend Shopify Plus for all of your high traffic needs.”
2. Leverage a Content Delivery Network (CDN)
A Content Delivery Network or Content Distribution Network (CDN) consists of a group of optimized servers that are dispersed around the world. It distributes the load of delivering content via the server that is closest to the visitor’s location.
Essentially, copies of your site content are stored in each location to make a local user’s experience faster and more reliable.
You can also use a CDN with your tag management system (TMS) to improve your ecommerce site performance as described below. Instead of relying on just one server, your CDN will pull your tags from the most optimal server and load them on the fastest server(s).
Given the increasingly international nature of ecommerce, leveraging a CDN — or in the case of Shopify, dual CDNs — is a non-negotiable ingredient your platform should provide and optimize regularly.
Shopify provides merchants with a world-class CDN powered by Fastly at no extra cost. It allows Shopify stores to come up almost instantaneously anywhere in the world, particularly the U.S., U.K., APAC region (Asia, Australia, and New Zealand), and both South America as well as southern Africa.
Rather than create thousands of small, scattered points of presence (POPs) — as legacy CDNs did during in the dial-up era — Fastly takes a fundamentally different approach:
“We’ve focused our efforts on placing fewer, more powerful POPs at strategic locations around the world. High-density POPs enable us to serve more from cache, including static and event-driven content. This improves your cache hit ratio, resulting in better user experiences.”
As a redundancy, Shopify also provides access to Akamai’s CDN, what the company calls its “Media Delivery Network”:
CDNs are about both increasing speed and reducing cost. As Red Dress Boutique owner, Diana Harbour, explains:
“An annual license with Magento Enterprise starts around $50,000 and goes up. Hosting was costing us another $6,000 per month and the CDN was $2,000 per month. Getting our license, hosting, and CDN from Shopify Plus saved us about $100,000 per year right off the bat compared to Magento.”
How Shopify’s CDN Works
Shopify informs the CDN that your assets — such as images, JS and CSS — have changed whenever you do so on your end.
Regarding visual content, which is often the culprit in slow performance, Shopify uses the asset_url filter and automatically appends version numbers to all of the URLs it generates. For example, a version number appended to the end of a URL might look like this: ?v=1384022871
If you link to an image without using the asset_url filter and upload a new version of the same content, then your online store might not change to the new version for a day or more. If you reference content directly in your CSS, then the URL will be static and will not carry the asset version that Shopify updates automatically.
To make sure updates happen automatically, change your CSS syntax to include the asset_url filter. For information on all of the URL filters that are used to pull assets, check out the overview on the Shopify Help Center.
A standardized CDN lets Shopify Plus merchants power their website’s “backend on autopilot” — so they can focus on other business priorities like maximizing sales and marketing success. Vali Vetan, co-founder at Mava Sports says it best:
It’s actually cheaper because you don’t need to buy a content delivery network. You don’t need to buy a developer. You don’t have to stay busy looking for teams. You have it all in one place.
3. Organize Your Tracking with Google Tag Manager
To successfully optimize your ecommerce website and digital marketing strategy, you must collect a host of customer data.
Unfortunately, all those JavaScript tracking tags — for general analytics, conversions and goals, behavioral retargeting, etc. — can eventually slow down your site performance.
It’s also a time and resources burden for your dev, IT or marketing teams to deploy, test and monitor the tags throughout your MarTech system. As nChannel explains:
“Adding, updating, and maintaining all those tags became cumbersome for developers, so vendors like Google created tag management systems to simplify things. Google Tag Manager makes applying JavaScript to your site easier.”
A tag management system (TMS) like Google Tag Manager condenses all of your MarTech tags into one JavaScript request.
According to Tag Inspector, this helps to “reduce the number of required outside calls … it also makes this request asynchronously (in the background, letting the rest of your website load independently of the response outcome).” Likewise, if a tag failure causes your website to go down, having a TMS enables you to remove the tag quickly — saving you hours of frustration and potentially millions of dollars.
The diagram from ConversionXL below is a visualization of how a TMS can speed up your page loading time:
Before using Google Tag Manager, it used to take Airbnb two to three days to complete its tagging deployment & QA process. “With Google Tag Manager, it’s a matter of an hour or so from receiving a tag to testing to QA to deployment. It’s exponentially better,” says Mona Gandhi, Software Engineer at Airbnb. Airbnb now boasts an “8% improvement in page load time.”
Carefully Consider Each Tool You Add to Google Tag Manager
Creative agency, A Digital warns that while Google Tag Manager is extremely helpful in saving you time and speeding up your ecommerce site performance, it’s important to “question each tool that is added to keep an eye on the effect it is having on your page speed and user experience.”
As you can see, via the full waterfall image of the tagged tracking tools from A Digital’s site below, the load times are solid until about the halfway mark.
After the red lines beside the Typekit fonts, it’s clear that Intercom is the biggest drag on the agency website’s page speed. The agency suggests that if Intercom were removed, it would reduce the loading time by almost half.
Similarly, to make its site load almost 5X faster, Shopify Plus merchant Mava Sports “removed as many apps and plugins it could without compromising user experience.”
The good news is one snippet of code is all you need to manage all of your Shopify Plus store tags in one place with Google Tag Manager. To learn more, refer to the guidelines in the Shopify Plus Help Center. If you need a visual demonstration, Measure School provides a free, hands-on tutorial:
4. Prioritize Testing & Optimizing Your Mobile Performance
You’ve probably experienced first-hand how waiting for a slow loading page can feel like an eternity. According to Mobile 1st:
Slow pages are the number one issue that irate mobile users complain about — ranking even higher than site crashes.
Google recently trained a deep neural network — “a computer system modeled on the human brain and nervous system” — and found …
Having a mobile-first ecommerce strategy has never been more critical. And it’ll only get worse if you don’t optimize your ecommerce site’s mobile UX soon.
Over Black Friday Cyber Monday, Shopify saw mobile account for 64% of all sales, an increase of 10% year-over-year. This trend will continue in the future, with mobile commerce sales expected to reach $250 billion annually by 2020.
Now is the time to ensure that your mobile-first commerce presence is on par with, or even better than your competitors.
(A) Test & Optimize Your Mobile Ecommerce Site Speed
PageSpeed Insights is a web-based tool that can be accessed via Google Labs. It will give you personalized suggestions on how to improve ecommerce site performance on mobile and desktop separately as well as reveal the elements on your site — like CSS and JavaScripts — that are blocking pages from rendering quickly.
You can also research competitive merchants. Knowing what’s wrong with their site performance could help you avoid making the same mistakes.
Merchant Spotlight: Merchology
After diving deep into its analytics data, leading corporate branded apparel and accessories provider, Merchology discovered that the majority of its mobile site visitors weren’t converting. It quickly became clear that the company would need to re-design its ecommerce site in order to offer a mobile-first customer experience.
“Wouldn’t it be great if ordering from a mobile device was just as fast and easy as ordering from a desktop or tablet?” asked VP of Marketing, Nolan Goodman of his team.
The company spent a lot of time analyzing data before even thinking about the UX. Merchology’s team studied the way in which users switched between mobile and desktop and used the data to build a story to drive its mobile-first site design.
Two months after launching the redesigned mobile site in September 2016, Merchology celebrated some impressive results:
- 340% YoY lift in revenue per mobile device
- 40% increase in their mobile conversion rates
“Simplicity drives sales regardless of device. We’ve made it simple to order and checkout regardless of whether a customer is using a desktop computer, tablet, or mobile device.”
Nolan Goodman, VP Marketing at Merchology
(B) Then, Test Desktop Page Speed
PageSpeed Insights will also give you a Desktop report, with similar — although not identical — suggestions. Again, be sure to compare your own site performance with those of your top competitors.
Remember, 0.25 seconds is all that constitutes a competitive advantage.
(C) Get a Cumulative Grade
GTMetrix gives your website a grade from A to F in terms of speed by merging data from Yslow and PageSpeed Insights. It also offers a performance report which helps you to analyze key issues to that require optimizations.
(D) Score Your Site Performance on Remaining Optimizations
Pingdom.com should be your final test. It will score your site performance (ranging from 0 to 100%).
It also has a useful “waterfall analysis” feature that helps you identify other major problem areas and their relative importance to optimization. This line-by-line scoring is incredibly valuable to come back to and test as you follow the remaining steps on this list.
Now that you know what went wrong and what you have to fix, it’s time to start eliminating repeat speed offenders. Let’s look at some Shopify Plus-specific optimizations.
Improving Speed on Shopify Plus
For enterprise ecommerce, combining a rich, customized, and personalized shopping experience with exceptional site performance is a challenge.
The following tips were created specifically for Shopify Plus merchants by Jonathan Sinclair from the Merchant Success Team.
Third-party tools like GTMetrix and PageSpeed are each configured differently. Tools that provide “page load” timing have to select one specific time marker — like “time to first byte” (TTFB) — in their results.
However, they don’t all choose the same endpoint. So while one tool might tell you 5.14 seconds, another might say it’s 11.80 seconds. This is why using a variety of measurements is crucial.
Also, these tools were not made specifically to crawl and analyze a Shopify site.
Let’s take a closer look at some of the most common page speed issues on Shopify stores, and discuss how to fix them:
5. Use Pop-up Quick View Windows Sparingly
The whole point of improving page speed performance is to help customers, who are time-starved and impatient, to find and buy what they need in a hurry.
So, it may seem like common sense to provide your ecommerce site visitors with a pop-up quick view window that displays a particular product — directly from a product listings page — rather than requiring them to click through to a product detail page.
In theory, it should save them time to decide whether or not they are really interested in a particular product.
The challenge with this approach is that it can actually impede a customer’s experience on your ecommerce site:
- It adds an extra step to the customer’s journey
- It can be clicked on by accident which is frustrating to the user
- It can be mistaken for a product page which is confusing
More importantly, it can significantly slow down your page loading time.
Often quick view pop-up implementations (either built into the theme or from an app) will pre-load all of the information from an entire product page just in case a visitor clicks the “Quick View” button.
That is an enormous amount of data to be loaded, especially on a collection page where there might be 20 or 30 product thumbnails.
You can test to see if your customers are even using the Quick View window via click mapping. Some apps that can help you to do so include:
Lucky Orange is also recommended. But keep in mind that it can slow page speeds while it is being used for this purpose.
If you discover that customers aren’t using the tool heavily, and there is no other critical reason for having Quick View enabled, then we recommend removing it.
Detection
It should be easy enough to see if there is a Quick View button showing on your storefront product thumbnails. If so, first check your theme customizer for an option to enable/disable this function.
If you don’t see this option in the theme customizer, check to see if it’s coming from an app — in which case it should be fairly intuitive how to remove it.
If the first two steps came up empty, it is likely baked into the theme itself, which requires a developer to identify and remove it.
Solution
- Use AJAX to pull the product info once the visitor clicks the Quick View pop-up button, or
- Save a limited set of product information as data attributes on the product grid item, then build the HTML and pop-up dynamically with JavaScript
Either is slightly less ideal than removing Quick View, as the product info still has to be loaded for each product. But it's better than having to download all the product images and links.
6. Beware of Excessive Liquid Loops
Liquid is a Shopify proprietary language that has proven to be very powerful. However, there are certain functions where you should be aware of the added benefits as well as the tradeoffs.
For-loop iteration is one of those instances that can affect Shopify Plus merchants. It happens when the system has to loop (or crawl, or search through) all of the products in a collection to look for a specific condition, whether that is a tag, price, etc.
If you have a large product catalog, as many high-volume merchants do, this looping will take a long time.
This issue is commonly found in two cases:
- Advanced collection filtering and mega-navigation implementations because they utilize nested for-loops to go over all the products and find the applicable ones to serve
- Swatches because for each product on the collection page the code loops through all of the variants, then all of the images, and then has to split out the specific color with which the image is associated
These features can be beneficial in certain cases like outputting images or product variants, and if you have a smaller number of products on a collection page.
So again, just be aware of how they’re being used and how they affect load times.
Solution
The first step is to ensure that you are being as efficient as possible in your code. For example, nested loops can cause issues and require optimization.
Next, Shopify Plus Technology Partner Findify has discovered ways to deliver advanced collection filtering, without compromising load times.
Here’s how the company reduced the load time of a 30,000 product collection from 15 seconds to 2.5, which resulted in a whopping 20% conversion uplift for its Shopify Plus clients:
- The developers pre-compute all filters on the Shopify backend
- When a collection is loaded, they initially return only a subset of the products
- As customers browse or use filters, the displayed products are personalized
- All the filters are dynamic, which means you will only get filtering options relevant to the products in that specific collection
Outputting the swatches themselves can be problematic. It’s common practice to use this documentation on outputting color swatches. Please note that it is currently being updated.
What’s going on in the screenshot above is the system is looping through all of the product options, then finding the index of the color option (if it exists). Next, it loops through all of the variants and outputs the color option of that variant, but only if it hasn’t already been output.
That’s a lot of moving parts!
A better solution is to use a simple product.options_with_values loop. For a more detailed explanation of how Shopify’s templating language and liquid loops work, check out this post.
7. Decrease Thumbnail Image Size
When you use a carousel feature for “Best Selling Products” on your homepage, information is being pulled from your product pages and displayed in thumbnail fashion.
The problem occurs when a product image is pulled in a larger size than needed, causing the user’s browser to scale it down.
It’s like buying a jacket that’s too big for you and having to take it to a tailor … every time you put it on.
Solution
Themes should take advantage of Shopify’s built-in image size parameters to download the smallest possible image while maintaining quality. It asks Shopify for the exact image size that is going to be displayed, cuts down the file size downloaded from the CDN, and reduces the required browser-side scaling.
All Shopify built themes are now set to deliver the appropriate image sizes based on device viewpoints.
Advanced Options
Your theme can also be set to use:
- srcset to pull appropriate image size based on screen resolution
- Lazy Load to first pull low-resolution images and then replace them with high-resolution versions once the page content has loaded
8. Ease Up on Homepage Hero Slides
Carefully consider multi-image slideshows before adding them to your site. The size and quality required for a hero slider to look good can quickly increase load times, especially if you have four to five slides:
Solution
The simplest way to resolve this issue is to cut down the number of homepage slides or eliminate them entirely. A single, high-quality, well-thought-out hero image with a clear call to action has been shown to be very impactful.
If you absolutely must use a slider, then be sure to follow UX best practices to get as much benefit out of them as possible, keep it to a maximum of two to three slides, and use srcset or Lazy Load as a catch-all.
9. Weigh the Benefits of Installing Another App
The majority of script/CSS files for apps downloaded using the Shopify Plus Admin are injected into the <head> of your theme.liquid file within {{ content_for_header }}.
As a result, app content will be some of the first to be loaded onto the page.
The problem is that sometimes an app is built in a way that requires the page to load code (mostly JavaScript and CSS) before it can continue loading content from further down the page (i.e., images and text).
Sometimes, in order for an app to function correctly, it needs to be rendered before the following code is loaded.
“Navigating this tension between faster loading versus the experiential and sales value of apps,” explains Jason Bowman, a Solutions Engineer and APAC Team Lead at Shopify Plus, “is why we async load scripts added with Script Tag API so the page load isn’t halted.
“However, <scripts> added directly into the <head> often has immediate impact on performance.”
The main question you have to ask yourself when it comes to each and every app that you install is: Will the added value of this app outweigh the possible slow down of load speed?
Solution
If you happen to have 20+ apps installed on your store, it’s likely you aren’t using them all. Perhaps you installed them as a trial, then forgot to remove them.
Meanwhile, the app has been silently running in the background, hurting your ecommerce site performance.
Go through and remove any apps that you aren’t using. Next, run page speed tests using tools like GTmetrix or PageSpeed Insights, or even a manual test using Chrome’s Developer tools — simply click over to the “Network” tab and reload the page.
The Plus Merchant Success Team strongly suggests that you enlist a developer’s help to find and remove the non-vital and offending app.
10. Compress and Reduce Images
Images account for somewhere between 50% to 75% of your web pages’ total weight. The higher-quality your images and the more you host on each product page, the larger that number gets. Lossless compression minimizes image size without reducing quality:
For new images …
Shopify developers also recommend using TinyJPG or TinyPNG for this task.
For excess images …
Keep in mind that each image you use on a page creates a new HTTP request. In addition to streamlining page speed, trimming the number of images helps you do more and say more with less.
Also, watch out for empty image sources — <img src = ‘ ’> — in your code. These cause an excess burden on the browser to send yet another request to your servers.
A simple solution you can use is called “sprites” which consolidate multiple images like icons into one, limiting the server’s number of individual image requests and improving your page speed. Uploading your images to a free tool like SpritePad will quickly create sprites and render the code for you.
11. Minify Your Code
Poorly coded HTML, CSS, and JavaScript on your web page can seriously slow your site’s performance.
For an easy fix, Google Developers have created a process known as “minification” and offer a list of HTML, CSS, and JavaScript-specific resources to help. More detailed guidance is provided by kangax/html-minifier on GitHub:
Note: Shopify handles SCSS.liquid minification automatically. We also offer whitespace controlling tags to help theme developers remove some bloat in the rendered HTML.
12. Reduce Redirects and Broken Links
Additional performance issues can be caused by too many redirects and broken links. Do some house cleaning every now and then to keep them to a minimum.
For redirects...
While redirects are helpful to send visitors to new URLs, they should be used sparingly. 302 redirects, which indicate a page has been moved temporarily, can hurt your SEO, trigger additional HTTP requests and delay data transfers. Instead, use a “cacheable redirect” or Shopify’s built-in redirects function — which are 301s by default — within the Navigation panel.
If you have a large and/or older site that has recently moved or restructured URLs, never redirect URLs to pages that are themselves redirects. It sounds obvious but it happens.
For broken links...
Again, broken links or the wrong links for page elements like images, CSS and JS files increase HTTP requests and sting your site speed. Removing them is an easy win if you use a tool like Broken Link Checker.
It’s also a best practice to create a custom 404 error page to assist visitors who accidentally enter an incorrect URL for your site.
Final Thoughts on Improving Ecommerce Site Performance
When it comes to optimizing your mobile and desktop pages for increased speed, there is a lot to consider. It can be even harder if you don’t have buy-in from your team or boss to invest the time and resources necessary to do so.
The data and tools we’ve shared so far should be enough to get started in building a case for page speed optimization and to improve ecommerce site performance.
You’ll be able to do many of these optimizations yourself. When it isn’t possible, you can enlist the help of a Shopify Plus Partner. If you need additional support, please share your requests in the comments below.
About the Author
Andrea Wahbe is a freelance B2B marketing strategist and corporate storyteller who writes about Canadian SMEs, marketing, and digital media trends. Follow her on Twitter.
