15 Ways to Improve Ecommerce Site Performance for Faster Page Speed and Better Sales

15 Ways to Improve Ecommerce Site Performance for Faster Page Speed and Better Sales

Due respect to Aesop, but slow and steady does not win the race. Nor is patience a virtue.

At least not when it comes to ecommerce page speed and site performance.

In 1999, when people were still converting from dial-up to high-speed internet, consumers said that they would be willing to wait up to 8 seconds for a page to load. In 2010, that number, as reported by Radware, accelerated to 3.

On average in 2017, global retail websites — for consumers doing online shopping between Black Friday and January 3rd — were visually complete and ready to use within 2.5 seconds.

But remember … 2.5 seconds is only the benchmark.

According to Harry Shum, head of AI and former speed-specialist researcher at Microsoft, gaining a competitive advantage comes down to less than the blink of an eye:

“Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web.”

Harry Shum, Head of AI at Microsoft

Just like how to be successful in business at large, the biggest wins in ecommerce often come from the smallest, most seemingly insignificant factors. And while it might sound like splitting hairs, 250 milliseconds add up when you’re operating at scale.

The stakes are high, and that’s why we’ve put together a near-exhaustive resource to guide you. After answering the question — How Does Page Speed Affect Ecommerce? — we’ll dive into 15 ways you can improve your ecommerce site performance and page speeds:

  1. Start by Testing Your Mobile Performance
  2. Then, Test Desktop Page Speed
  3. Get a Cumulative Grade
  4. Score Your Site on Remaining Optimizations
  5. Use Fast and Reliable Hosting
  6. Compress and Reduce Images
  7. Minify Your Code Universally
  8. Organize Your Tracking with Google Tag Manager
  9. Reduce Redirects and Remove Broken Links
  10. Leverage a Content Delivery Network (CDN)
  11. Decrease Thumbnail Image Size
  12. Ease Up on Homepage Hero Slides
  13. Use Pop-up Quick View Windows Sparingly
  14. Beware of Excessive Liquid Loops
  15. Weigh the Benefits of Installing Another App
