A Shopify Plus publication

The Ultimate
Guide to
Site Speed
How site speed impacts conversion on your website.

Last modified
03/2021
The Ultimate Guide to Site Speed

Contents
Introduction 3

Executive summary 3

Site performance gets worse as you scale 4

The impact of speed on discovery 6

Performance issues related to discoverability 8
Code bloat issues 8
Third-party integration issues 9
Page weight issues 9
How to improve performance and discoverability 10
Case study: Emazing Group 12

The impact of speed on browsing 13

Performance issues related to browsing 14

Contents
Configuration issues 14
Architecture issues 14
How to improve performance and browsing 15
Case study: Rebecca Minkoff 16

The impact of speed on checkouts and conversions 18

Performance issues related to conversions 19
Infrastructure issues 19
Asset size and format issues 20
How to improve performance and conversions 20
Case study: Rhone 22

Conclusion 23

2 / 24
The Ultimate Guide to Site Speed

Introduction
Speed determines whether customers can find your brand, trust your store, and ultimately
buy from you. No matter what you prioritize in 2021—whether it’s sales growth, customer
retention, or scaling internationally—it all hinges on how your site performs.

Introduction
Executive summary
The deadline to speed up is here. Google will update its search rankings to prioritize page
experience signals in May 2021, penalizing brands with slower sites. The consequences of
poor-performing sites—like lower conversions and lost sales—will now include a drop in
organic search rankings.

But the more successful your brand is, the harder it is to improve or maintain site
performance. Unless you’re vigilant about site speed, small problems can easily go
unnoticed, accumulate over time, and result in bloated sites that bleed sales.

Let the data guide you: Link site performance to financial performance. Test the impact
a 1-second change in load time has on revenue.

The site speed killers we identify, as well as the fixes, are grouped in sections related to
the customer journey: discovery, browsing, and conversion. Though a particular site speed
problem can have an outsized impact on its category, the impact isn’t limited to that group.

3 / 24
The Ultimate Guide to Site Speed

Site performance gets

worse as you scale
The more success you have in ecommerce, the harder it is to maintain optimal site
performance. Code, apps, and scripts accumulate. Customizations, new features,
and infrastructure decisions that once worked now become roadblocks.

This is a problem that grows with

Site performance gets worse as you scale

complexity. As brands grow and become
more sophisticated, their websites
become richer. This richness usually
comes with a price; unless you are
actively paying attention to speed,
changes will slow down your site.

Javier Moreno
Data Science Manager, Shopify

4 / 24
The Ultimate Guide to Site Speed

You’ll likely outgrow your infrastructure as you scale. What worked with a hundred
staff members and a hundred thousand monthly site visitors falls apart when you
experience 10X growth. For example, brands hosting flash sales need a holistic platform,
including hosted storefront, checkout, and payment methods that scale on demand to
accommodate mega traffic spikes. Here we outline some of the performance killers—
and their fixes—on your journey to scale.

Each issue has a tangible impact on the customer journey, from discovery to browsing
to conversion.

Performance issues scale as you grow

Site performance gets worse as you scale

Configuration
Third-party
apps

Asset size
and format

Architecture

Page weight

Code bloat

Infrastructure

5 / 24
The Ultimate Guide to Site Speed

The impact of
speed on discovery
Eighty-two percent of websites analyzed are plagued by issues that significantly affect
performance, and 44% have critical issues. The deadline to fix these issues is approaching
quickly. Google announced they would begin scoring sites in May 2021 based on Core Web
Vitals like speed, among other factors, to rank and recommend sites.

Sluggish performance will negatively impact organic search rankings.

Calculated by Core Web Vitals, your score will be a number out of 100 and will measure a
variety of performance metrics to determine how fast your website feels to real visitors.
You can also use Google Lighthouse: Instead of using data from real users, it measures your
website in a simulated lab setting to get a sense of how your site performs and to track your
progress as you work to speed up. Here are the grading metrics:

"How a page loads"

The impact of speed on discovery

Navigation First contentful Visually Fully
begins paint ready loaded

Time to Navigation has Page looks End of load

first byte successfully nearly done lifecycle
started

First paint First meaningful Time to

paint interactive
The first
non-blank paint Page's primary Visually usable
on screen content is visibile and engagable

Sourced from Onely

6 / 24
The Ultimate Guide to Site Speed

