← Back to Blog

Stop Losing Visitors: How to Speed Up Your Website (for E-Commerce)

  • Conversion Rate Optimization

Shoppers are getting more impatient by the year.

In the 1990s, users were willing to wait up to eight seconds for a page to load. By 2010, 57% of respondents said they would leave a site after waiting only three seconds.

Internet Users

Today, your e-commerce store needs to load in under three seconds, otherwise, research shows that 40% of your traffic will leave without ever looking at a single product.

How Website Performance Affects Shopping Performance

Loading time doesn’t just matter to humans, it’s also important for search engines.

Page load time is a major ranking factor in 2017. In fact, Google recently announced they expect a page to load within 2 seconds.

This post covers 4 easy ways to improve the loading time of your site today. These strategies will help you:

  • Figure out what your loading time is right now and how to improve it.
  • Make more sales by keeping customers on your site longer.
  • Understand what e-commerce customers expect from the stores they visit online and how to make sure you’re hitting the mark.

Let’s dive in.

START A 7-DAY FREE SLEEKNOTE TRIAL

Want a Mobile-Friendly Popup on Your Website?

Sleeknote has everything you need to engage your visitors, collect more leads and grow your revenue. Try Sleeknote today with our 7-day free trial. (No credit card required.)

Shoppers Expect Your Site to Load in Under 3 Seconds

Your customers give you an extra second compared to Google, but you’re not out of the woods yet.

For every 1 millisecond delay (just 0.1 seconds!), you could be reducing your conversions by up to 7%.

E-commerce shoppers also expect your site to work seamlessly on any device, whether they’re shopping from an ancient iPhone 4s or the latest Samsung Galaxy.

A study by Google found that 61% of consumers leave a website for good and find another retailer if they can’t find the product information they need on mobile.

Mobile-Friendly Sites Means More Customers and Longer Visits

Why You Should Use AMP (Accelerated Mobile Pages)

The Accelerated Mobile Pages Project is an open-source venture launched in October 2015 with the mission of speeding up the Internet on all mobile devices.

In February 2016, Google added support for AMP into its mobile search result pages.

An AMP page is a mobile-optimized version of a page on your website that is different from the version users see on a desktop computer. AMP pages use limited HTML and Javascript to keep the page light and quick.

Further, an AMP page lets you define unique content for mobile versus desktop. This is a huge opportunity to create a truly mobile-first experience.

They also load really fast! Remember how most people will leave your site if it doesn’t load in three seconds? AMP pages load in an average of 0.5 seconds.

Mobile-first has huge benefits for e-commerce retailers. For one, Google loves fast-loading content and is prioritizing mobile page speed as an SEO ranking factor.

That means retailers using speedy AMP pages have a better chance of ranking higher in search results.

Secondly, being able to customize mobile content can dramatically increase your conversions.

In a 20-day experiment with switching to AMP, a shoe retailer received 32% more traffic and a 9.4% increase in customer actions. Actions included visiting the website or getting directions to their nearest local store.

Here’s how to get started with AMP pages for your store.

1. Know Your Page Load Time

If your website pages are loading between 2-3 seconds, you don’t need to switch to using AMP.

You may still receive a bit of an SEO ranking boost. But the impact will likely be minimal because your loading time is already within Google’s expected parameters.

To see how many seconds it takes your store to load, use Pingdom’s free testing tool.

Enter the URL of a page you want to check, like your homepage or a specific product page, and click, “Start Test.”

Pingdom Website Speed Test

As you can see, speed is not the only factor Pingdom’s tool is testing. Our site loaded in 4.08 seconds, but still received a performance grade of “C.”

Pingdom Performance Grade

Pingdom lists out several areas your site could improve in.

Pingdom Performance Insights

However, Google’s free PageSpeed Insights analyzer does a better job of explaining the critical issues to fix, and how to do it.

Your PageSpeed score is out of 100. Instead of telling you how many seconds it takes to load your page like Pingdom does, it tells you what errors are slowing down your site.

Click on, “Run Insights,” to get started.

PageSpeed Tools

Enter a URL then click, “Analyze.”

PageSpeed Insights

If your page has any loading time issues, the tool tells you what they are and how to fix them.

Possible Optimization for Mobile

Once you’ve fixed some issues, go back to Pingdom and see if your loading time has dropped to 3 seconds or less.