But, first …

    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 found a host of troubling results: 

    The effects of site performance and page speed in ecommerce

    Slow Speeds Kill Your Mobile Commerce Mojo

    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 that …

    Effects of page load time

    Image via Think With Google

    In addition to driving visitors away, a poor mobile experience can impact your customers’ perception of and loyalty to your brand. In fact, in the new experience economy, first impressions matter.

    74% of people are more likely to return to a site when it is optimized for mobile

    Image via WebPageFX
    Shopify Flow

    Meant for mobile from the ground up

    Shopify Plus customers have the freedom to create mobile ecommerce websites that are optimized for mobile-first selling (not to be confused with mobile responsive or mobile friendly).

    In addition, we also scale on demand to …

    • Process up to 10,149 orders per minute
    • Maintain 99.98% uptime
    • Offer unlimited bandwidth and transactions

    Get started today

    Google Penalizes Poor User Experiences

    Your page speed 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 costs-per-click.

    With the second, what SEO experts have long suspected regarding organic ranking, Google just 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.”

    If you’ve been implementing other best practices to optimize for search and are still having a difficult time getting certain pages to climb the rankings, or are trying to drive down your advertising costs, you’ll need to factor in page speed as part of your strategy.

    Where should you start?

    Analytics Help You Identify the Need for Site Speed

    Sharon Hurley Hall does a great job outlining your options for diagnosis speed problems using Google Analytics on The Daily Egg.

    If you have a Google Analytics account, look for a tab called ‘Behavior,’ then select ‘Site Speed.’ Finally, 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.

    Site speed analytics via Google Analytics

    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:

    Measursing site speed through Google Analytics

    Sharon suggests to also check out the ‘Speed Suggestions’ section of Google analytics to learn how to increase your page load speed.

    If a page receives a score of less than 80, there are likely some issues that you need to resolve. You’ll need to test your page speed to fix the problems.

    So, what can you do to maximize site speed?

    How to Improve Ecommerce Site Performance & Page Speed

    1. Start by Testing Your Mobile Performance

    PageSpeed Insights is a web-based tool that can be accessed via Google Labs. It will give you personalized suggestions on how to improve your 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.

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

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

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

    5. Use Fast and Reliable Hosting

    Web hosting services play a crucial role in your overall site performance.

    This is especially important during high-traffic and high-transaction days. The list of name-brand retailers that crash during Black Friday — like Best Buy, Lowes, Macy’s, and more — continues to grow every year.

    Some factors to consider when researching server requirements are memory limits, projected traffic, and peak user load.

    At the risk of sounding self-serving, Shopify Plus not only maintains 99.98% overall uptime as well as checkouts up to 40% faster than other SaaS platforms, we also processed $1.1 million sales per minute at Black Friday, Cyber Monday’s peak.

    For a full examination of BFCM, check out our Holiday Online Shopping Infographic: Data & Insights from Black Friday, Cyber Monday for This Year and Beyond

    As Greg Merrell, the co-founder of simplistic — a Shopify Plus Solutions Partners that specializes in high-volume, high-traffic flash sales — explains:

    “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.”

    6. 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 existing images …

    Due to the size and scope of their sites, many Shopify Plus merchants use either Crush.pics or Image Optimizer. Both tools have an over four-star rating on the Shopify App Store and offer lossless compressions of all your existing assets.

    For new images …

    A great tool to reduce file sizes without losing quality is ImageOptim. It was created by developers for developers. But, as a free application that is easy to use, anybody can put ImageOptim to work. 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 logos and 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.

    7. 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 itself will manage most minification tasks automatically. As we move into steps 11-15, that will be one of the areas we’ll call attention to.

    8. Organize Your Tracking with Google Tag Manager

    Optimizing ecommerce demands collecting a host of data. Unfortunately, all those JavaScript tracking tags — for general analytics, conversions and goals, behavioral retargeting, etc. — can eventually slow down site performance. In addition, 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.”

    One snippet of code enables you to manage all of your tags in one place and, for Shopify, Measure School provides a free, hands-on tutorial:

    9. 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 a new URLs, they should be used sparingly. 302 redirects, which indicates 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/410 error page to assist visitors who accidentally enter an incorrect URL for your site.

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

    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.

    Image via Fastly (Shopify’s CDN provider)

    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 Merchant Success Manager Jonathan Sinclair.

    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. 

    For instance, solutions like minification are handled, in part, automatically in the Shopify Plus core system. Others, like the fixed robot.txt files, are not open to edit and control by the user.

    Let’s take a closer look at some of the most common page speed issues on Shopify stores:

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

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

    13. Use Pop-up Quick View Windows Sparingly

    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.

    This is an enormous amount of data to be loaded, especially on a collection page where there might be 20 or 30 product thumbnails. If there is no 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 the product information as data attributes on the pop-up container, and then actually populate the information inside once the pop-up is triggered

    Either is slightly less ideal than removing Quick View, as the product info still has to be loaded for each product, but they are better than having to download all the product images and links.

    14. 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 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, 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. So again, just be aware of how they’re being used and how they affect load times.

    Detection

    Start by conducting a fresh load (caches cleared) of a page and see if it remains blank for a noticeable period of time.

    This result often affects collection pages or homepages if you have a high number of product thumbnails. It means that Shopify is churning through all of these loops and liquid objects in the back-end trying to output the compiled HTML document that the browser needs.

    If you notice this slow TTFB speed, and there is some custom tag filtering, mega menu present, or color swatches being used.

    Ask yourself, what is more important: the functionality, or the speed?

    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:

    • 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 a dated documentation on outputting color swatches. A better solution is to use a simple `product.options_with_values` loop.

    15. Weigh the Benefits of Installing Another App

    The majority of script/CSS files for apps downloaded via the Shopify Plus Admin are injected into the <head> of the theme via the {{ content_for_header }} liquid drop (in the theme.liquid file of your theme).

    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.

    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.

    Sometimes it can be tricky to pin down which app is causing the issue. The Plus Merchant Success team strongly suggests that you enlist a developer’s help to find and remove the non-vital and offending app.

    Final Thoughts

    When it comes to optimizing your mobile and desktop pages for 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 improving your 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, or contact your Merchant Success Manager.

    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.