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.
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:
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.”
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:
- Use fast and reliable hosting
- Use a content delivery network (CDN)
- Organize your tracking with Google Tag Manager
- Prioritize testing and optimizing your mobile performance
- Use pop-up quick view windows sparingly
- Beware of excessive liquid loops
- Decrease thumbnail image size
- Ease up on homepage hero slides
- Weigh the benefits of installing another app
- Compress and reduce images
- Minify your code universally
- Reduce redirects and remove broken links
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:
- Memory or bandwidth limits for scaling during flash sales and seasonal promotions
- Projected traffic and peak user load to avoid crashes from a sudden spike in visitors
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.
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.
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.
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:
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.
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.
Also, Google’s Test My Site tool will help you calculate how site speed can boost your mobile conversion rates:
(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.
(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.
(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.
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.
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
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
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.
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.
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.
