Due respect to Aesop, but slow and steady does not win the race, and patience is not a virtue.
At least not when it comes to ecommerce page speed and site performance.
In fact, quite the opposite.
Page speed and load time are essential to converting visitors to buyers … and the further we move into the age of the Internet, the more these speed spoils go to the victor.
In 1999, when people were still converting from dial-up to high-speed internet connections, page speed wasn't a huge factor. Consumers said that they would be willing to wait up to 8 seconds for a page to load. In 2010, that number, as reported by Radware, accelerated to 3 seconds.
Late last year, Skilled crunched the number on 12 case studies related to page speed and found a host of troubling results:
To up the ante, according to Google, page speed should be around 400 milliseconds — literally the blink of an eye. And, as if that bar isn’t high enough, Harry Shum — head of AI and former speed specialist researcher at Microsoft — suggests gaining a competitive advantage is even faster:
“Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web."
Harry Shum, Head of AI at Microsoft
Just like how to be successful in business, the biggest wins often come from small, seemingly insignificant factors. And while it might sound like splitting hares, 400-250 milliseconds add up when you’re operating at scale.
If you are having a hard time trying to convince your boss or dev team to invest in optimizing your website for a faster user experience, we want to make your life easier. We’ve gathered some useful data, tools, and resources to help you plead your case and make your page speeds hop.
How Page Speed Affects Ecommerce Site Performance
Slow Speeds Kill Your Mobile Ecommerce Mojo
According to data from by Akamai and Gomez.com, “79% of online shoppers said they would not return to a website to make another purchase” because of poor performance during their last visit. Likewise, “44% said they would tell a friend” about their bad online experience.
So, “if your [ecommerce] site is making $100,000 per day, you could lose up to $2.5 million in sales every year for just a 1-second page delay.”
And the impact can be just as bad for mobile website users. You've probably felt first-hand how waiting for a slow loading website can feel like an eternity when you’re trying to multi-task and/or accomplish something online while in line at a coffee shop or waiting for the bus.
It’s especially annoying because smartphones are supposed to make our lives easier by giving us quick access to the world’s information in the palm of our hands.
And 58% of mobile users say they expect their mobile website to load almost as fast to even faster than the experience they get on their desktop browser.
As the chart above illustrates, “60% of mobile users say that they have encountered at least one problem while browsing online in the past year” — the issues they faced range from websites loading too slow, crashing or not being available to be viewed at all.
It’s also necessary to note that a poor mobile website experience can impact your customers’ perception of and loyalty to your brand. So, it’s very important to look at load speed issues specifically for mobile – especially now that mobile usage exceeds desktop usage (and is still growing at a faster rate overall).
Shopify Plus customers have the freedom to create mobile-first websites which are distinct mobile experiences (not to be confused with mobile responsive, which simply scales a site down) that are optimized to perform well over data connections.
We’ll get into some overall tips and tricks that your dev team can use to improve your page speed in ecommerce. But first, let’s talk about something a little more tangible you can bring to the boss if you’ve already been fighting a losing battle trying to get your site speeds improved.
Google Penalizes Poor User Experiences
Your page speed impacts a new visitor’s ability to find your ecommerce website through search engines and PPC channels.
See, Google evaluates your website landing pages to determine your website’s Quality Score and Ad Rank. So, if your landing page experience is sub-par for online users, you get a lower Quality Score from Google, your ads will likely rank lower in paid search results, and you’ll have a harder time climbing rank for organic search terms.
Or, you’ll just have to bid super high to compete with better quality ads and landing pages. That’s because your Quality Score is tied to the cost-per-click (CPC) that you will have to pay for your ads to display beside Google search results. So, a faster loading speed can also indirectly help to drive down your advertising costs.
Google even went on record back in 2010 saying site speed was used as a ranking factor, saying:
“[F]aster sites don't just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that's why we've decided to take site speed into account in our search rankings”
So, if you’ve been implementing other SEO and paid search best practices and are still having a difficult time getting certain pages to climb the search rankings, or are trying to drive down your advertising costs, you might want to factor in page load speed as part of a great landing-page user experience.
Some Analytics Tools To Help You Emphasize the Need for Site Speed
Another tool you can use to make make the argument to your boss or dev team, is your web analytics data.
Sharon Hurley Hall does a great job outlining your options for Google Analytics on The Daily Egg. I’ve also added the highlights from her post below as well.
If you have a Google Analytics account, look for a tab called ‘Behavior,’ then select ‘Site Speed.’ Finally, click on ‘Overview.’
This page will give you some important stats that you’ll need to monitor including your average user’s download time, domain lookup time, and average server response time.
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.
Sharon suggests to also check out the ‘Speed Suggestions’ section of Google analytics to learn how to increase your page load speed.
She says that if a page receives a score of less than 80, there are likely some issues that you need to resolve. What’s really handy is that Google Analytics tells you how to fix those page-specific problems.
Now, onto the steps …
Improve Ecommerce Site Performance and Page Speed with 10 Steps
1. Start by Testing Your Mobile Performance
PageSpeed Insights is a web-based tool that can be accessed via Google Labs. You can use this test to identify any problem areas on your website. The tool will give you suggestions on how to improve speed performance on mobile and desktop separately.
Given the dominance of mobile, start there.
The added bonus is that if you go to PageSpeed Insights and enter the URL for any competitive retailer. Knowing what’s wrong with your competitors’ sites could help you avoid making the same mistakes with your own ecommerce website.
2. Then, Test Desktop Page Speed
PageSpeed Insights will also give you a Desktop report, with similar — although not identical — suggestions. Again, be sure to compare your own site performance with those of your top competitors. Remember, 0.25 seconds is all that constitutes a competitive advantage.
3. Get a Cumulative Grade
GTMetrix gives your website a grade from A to F in terms of speed by merging data from Yslow and PageSpeed Insights. It also offers a performance report which helps you to analyze key issues to that require optimizations.
4. Score Your Site Performance on Remaining Optimizations
After you have addressed the major issues from PageSpeed Insights and GTMatrix, Pingdom.com should be your final test. Pingdom will score your site performance (ranging from 0 to 100%), plus page speed analysis.
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 once you have followed the remaining steps on this list:
5. Compress Your Images
Images account for somewhere between 50% to 75% of your web pages’ total weight. The high-quality your images and the more you host on each product page, the larger that number gets. Lossless compression minimizes image size without reducing quality:
For existing images …
Many Shopify Plus merchants — due to the size and scope of their sites — use either Crush.pics or Image Optimizer. Both tools have an over four-star rating on the Shopify App Store and offer lossless compressions of all your existing assets.
For new images …
A great tool to reduce file sizes without losing quality is ImageOptim. It was created by developers for developers. But, as a free application that is easy to use, anybody can put ImageOptim to work.
5. Organize Your Tracking with Google Tag Manager
If you have added a lot of marketing tags to your site recently (for analytics, conversion tracking, behavioral retargeting, etc.) they can eventually slow your website down.
So, if you are no longer using one of these tags, say because you don’t have an ad campaign running right now, you can use Google Tag Manager to remove the tag yourself – without always having to bug your dev team.
All you need to do is add one snippet of code to your site and you can manage all of your tags in one place. Within your Shopify theme, you can add the code just after the tag.
6. Measuring Time to Interact (TTI) speed
In addition to looking at page load speeds, it is extremely valuable to measure how long it takes for a page to deliver a specific experience that your customer is seeking.
According to Dotcom-Monitor (which has a tool that enables retailers to measure this website performance metric), “time to Interact (TTI) pinpoints the most critical moment in a page load — the moment the page’s primary interactive content is displayed and becomes interactive — from the end user’s perspective.”
In this case, “users do not need to wait until the entire page loads to begin to interact with the site. Ideally, their experience with a website using TTI as an indicator would be better than using TTL (Time to Load).
8. Use Fast and Reliable Hosting
Web hosting services play a crucial role in your overall website experience.
This is especially crucial during high-traffic and high-transaction days. The list of name-brand retailers that crashed during Black Friday — like Best Buy, Lowes, Macy’s, and more — continues to grow year after year.
Some factors that you need to consider when researching server requirements are memory limits, projected traffic growth, and peak user load. Shopify, which has 99.97% overall uptime, processed $1.1 million sales per minute at Black Friday, Cyber Monday’s peak.
9. Include Breakpoints for Mobile
A breakpoint is a point at which your mobile website will resize or respond to suit the best browsing configuration for the screen that your customer is viewing.
If a mobile webpage doesn’t offer multiple breakpoints for different screen configurations, the speed at which a customer’s site might load on their smartphone or tablet, plus the viewing quality of the site will be impacted. Thankfully, Shopify allows you to choose from a variety of breakpoint sizes via your design theme.
For example, the Timber theme has four default breakpoints: small, medium, medium-down, and large. And for any screen sizes below those breakpoints, the responsive theme will default to (mobile first) 100%.
10. Leverage a Content Delivery Network (CDN)
The data and tools we’ve shared so far should be enough to get you started in building a case for website speed optimization. If you need additional support to make your argument, please share your requests for more information in the comments section below.
Full disclosure, I worked at Google from 2007 to 2010. Any reference to Google is to help demonstrate the value of offering an optimal mobile experience.