If you’d still like to install AMP on your e-commerce site, read on.

2. How to Install AMP on WordPress

There are a few AMP plugins for WordPress to make installation easy.

The official AMP plugin is Automattic’s version (the parent company of WordPress). There are also some unofficial ones, like AMPforWP, WP AMP, and Better AMP.

AMPforWP Plugin(1)

Source: WordPress

Choose a plugin and install it. I’ve chosen AMP for WP for this post.

Once you’ve activated the plugin, you’ll see a new AMP section in your WordPress admin sidebar.

Welcome to AMP

When you first install the plugin, you can choose between an Installation Wizard or you can configure your own options.

AMPforWP Plugin

Using the Installation Wizard is quick and easy. Unless you’re a developer who wants to control certain advanced settings, I recommend using the wizard.

Once you’ve completed the Installation Wizard, you can add “/amp” after any page URL to preview the AMP version of that page.

For example, http://sleeknote.com/blog would be http://sleeknote.com/blog/amp

Sleeknote on AMPforWP

3. How to Install AMP on Shopify

Like WordPress, Shopify also has several add-ons to make adding support for AMP a breeze.

Log in to your account and go to the App Store by clicking on “Apps” on the left sidebar.

Shopify Dashboard

Type “AMP” into the search bar.

Search for AMP

Two well-known Shopify AMP add-ons are FireAMP (free) and RocketAmp ($14/month).

Search Results for AMP

To install an add-on, click on it and then click on the green “Get,” button on the right.

I’m choosing FireAMP for this demonstration.

FireAMP Overview

Click on, “Install App,” to confirm the installation.

How to Install FireAMP

To complete the installation, click on, “Generate AMP Pages.”

Generate AMP Pages

That’s it! However, AMP pages on Shopify have a different URL structure than on WordPress.

If a current product URL is http://store.myshopify.com/productname, then your AMP page will be http://store.myshopify.com/apps/fireamp/store/productname.

4. How to Verify Your AMP Pages

Once you’ve installed an AMP plugin or manually added support for AMP pages, head over to the AMP Project’s official validator to make sure they’re working correctly.

Enter the URL of one of your AMP pages and click, “Validate.”

Validate AMP Status

How to Make Your Customers Think Your Page Load Time Is Faster Than It Is

Sometimes it’s not about how long your site actually takes to load, but rather how long a customer perceives it taking.

In 2014, European train company Eurostar spent billions to reduce the travel time on its most popular route (London to Paris) by fifteen minutes.

Turns out, their customers didn’t care about the time savings that much.

A better use of that money would have been to improve their users’ experience instead, maybe with free Wi-Fi or USB chargers in every seat.

When it comes to websites, you want to reduce the loading time as much as possible, but don’t forget about user experience.

Here are three key ways you can get potential customers to stick around longer on your site without irritating them.

1. Distract Them With a Special Offer

You know why magic tricks work so well? Because they focus your attention elsewhere while the magician works behind the scenes to make the big reveal happen.

The same logic applies to your website.

Use sleight of hand to distract your customers with a special message while the rest of the page finishes loading.

This gives your customer something to look at, reducing perceived loading time, and it also grows your email list.

Danish grocery retailer Irma uses this strategy.

They use an unobtrusive, slide-in sleeknote in a bright orange color to pull their customers’ attention to the corner.

Sleeknote on Irma_s Homepage

Source: Sleeknote

In the extra second—or two—it takes your customer to read the promotional message, the rest of the page finishes loading.

Make sure you’re not covering the user’s entire screen on mobile with a promotion, though.

As of January 2017, Google started penalizing the search rankings of websites that have a large portion of a mobile screen covered with a popup.

If you use Sleeknote, you can still distract customers with a special offer on mobile, using our small, Google-friendly popups.

Sleeknote_s Google-Friendly Popup

Source: Sleeknote

Instead of blocking the content like the example on the right, our new smaller mobile sleeknotes only take up approximately 1/6th of the screen. This is well within Google’s new guideline.

2. Compress Your Images or Use a CDN

Images are a huge factor when it comes to your site’s loading time.

Most e-commerce platforms have a built-in Content Delivery Network (CDN) to help your site load faster. Shopify was the first e-commerce platform to provide this in 2008.

