12 Ways to Improve Ecommerce Site

Performance & Speed for 2X Conversions

1. Use Fast and Reliable Hosting

2. Leverage a Content Delivery Network (CDN)

3. Organize Your Tracking with Google Tag Manager

4. Prioritize Testing & 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

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

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

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:

• Hindsight

• Sumo

• Hotjar

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, or contact the Shopify Plus Merchant Success Team.

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 resourcesto 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, or contact your Merchant Success
Manager.