According to an annual report card by Retail Systems Research, brands just outside the
uppermost tiers of the Internet Retailer 500 have improved mobile page load time scores
from 9.25 to 7 seconds, but it’s still a far cry from the 3-second mark that shoppers expect.
Your site will be measured in milliseconds, and relatively minor speed oversights can
significantly impact how high you rank.

Page loading time

The impact of speed on discovery

3-second load 7-second load

7 / 24
The Ultimate Guide to Site Speed

Performance issues related to discoverability

The code and third-party apps you add to your site weigh down your pages, slow load
time, and will soon result in search engine optimization (SEO) penalties. Even brands with
relatively sophisticated development teams can unknowingly harm site performance by
trying to improve the customer experience.

Code bloat issues

• Brands often prioritize images (both quality and quantity) to improve site speed, when
in fact there are higher impact ways to optimize while still creating room for high-
quality images and media. One large offender is with JavaScript issues, whose execution
accounts for 40% of the Lighthouse score. And as features pile up, so does the amount
of JavaScript on your page. JavaScript takes additional time to download, parse, and
then execute. The more JavaScript accumulates, the more your site slows downs.
• Poor-performing sites can also be using parser-blocking JavaScript (using <script>
instead using <script async> or <script defer>). These are often tags added by stack

The impact of speed on discovery

overflow snippets, poorly designed apps, or sites that depend on jQuery in inline
JavaScript parts of a theme.

How Shopify can help

Shopify automatically minifies SCSS.liquid, which reduces the CSS file sizes
for a faster download. We also offer whitespace control tags to help theme
developers remove bloat in the rendered HTML. Shopify makes it easy to
optimize for page titles, meta descriptions, SEO-friendly URLs, and a solid
internal linking structure to improve organic search rankings.

8 / 24
The Ultimate Guide to Site Speed

Third-party integration issues

• Third-party solutions can slow down your site with synchronous scripts, stylesheets,
or fonts loaded from third parties within your <head> tag. Parser-blocking scripts added
directly into the <head> often have an immediate impact on performance.
• Even integrations (e.g. apps) you’ve uninstalled can leave behind snippets of code that
bog down your site, making you less discoverable as a result.
• A/B testing tools like Google Optimize can cause pages to go blank between transitions
by using an anti-flicker snippet, which hides the initial page until the experiment
container is ready. In fact, Google Optimize can even slow down your site when you
aren’t running experiments at all.

Page weight issues

• Pages come in all shapes and sizes. As certain pages become heavier over time, they
can load at varying speeds in different geographic locations or on different devices,
negatively impacting international expansion efforts. You can see a list of oversized or

The impact of speed on discovery

unused files in your Lighthouse audit recommendations.
• Heavier pages load more slowly and might not immediately render what’s above the
fold, a page’s most valuable real estate.

9 / 24
The Ultimate Guide to Site Speed

How to improve performance and

discoverability

Keep your site lean and nimble

Use minification to shrink the code you need. Remove poorly coded HTML, CSS,
and JavaScript on your site to reduce the amount of data you send to users without
impacting functionality.

Conduct a forensic audit of your third-party integrations

Take a look at your existing integrations (e.g. apps) and quantify the value they add
to your business. Some apps power product recommendations and social image
feeds that unnecessarily request massive images. Compare the value with possible
performance reductions, and remove unnecessary or value-destroying integrations.

The impact of speed on discovery

Even after you’ve uninstalled an app, search your site for traces of leftover code and
manually remove it to be sure it won’t impact performance long after it’s gone.

To guide your app cleanup efforts, create speed benchmarks to confirm whether
the work you’re doing improves performance at all.

How Shopify can help

If you sell on Shopify and want to install an app to improve your site’s
functionality, the Shopify App Store surfaces apps with the lowest speed
impact at the top of the search results page.

We're also continuously improving our mechanism for removing

leftover code from uninstalled third-party apps so you don’t have
to go digging for it.

10 / 24
The Ultimate Guide to Site Speed

Seriously consider the trade-off

between features and performance.
Shopify provides some tools that allow
brands to detect performance damage,
and we plan to continue improving them
to support their app choices in the future.

Javier Moreno
Data Science Manager, Shopify

Prioritize loading above the fold

Instead of forcing users to download every image on your site, lazy loading only initially

The impact of speed on discovery