CDNs cache your website’s files on their servers around the world, then display the content to the user from the nearest possible server location.

This means your website speed is optimized for users worldwide with no extra work on your part.

Cloudflare is one of the most well-known CDNs. You can use it with any website platform.

This graphic from Cloudflare does a good job of illustrating how using a CDN speeds up loading times for users:

Cloudflare Average Speed of Request

Source: Cloudflare

Whether you use a CDN or not, you should always compress your images before uploading them to your website.

Compressing an image is really two separate actions:

  1. Adjusting the size to be only what you need (e.g. if the image’s container is 500px wide, then size your image to be 500px wide).
  2. Running compression software on the image to reduce its file size.

There are many ways to do this depending on how you create your images.

In Adobe products, you want to save your images by going to “File > Export > Save for Web.”

For other applications, you can use web services like Optimizilla or Compressor.io.

ImageOptim is a nice lightweight client for Mac users that installs directly on your computer.

ImageOptim

Source: ImageOptim

Using an application like ImageOptim can reduce an image’s file size by about 40%.

If you use WordPress, there are plugins that automatically compress every image you upload.

ShortPixel is a good choice for this. EWWW Image Optimizer is another well-known WordPress plugin.

3. Show Users Where They’re at in a Process

A study from the University of Nebraska-Lincoln found that users were willing to wait about 2 seconds for a page to load, before wondering if something had gone wrong.

When they were given a visual indication of loading progress, they were willing to wait three times longer, up to six seconds total.

By keeping the user informed of their progress, it reduces boredom and manages anxiety.

The study also references keeping users informed as being one of the famous 10 Heuristics for User Interface Design developed by Jakob Nielsen in 1994.

For e-commerce retailers, there are a few different types of progress indicators you should be using on your site.

i. Checkout Process Indicator

Your customer should be able to tell, at a glance, how many steps there are to the checkout process and where they are at all times.

In a study by UPS of people who abandoned their carts, 21% said it was because the website loaded too slowly. Another 20% said it was because the checkout process was too long or confusing.

Abandonment of Cart

Source: Econsultancy

Amazon’s checkout progress graphic is simple and effective. If you’re logged in, you skip all the way from “welcome” to the confirmation page, where it takes just one more click to complete your order.

Amazon_s Review Order Feature

Luxury beauty retailer Sephora has a nicely designed checkout, where all steps are displayed on the same page. Users can also toggle a button to view their cart contents, instead of having to go back a page to see it.

Sephora_s Checkout

ii. Loading Time Indicator

These can be used on any type of site, but it’s especially important for e-commerce sites.

Nick Babich from UX Planet suggests using a progress indicator for anything that takes longer than a second to load on mobile.

It’s interesting to note that 70% of desktop users abandon their carts, and 78% of mobile users do.

The takeaway?

Optimizing your mobile checkout with progress indicators is an effective way to bridge that gap.

A common example of this is a circle that rotates and turns into a checkmark before displaying a confirmation message, like this:

Progress Indicator

Source: SAP

Using an indicator like this also prevents the user from clicking the order button repeatedly, and potentially ending up with duplicate charges, if they think it’s not working properly.

Free Downloadable Bonus

Want More Conversion Rate Optimization Strategies?

Get access to our free CRO toolkit and skyrocket your organic traffic, on-page conversion rate and more (includes resources not found in the blog post).

START A 7-DAY FREE SLEEKNOTE TRIAL

Want a Mobile-Friendly Popup on Your Website?

Sleeknote has everything you need to engage your visitors, collect more leads and grow your revenue. Try Sleeknote today with our 7-day free trial. (No credit card required.)

Don’t Get Left Behind

Devices are getting faster every year, which is good news for retailers as your website will load faster.

However, it also means consumers expect higher and higher performance from your website every year. If you’re not keeping up, you will get passed over for the competition.

Page load time is more important than ever for SEO, rating in the top 8 overall ranking factors.

As a store owner, you know you need to stay on top of ever-changing Google algorithm updates to maximize your SEO rankings. But more importantly, work on improving your loading time to make your customers happy, not just machines.

There’s someone on the other side of that screen, and they want to buy from you right now.

Reducing your store’s loading time makes it more likely they’ll complete a purchase instead of clicking away in frustration.

How do you improve your site’s loading time? Leave a comment below.

 

Like what you read? Leave a comment