Improve Your Ecommerce Site Performance & Speed to 2X Conversions

Improve Your Ecommerce Site Performance & Speed to 2X Conversions

Editor's Note: This post was originally published in May 2018 and has been updated for accuracy and comprehensiveness.

A massive traffic surge or a rush of transactions and sales can be lethal—both to your ecommerce site performance and page speed. Not to mention your brand image—but you can prepare for it.

The longer you put off optimizing your site for speed, the more customers you’ll lose to a faster competitor’s site. Google’s mobile page speed study shows that a site’s bounce rate gets worse every second it takes for a page to load. 

Google page load test results

The stakes are higher for ecommerce sites than ever. That’s why we’ve put together this guide for you.

How does page speed affect ecommerce?

Page speed measures the time it takes the content on a URL to load. Site speed, on the other hand, represents how your site is performing overall. It’s scored by services like Google PageSpeed Insights which look at various load times on your site in aggregate.

Skilled analyzed 12 case studies that revealed customer expectations of site performance:

79% of customers “dissatisfied” with a site’s performance are less likely to buy from them 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

    A time delay impacts your ecommerce sale, too. Through a client experiment, web performance expert Tammy Everts discovered: a two-second page speed decrease boosted conversions by 66%. Everts says “online shoppers will never learn to be patient with slow pages.” 

    If a site makes $100K per day, a one second improvement generates another $7K daily. A one second delay also means an overall 7% drop in conversions.

    Both paid and organic search engine channels will also penalize a slow loading site.

    With paid search, slow landing pages lower your Google AdWords Quality Score—which means a higher cost-per-click.

    Search engine optimization (SEO) experts will also tell you that slow pages hurt organic rankings. Google made it official in their latest “Speed Update.” As of July 2018, page speed is now a ranking factor for mobile searches, too.

    Let’s talk about how you can you win more customers—through search and overall—with faster load times and better site performance.

    12 ways to improve your ecommerce site performance and page speeds:

    1. Use fast and reliable hosting
    2. Use a content delivery network (CDN)
    3. Organize your tracking with Google Tag Manager
    4. Prioritize testing and optimizing your mobile performance
    5. Use pop-up quick view windows sparingly
    6. Beware of excessive liquid loops
    7. Decrease thumbnail image size
    8. Ease up on homepage hero slides
    9. Weigh the benefits of installing another app
    10. Compress and reduce images
    11. Minify your code universally
    12. Reduce redirects and remove broken links

    1. Use fast and reliable hosting

    Depending on a user’s device or network, page speed can vary. Still, your hosting service and infrastructure can influence your ecommerce site performance (especially during high-traffic and high-transaction days).

    The list of name-brand retailers experiencing ecommerce site crashes during Black Friday—like Lululemon, J.Crew and Lowe’s—continues to grow. According to ITIC’s survey, “81% of respondents said 60 minutes of downtime costs their business over $300,000.”

    When researching hosting platform requirements, make sure you look at:

    Thanks to our cloud-based infrastructure, Shopify Plus has a 99.98% overall uptime. Our storefront also loads 2.97X faster than other SaaS platforms.

    At Black Friday Cyber Monday’s 2018 peak, businesses on Shopify processed $37 million sales per hour.

    Shopify's 2018 BFCM big picture: $1.5B+ total sales in four days, 10,978 peak orders per minute and $37M peak sales per hour

    Data aggregated from Shopify merchants (2018)*; for a detailed look at the strategies behind that data, check out Holiday Ecommerce 2018: 10 Marketing Strategies from +$1.5B in Online Sales

    Before any major sales event, ask your commerce platform provider to help you prepare for unexpected traffic spikes or an influx of orders. 

    A Black Friday outage in 2016 cost SweetLegs six-figures in lost sales. Not wanting a repeat of that nightmare, the company decided to replatform—just in time for the 2017 holiday shopping season.

    “In about a 30-day turnaround, we were fully done, launched, up and running, orders coming in,” says Chris Pafiolis, founder of SweetLegs. “What we noticed was—the new Shopify site, no matter how hard we hammered it with our distributors, it did not go down.”

    During Black Friday Cyber Monday 2017, the SweetLegs site handled 11,000 orders. Even more impressive, during the first two quarters of 2018, SweetLegs sales were up 40% year-over-year.

    2. Use a content delivery network (CDN)

    A Content Delivery Network or Content Distribution Network (CDN) is a group of servers dispersed all around the world. It distributes the content delivery load through the closest server to your visitor’s location, making local user experiences faster.

    Since more ecommerce sites are going global, a CDN—or in the case of Shopify, dual CDNs—is a non-negotiable ingredient for platform performance.

    Shopify offers a world-class CDN powered by Fastly at no extra cost. Shopify stores will come up almost instantaneously anywhere in the world. Locations include: the U.S., U.K., South America, southern Africa, Australia and New Zealand (APAC) region, and Asia.

    There are now fewer, more powerful Fastly Points of Presence (PoPs) at strategic locations around the world. High-density PoPs enable them to serve more from cache, including static and event-driven content. This improves your cache hit ratio, resulting in better user experiences.

    A map of the world showing fastly POPs, multiple POPs, and planned POPs.

     

    Image via Fastly Network Map (May 28, 2019)

    Overall, CDNs help to increase speed while reducing costs. “Getting our license, hosting, and CDN from Shopify Plus saved us about $100,000 per year right off the bat,” says Red Dress Boutique owner, Diana Harbour.

    A media delivery map showing Akamai Media Delivery Network coverage

    How Shopify’s CDN works

    Visual content is often the cause of slow performance. Shopify informs the CDN when your assets—such as images, JavaScript (JS) and cascading style sheets (CSS)—have changed.

    We use the asset_url filter and automatically append version numbers to all of the URLs we generate. For example, a version number appended to the end of a URL might look like this: ?v=1384022871. The versioning ID added automatically via the asset_url filter helps to tell the CDN to pull the correct version. Without the version ID you may not see the asset you expect after you’ve made changes to your content.

    So to ensure, say, the correct new image appears automatically on your online store, you must link to an image using the asset_url filter. 

    Additionally, if you reference content directly in your CSS, the URL will be static. It also won’t carry the asset version updated automatically by Shopify.

    To ensure automatic updates, change your CSS syntax to include the asset_url filter. For information on all of the URL filters that help to pull assets, visit the Shopify Help Center.

    While optimizing your content delivery, consider using tools to better manage your JavaScript tracking tags.

    3. Organize your tracking with Google Tag Manager

    Customer data fuels your ecommerce and digital marketing strategies. But collecting that data can also slow down your site performance. All those JavaScript tracking tags (e.g., for general analytics, conversions and goals, behavioral retargeting) are often to blame.

    Customer data collection can also be a time and resources burden for your developer, IT or marketing teams. A Tag Management System (TMS) like Google Tag Manager condenses all your tags into one JavaScript request. If a tag failure causes your website to go down, having a TMS also helps you remove the tag quickly.

    According to Tag Inspector, this will “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).” 

    The diagram from ConversionXL below illustrates how a TMS speeds up your page loading time:

    A diagram of synchronous JS loading. JS files can load as soon as they're ready, and don't hold up the loading of other elements.

    One snippet of code is all you need to manage 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

    Now let’s review some testing tools and strategies you can use to increase site speed. Of course, you should always start with your mobile.

    4. Prioritize testing to optimize your mobile performance

    A mobile commerce strategy has never been more critical. Over Black Friday Cyber Monday 2018, Shopify saw mobile account for 66% of all sales. The overall U.S. ecommerce market was only at 39%. The discrepancy was likely due to better mobile-first experiences with Shopify stores.

    The mobile shopping trend will only continue to grow—with mobile commerce sales projected to reach $319 billion annually by 2020

    Mobile takes over the holidays on Shopify - On Shopify global, 66% of orders were placed on mobile and 34% on desktop. In the U.S. industry, only 39% of orders were placed on mobile, and 61% on desktop.

    Despite high mobile purchase rates, according to Mobile 1st, the number one issue that mobile users complain about is slow pages. They rank even higher than site crashes.

    After discovering the majority of mobile visitors weren’t converting, corporate apparel and gifts brand Merchology decided to re-design its mobile site for a mobile-first customer experience. Two months after launching the mobile site, Merchology achieved a 40% increase in mobile conversion rates.

    Below, we outline how you can make sure your mobile-first presence, and overall site performance and speed, matches or outpaces your competitors.

    (A) Test and optimize your mobile site speed

    PageSpeed Insights is a Google Labs tool that gives you personalized suggestions to improve your mobile site performance (separately from desktop data). It also calls out the elements on your site that slow down the page, like CSS and JavaScript.

    You can even look at your competitors’ mobile site performance. Knowing what’s wrong with their site can help you avoid the same mistakes.

    Screen capture from PageSpeed Insights showing Amazon's first contentful paint (FCP) and first input delay (FID)

    Also, Google’s Test My Site tool will help you calculate how site speed can boost your mobile conversion rates:

    A screen capture fromGoogle's Test My Site Tool. Evaluate the impact a faster site can have on your business. $113,583 USD from a site speed improvement from 2.3 seconds to 1.1 seconds.

    (B) Then, test your desktop page speed

    PageSpeed Insights will also give you a Desktop report, with similar suggestions. Again, compare your own site performance with those of your top competitors.

    A screencapture from PageSpeed Insights showing Amazon's site speed has gone up to 80.

    (C) Get a cumulative grade

    GTMetrix gives your website a grade from A to F on speed. It merges data from both Yslow and PageSpeed Insights. It also offers a performance report which helps you analyze issues that require optimizations.

    A screencapture from GTMetrix scoring a website on page areas including: image dimensions, browser caching, scaled images, and meta tags

    (D) Score your site performance on final 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. This line-by-line scoring is a useful reference tool.

    A screen capture from Pingdom showing a site's page load time over one week.

    Keep in mind

    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. 

    Be aware that each speed testing tool uses a different scoring method, much like every team will have a different definition of a good site speed.

    Use these speed tests to guide your decision making, but keep an open mind. You must balance your site speed with building a user interface that optimizes your customer’s journey.

    These tools were also not made to crawl and analyze Shopify sites. We’ll look at those specific tips next.

    Shopify Speed Optimization

    Let’s examine the most common Shopify page speed issues and how to fix them. Jonathan Sinclair, a Merchant Success Program Manager with Shopify Plus, created these tips to help you.

    5. Use pop-ups sparingly

    Providing a pop-up quick view window might seem like common sense. They display a product—directly from a product listings page—rather than making you visit a product detail page.

    In theory, it should save your customers time to decide if they’re interested.

    A product pop up on a product page

    But 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

    More importantly, it can significantly slow down your page loading time.

    Quick view pop-up implementations (either built into a theme or from an app) can sometimes pre-load the information from an entire product page. It’s just in case a visitor clicks the “Quick View” button.

    Yet, that’s an enormous amount of data to be loaded—especially on a collection page with 20 or 30 product thumbnails. Click mapping, a JavaScript-based tool that tracks where users scroll, or move their cursor to click on your site pages, can help you see whether your customers are even using quick view.

    Some apps that can help include:

    We recommend removing quick view if:

    • Your customers aren’t really using it
    • There’s no other critical reason for having it

    Detection

    It should be easy to see if there is a “Quick View” button on your storefront product thumbnails. Check your theme customizer for an option to enable or disable this function.

    If you don’t see this option in the theme customizer, check to see if it’s coming from an app. If it is, it should be obvious how to remove it.

    If the first two steps don’t help, it’s likely baked into the theme itself. In that case, you need a developer to identify and remove it.

    Solution

    Use AJAX to pull the product information once a 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 option is less ideal than removing quick view. The product information still has to be loaded for each product. Still, it's better than downloading all the product images and links.

    6. Beware of excessive Liquid loops

    Liquid is a powerful Shopify coding language. There are certain cases, however, when you need to weigh the added benefits versus the tradeoffs.

    Forloop iteration is one of those instances. Forloop means the system has to loop (e.g., crawl, or search through) all the products in a collection and happens when it’s looking for a specific condition (e.g. price, or a tag). 

    If you have a large product catalog, looping will take a long time. The issue happens in the following cases:

    • Advanced collection filtering and mega-navigation implementations: they use nested forloops to go over all products and find the applicable ones to serve

    • Swatches: for each product on the collection page, the code loops through all of the variants—then all of the images—finally splitting out the specific color with which the image is associated

    • Paginating collections with thousands of products: instead of keeping to a more sensible number of products on each page, sites show everything at once, and then use JavaScript to progressively load the page on demand

    These features can be beneficial in certain cases—like outputting images or product variants. They’re also helpful when you have a smaller number of products on a collection page. But be wary of the impact on load times.

    Solution

    Review your theme code to make sure your aren’t running liquid forloops multiple times looking for the same information. This can happen when multiple developers work on a theme and there may be duplicated tasks or conflicting code. Removing any code or duplicated task conflicts will make your page load faster.

    Findify has developed ways to deliver advanced collection filtering—without compromising load times. The company reduced the load time of a 30,000 product collection from 15 to 2.5 seconds. The result was a whopping 20% conversion uplift for Shopify Plus clients.

    This is how Findify works:

    • 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 become personalized
    • All filters are dynamic, so you’ll only get filtering options relevant to products in a collection

    Developers can use this documentation for outputting color swatches, which is sometimes problematic.

    In the screenshot, the system is looping through all of the product options. It then finds 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. That is, only if it hasn’t already been output.

    It’s often easier to use a simple product.options_with_values loop. Review the documentation to understand how Shopify’s templating language and liquid loops work.

    7. Decrease thumbnail image sizes

    Large thumbnails for best selling products decreases site speed

    Using a carousel feature for “Best selling products” on your homepage can be an issue. Information is being pulled from your product pages and displayed as thumbnails.

    The problem happens when a product image is pulled in a larger size than needed. It causes the user’s browser to scale it down for the thumbnail, which impacts your page load time. 

    Solution

    Use Shopify’s built-in image size parameters. It will ensure you download the smallest possible image while keeping the quality. It asks Shopify for the exact image size that’s going to be displayed. Then it 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 sizes based on screen resolution
    • Lazy Load to first pull low-resolution images—then replace them with high-resolution versions—once the page content has loaded

    8. Ease up on homepage hero slides

    Large hero image slides on sites decrease site speed

    Huge, multi-hero-image slideshows are great for showing off your products. Unfortunately, there’s a downside to using them. The size and quality required for a hero slider to look good can increase load times—especially if you have four to five slides.

    Solution

    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—helps draw your customers in quickly. It’s because the brain processes visual imagery 60,000 times faster than text.

    If you must use a slider, then follow UX best practices. Stick with two to three slides, and use srcset or Lazy Load as a catch-all.

    9. Weigh the benefits of installing another app for your site

    If you have 20+ Shopify apps (free or paid ecommerce plugins) installed on your store, you likely aren’t using them all. Maybe you installed some as a trial, then forgot to remove them. Still, those apps are running in the background, hurting your site performance.

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

    In order for an app to function correctly—it needs to be rendered before any other code is loaded.

    “Navigating this tension between faster loading versus the experiential and sales value of apps 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 an immediate impact on performance,” says Jason Bowman, a Solutions Engineering Team Lead at Shopify Plus.

    Whenever you want to install a new app, ask yourself: “Will the added value of this app outweigh the possible slow down of load speed?”

    Solution

    Go through and remove any apps 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. Click over to the “Network” tab and reload the page.

    Improve site speed by benchmarking your page load times in Developer Tools in Google Chrome

    Image via Chrome Devtools

    We recommend you enlist a developer to find and remove any unnecessary apps.

    10. Compress and reduce images in size and number

    Images account for somewhere between 50% to 75% of your web pages’ total weight. The higher quality your images, the larger that number gets. But you can minimize image size without reducing quality with lossless compression.

    To reduce the size of new images that you add, you can start with using TinyJPG or TinyPNG for this task.

    Also trim down the number of images used overall.

    Keep in mind that each image you use on a page creates a new HTTP request. While streamlining page speed, trimming 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.” They consolidate multiple images like icons into one, limiting the server’s number of individual image requests. It also improves your page speed. Upload your images to a free tool like SpritePad to create sprites and render the code for you.

    11. “Minify” your code

    Google Developers have created a process known as “minification.” This process helps you remove poorly coded HTML, CSS, and JavaScript on your web page, which can slow your site’s performance.

    There’s also a list of HTML, CSS, and JavaScript-specific resources to help. Find more details on 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

    Too many redirects and broken links can also impact site speed and your SEO rankings.

    For redirects...

    Do some house cleaning. For example, 302 redirects, which indicate a page has been moved temporarily, can hurt your SEO. They also 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 your Navigation panel.

    Never redirect URLs to pages that are themselves redirects. It sounds obvious, but it happens.

    For broken links...

    Broken links for page elements like images, CSS and JS files increase HTTP requests and sting your site speed. Use a tool like Broken Link Checker to remove them.

    Creating custom 404 error pages will assist visitors who accidentally enter an incorrect URL for your site.

    Improving ecommerce site performance takes time

    It’s important to get buy-in from your team to invest time and resources to optimize your site performance and speed. The data and tools we’ve shared can help you build a case. 

    Many of these optimizations are DIY. When it isn’t possible, you can enlist the help of a Shopify Plus Partner. They can guide you on how to speed up your Shopify site.

    If you need additional support, please share your questions in the comments below.

    Photo of Andrea Wahbe

    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.