shows shoppers images at the top part of your site. Only after users begin scrolling
down will the page fetch the images for that section of the page. Lazy load your site with
JavaScript libraries like lazysizes, lazyload, and yall.js. If most of your visitors use Chrome,
lazy load selected images by adding the loading=“lazy” property to the <img> tag, though
be aware that your images won’t lazy load in other browsers.

Calculate the trade-off between speed and page weight

Record page weight as well as load time when benchmarking site performance. Use these
inputs to direct your optimization efforts. For example, say your average page weighs
15 MB and loads in 2 seconds. If you want to reduce load time by 0.7 seconds—and your
infrastructure is able to deliver on average 7.5 MB to the user—you need a page weight of
no more than 9.75 MB per page to meet your 1.3-second load goal.

11 / 24
The Ultimate Guide to Site Speed

Case study:
Emazing Group
The Emazing Group, the parent company of a trio of leading lifestyle brands, worked
with their internal tech team and outside agency partner to improve site performance.

Case study: Emazing Group

Specifically, The Emazing Group improved its lazy loading times to ensure the tops of its
pages loaded instantly. Besides laying a foundation for a better Lighthouse score, The
Emazing Group reports:

• Sites now load under 3 seconds, down from 4.5 seconds the previous year
• Conversions increased to 4.08% from 2.45% the previous year, with mobile
conversions up 4.13% from 2.45%

The biggest gain for us has

been controlling loading
priorities for different
elements on each page.
We would prioritize
anything above the fold
to give the illusion that
the site is very fast.

Bran Lim
CEO and Founder, The Emazing Group

12 / 24
The Ultimate Guide to Site Speed

The impact of
speed on browsing
Enriching the browsing experience is a necessity when you consider that just 10% of
shoppers visiting your site will add an item to their shopping cart. But the very tools,
information, and nudges that prompt shoppers to buy can significantly slow down your site:

• Bounce rates can go from 9% to 38% in the extra seconds it takes

a product page to load
• 57% of shoppers have left a slow-loading site and purchased from a competitor
• Poor browsing experiences cost large brands up to $100,000 an hour in lost sales

Nearly a quarter of all customer journeys begin on a product detail page (PDP), which
is notoriously image and text heavy. PDPs usually contain code or third-party apps that:

The impact of speed on browsing

• Use 3D product modeling or immersive augmented reality (AR) to bring
collections to life
• Embed social feeds to highlight user-generated content for engagement
and authenticity
• Showcase customer reviews to increase purchase decision confidence
• Nudge customers by instilling urgency with fear-of-missing-out promotions,
inventory counters, or countdown clocks

According to a study by Retail Systems Research in 2019, when asked to identify the two
online features that make shopping online most enjoyable, product ratings or reviews and
the ability to compare similar products topped the list.

Creating rich PDPs that are also fast often requires difficult trade-offs between performance
and functionality. Optimizing your PDP’s Largest Contentful Paint, or the shopper’s
perception that your PDP is useful, is vital to improving the browsing experience.

13 / 24
The Ultimate Guide to Site Speed

Performance issues related to browsing

Fast PDPs and landing pages are structured to balance speed with a feature-rich browsing
experience. High-growth brands that routinely run user experience experiments must
minimize the negative speed impact of third-party scripts and apps while architecting
product pages optimally.

Configuration issues
• Third-party synchronous scripts, stylesheets, or external fonts loaded within your
<head> tag can negatively impact the browsing experience. Scripts added directly
into the <head> often have an immediate impact on performance.
• Third-party scripts, domains, and resources—think Google Analytics, Tag Manager, or
Facebook—are not always immediately discovered by browsers. They can cause TCP
(transmission control protocol) and TLS (transport layer security) delays and compete

The impact ofspeed on browsing

for bandwidth. This particularly degrades mobile browsing experiences, which is
critical in a time when mobile shopping is growing: 67% of sales were made on mobile
devices versus 33% on desktop during Black Friday Cyber Monday in 2020.
• Unsupported external web fonts will not always render immediately, which can
cause load delays.

Architecture issues
• Reliance on an application layer running PHP or a server environment—and an SQL
database that must be referenced—to compute data and return results before a site
or page can render
• Faulty mobile design or architecture—one with too much data powered by a
server with limited memory—that might not render completely or quickly if making
excessive HTTP requests, especially on older devices connected to cellular networks
• Infrastructure concentration that creates distance between distribution buckets
and end users
• Unreliable and unpredictable third-party integrations that add friction to the
customer journey, which increases bounce rate

14 / 24
The Ultimate Guide to Site Speed

How to improve performance and browsing

Shave hundreds of milliseconds with preconnects

Preconnect to key third-party domains to help browsers download faster. Google

engineers recommend rel=preload as a hint resource that allows early fetches of critical
resources before the browser would otherwise discover them. A domain name system
(DNS) prefetch rule will instruct the browser to look up and cache the DNS information for
an external domain and potentially shave hundreds of milliseconds from load times.

Guarantee blazing-fast product page loads with web fonts

The impact ofspeed on browsing

Ensure well-crafted product descriptions on high-converting product pages render
fast by swapping external fonts that load immediately. Add a font-display:
swap property in your @font-face declaration, or, if you’re using Google Fonts,
a & display=swap URL parameter (e.g. <link href="https://fonts.googleapis.com/
css?family=Roboto&display=swap" rel=“stylesheet”>).

Conduct an audit of your third-party integrations

Take a look at your existing third-party integrations (e.g. apps) and try to remove as much
“jankiness” as possible from the browsing experience. Jankiness is something that Google
is trying to capture with Cumulative Layout Shift in Core Web Vitals. Consider the possible
performance reductions of any integrations, and remove the ones that don’t add value.

15 / 24
The Ultimate Guide to Site Speed

Case study:
Rebecca Minkoff
Rebecca Minkoff is a couture high-fashion brand that has leaned into retail technology
like smart mirrors, self-checkout, and radio-frequency identification chips in handbags.
The company has adopted 3D modeling and AR on its product pages, connecting shoppers
to its catalog in newer and more effective ways than ever before. Shopify lazy loads 3D
models to minimize the image’s impact on performance. Since implementing 3D and AR,
Rebecca Minkoff has seen:

• Shoppers are 44% more likely to add an item to their cart after interacting with it in 3D
• Customers are 27% more likely to place an order after interacting with a product in 3D
• Visitors are 65% more likely to place an order after interacting with a product in AR

Case study: Rebecca Minkoff

How Shopify can help
Extra features come out of the box: On PDP's, 3D product modeling and
AR capabilities let shoppers see how your products look inside their home.
But even with feature-rich sites, Shopify-powered brands load
2.97 times faster than other SaaS platforms.

16 / 24
The Ultimate Guide to Site Speed

3D media makes for a much more

interactive shopping experience.
Customers can examine our
products from every angle,
including the option to view
products in augmented reality,
which helps them get a better
sense of quality, size, and other
details that matter.

Case study: Rebecca Minkoff

Uri Minkoff
Co-founder and CEO, Rebecca Minkoff

17 / 24
The Ultimate Guide to Site Speed

The impact of
speed on checkouts
and conversions
Slower sites negatively impact conversions. The widely cited statistic—a 1-second delay in
page load time results in a 7% decline in conversions—understates the true impact since the
pandemic’s acceleration of ecommerce by 10 years. A 1-second speed improvement could
mean up to a 27% increase in conversions. Even the smallest improvement—we’re talking
milliseconds—can generate millions of dollars in additional sales.

Research suggests that improving mobile site speed by just 0.1 second can lift conversions

The impact of speed on checkouts and conversions

by 8% and spending by 10%.

Consumer surveys reveal customer expectations are high:

• 79% of customers who are dissatisfied with a site are less likely to return
• 64% of smartphone users expect a website to load in 4 seconds or less
• 47% of online shoppers expect web pages to load in 2 seconds or less

18 / 24
The Ultimate Guide to Site Speed

Performance issues related to conversions

It’s not uncommon to outgrow the foundation on which you build your business. Likewise,
brands often lack the technical expertise necessary to optimize infrastructure and marketing
assets as they scale.

Infrastructure issues
• Self-hosted ecommerce sites that lack bandwidth are prone to crashes during
high-traffic times like holiday promotions and flash sales, or periods of rapid growth.

How Shopify can help

As the premier flash sale platform, Shopify was built to perform under

The impact ofspeed on checkoutsand conversions

pressure, with top brands routinely executing record-breaking flash sales
that generate tens of millions of dollars, hundreds of thousands of orders,
and millions of unique visitors. When high-volume events occur, Shopify’s
infrastructure is designed to meet traffic demands by employing scale
and traffic-control mechanisms developed through years of experience
hosting flash sales.

• Inexpensive DNS hosting is often “free” with your registrar fee, but can lack the high
availability and low latency necessary to scale and expand internationally.
• A single content delivery network (CDN) that is hosted in one geographic region can
bog down your site for visitors in other regions or markets.
• Inflexible checkouts don’t benefit from cache loading, so it can take up to 20
seconds for a simple page to load, execute, and render hundreds of JavaScript and
API requests, resulting in a slow checkout.

How Shopify can help

With Shopify, a better browsing experience combined with an accelerated

checkout allows customers to speed through the browsing process to the
checkout securely. Shop Pay is four times faster than other ecommerce
checkouts and can increase conversions by 18%.

19 / 24
The Ultimate Guide to Site Speed

Asset size and format issues

Conventional wisdom says high-resolution (hi-res) images are better—and they are,
in the right context. What’s problematic on a site or app is using a large image when
a smaller one would do.

Format matters, too. Images in the wrong format (PNG versus JPEG) can weigh down
a site. Images should account for 50–75% of the page weight. As a general rule, your
photographs should be saved as JPEG and your graphics (and screenshots) as PNG.

How to improve performance

and conversions

The impact ofspeed on checkoutsand conversions

Speed up with a trusted global infrastructure

Build your business on a CDN that automatically scales with you, with data centers
around the world. Be sure the CDN you select has servers in the regions you plan
to target in the future.

How Shopify can help

Our global CDN scales with you, providing optimal performance by ensuring
your brand’s content is always delivered from a server closest to the user.

20 / 24
The Ultimate Guide to Site Speed

Optimize your marketing assets

Compress images to improve your load time and site speed score, and consider using
the srcset attribute on image HTML tags. This identifies a user’s device and switches
between different versions of the same image based on their browser. Identify what
percentage of your traffic is from high-DPI devices or retinal displays to determine
whether hi-res images are necessary. If you choose to reduce your image size by
using the WebP format, with a graceful fallback to a JPEG of the same size, note that
this will reduce the quality as well. There are ways you can optimize your site to create
room for high-quality images and media, considered a key part of ecommerce sites.

Replace GIF animations with video, and use the proper HTML5 semantic structure
for embedded videos.

The impact ofspeed on checkoutsand conversions

How Shopify can help

Shopify automatically optimizes image size and delivery based on a user’s

device by embedding the srcset attribute in your brand’s theme.

21 / 24
The Ultimate Guide to Site Speed

Case study: Rhone

Rhone, a high-performance activewear brand, listens closely to customers to improve
product development. To move faster, Rhone’s store was served with Shopify Storefront
Renderer, a server-side app that Shopify built to serve traffic requests and provide faster
page response times for customers. As a result, they saw dramatic month-over-month
improvements in site performance and conversions.

Besides a 37.9% decrease in server response time and a 3% reduction in bounce rate,
Rhone reports:

Case study: Rhone

• A 15% increase in revenue
• A 17% increase in conversion rate
• A 12% decrease in average page load

We kill ourselves trying to

fix things if we get negative
feedback. Our customers
are our lifeblood. If we can’t
provide value above and
beyond a great product, we
don’t deserve your business.

Nate Checketts
Co-founder and CEO, Rhone

22 / 24
The Ultimate Guide to Site Speed

Conclusion
Improving site performance requires difficult trade-offs. Design sacrifices that improve
speed can take away from the user experience. The reverse is true as well. What you can
do must be balanced with what you should do.

Let the data guide you:

Link site performance to financial performance.
Test the impact a 1-second change in load time has on revenue.

The path to a fast website is a long game. Actionable steps you can take to get there
include conducting an audit annually and tracking performance monthly. Shopify brands
can access their store speed report anytime to see their site speed score, how the score
has changed over time, and how it compares to other Shopify stores. The Shopify speed

Conclusion
score is just one of many other tools shared in this guide.

It’s worth noting that the Shopify score can look lower than the Google score because
it’s based on the Lighthouse scores from three types of pages: home, collection, and
product. Collection and product pages are weighted more heavily in the final score than
the home page, based on the proportions of page views to those types of pages.

We also only show the mobile score, which tends to be lower than the desktop score,
to encourage our merchants to build with mobile shoppers in mind.

23 / 24
The Ultimate Guide to Site Speed

Ready to speed up
your website and
boost sales?
Talk to one of our site speed experts today.

Let's talk

24 / 24