February 13, 2024
Anyone who’s gone grocery shopping the day before a big holiday knows the pain of circling for a parking spot and fighting your way to items fifty other people are after. That’s not an experience anyone wants to replicate on their e-commerce store — but you just might if you don’t put in the work to improve your website performance.
Okay, okay, maybe we’re being a bit hyperbolic. Nothing’s as bad as trying to find a half-decent potato while your least favorite Christmas song blares over the store sound system. However, we do know customers love the convenience offered by online shopping. Nearly 70% of consumers factor site speed into their willingness to purchase from an online retailer. And a majority of online shoppers expect a page load time of 3 seconds or less.
If you haven’t given your website a performance checkup lately, it’s well past time. Here’s how to evaluate your current performance, plus some steps anyone can take to optimize an e-commerce site for a speedy shopping experience.
Chapters:
- Why website performance matters
- The 7 main website performance metrics
- How to measure your website performance
- How to improve your e-commerce website performance
- Website performance is all about the need for speed
Why website performance matters
Does it really matter if you don’t hit that 3-second load mark? Yes, it does. Failing to prioritize website loading speed decreases the quality of your user experience, and that’s bad in multiple ways.
First and most obvious, higher load times mean an increased bounce rate. Even users who stick around through the first few slow page loads may give up on your site before making a purchase.
Lower initial conversion rates are likely to be matched by lower loyalty overall. Customers who remember their suboptimal shopping experience are less likely to return for another try — and they won’t want to follow links that direct them to your site.
Bad website performance also affects your Google SERP rankings. Because the search engine’s algorithm prioritizes user experience, pages with a slow loading speed are pushed down in the search results. Smaller outlets competing for attention might lose out to their faster competitors.
The 7 main website performance metrics
Page load time isn’t a standalone website performance metric. It’s an overarching assessment that rolls together multiple metrics. Four of these metrics are Google’s Core Web Vitals:
- Largest Contentful Paint measures the loading speed of the largest page element users can see “above the fold” — that is, without scrolling down
- Interaction to Next Paint measures a page’s responsiveness to interactions, such as clicking an “add to cart” button or typing information into a form
- First Input Delay measures the time gap between when a user interacts with your website (say, clicking that “add to cart” button) and when their browser starts to process that request
- Cumulative Layout Shift measures how often page content moves while a page is loading
Google considers these aspects most important because they have the biggest effect on user experience. However, there’s four other metrics that also capture important parts of the user experience:
- Time to First Byte measures the speed at which your DNS provider starts delivering your website content after receiving the request
- Total Blocking Time measures how long it takes for a web page to load enough that a user can interact with it (as browsers that are in the middle of loading pages cannot process interactions)
- First Contentful Paint measures how long it takes for the first of your website content to render
If you want to dive deep into any of these metrics, Google’s web.dev site explains more about why each one matters and how to measure them. Or, you can just keep reading as we discuss measuring your site’s performance.
How to measure your website performance
Measuring your site’s performance is easy with Google’s free PageSpeed Insights. This tool assesses your site on the metrics listed above and ranks it as good, needs improvement, or poor. You’ll also get notes on your site’s performance, accessibility, use of best practices, and SEO.
There’s an option to view how your site performs on mobile vs. desktop devices and tips to help you optimize your site. You get a lot of help for the low price of living in Google’s web ecosystem, and let’s face it — that’s already happening.
When you’re looking at your report, you may notice Total Blocking Time is excluded from the “Core Web Vitals Assessment” box. Scroll down to the Performance box, then look at the Metrics table to see your results.
PageSpeed Insights makes it easy to understand why your site earned the rankings it did with color-coded graphics and personalized tips. Go ahead and run a test now — all it takes is a few seconds — so you can get a baseline of your site’s performance and see where you have room for improvement.
How to improve your e-commerce website performance
If you’re still here, we’ll assume your Core Web Vitals Assessment showed you have some work to do. There’s no shame in that. Even Google’s web.dev site doesn’t pass the assessment! Here’s our best tips to help you improve the performance of your e-commerce website and the tools you need to make it happen.
1. Cut down on HTTP requests
HTTP requests exist at the core of loading web pages. You don’t need to know the technical specifics here — only that a browser must make these requests to load CSS files, scripts, images, and other content on your page. Each request requires the browser to send a message to your web host, which then has to respond with the appropriate content.
The more HTTP requests you have, the longer it will take to complete them all. Imagine if you went to a restaurant and first asked for water and then, when your waiter returned, ordered a soda. When they brought the soda, you asked for an appetizer. And finally, after the appetizer arrived, you had decided on your entrees. It would take a long time for you to get and finish your meal, no matter how fast your server worked.
Give your (web) server a break by cutting out unnecessary HTTP requests. If you don’t need a script or CSS file, don’t reference it in your page’s header. You can also try to cut down on multimedia content to increase your page load speed.
2. Use HTTP/2
Not all HTTP requests are made equal. HTTP/2, a standard that debuted in 2015, comes with capabilities that help your web pages load faster. For one, it allows developers to prioritize which elements load first, so you can tell browsers to request light resources before larger scripts. It can also serve multiple resources at once. To return to our restaurant metaphor, HTTP/2 allows you to give your whole order at once so the waiter can get your food to you more quickly.
KeyCDN has a free HTTP/2 test to determine whether your site supports the HTTP/2 protocol. Or, if you want a closer look, open your browser’s developer tools, navigate to the network tab, and look for the “Protocol” column. (You may have to right-click the list of columns and add Protocol.)
HTTP/2 support is determined by your web host, so they’re the resource to turn to if you need to enable the protocol. The process is different for each provider.
3. Eliminate unnecessary redirects
Many companies employ redirects to bypass link rot during website overhauls. However, each time you redirect a user to a new page, you’re forcing them to sit through another page load. Especially redirects that lead to another redirect — no thanks! By the time the user reaches the actual URL, they’ll already be ready to close out of your page.
Redirects have a habit of piling up over time. That means you need to audit them periodically; it’s especially important to do so after any redesign or re-architecting of your website.
Screaming Frog SEO Spider can help you check your entire site for redirects and even detect redirect chains and loops for you. You could also use the Ahrefs SEO Toolbar to check page-by-page, but we wouldn’t recommend this. Unless you have an obligation you really want to get out of.
4. Limit external scripts
Most developers use third-party scripts to add functionality they don’t have the resources to code in-house. Incorporating external scripts is always risky in terms of page speed, though. You don’t have control over the code, so you can’t do anything if the script is slow to load.
Slow-loading scripts make pages take longer to load and can cause problems like content jumping (measured by the Cumulative Layout Shift metric).
Check each page to make sure no unnecessary scripts are loading. For instance, you may have a reviews feature enabled on your site as a whole, but you don’t need that script included on pages made for browsing. You may also ask yourself whether you really need that modal to collect customers’ emails or if it’s turning off more buyers than it’s bringing in.
More bells and whistles aren’t always better. A simple website with a good user experience can muscle out an overdesigned store.
5. Enable lazy (asynchronous) loading
When a browser renders a website, its default is to process each request in order, only moving on to the next command after finishing its current task. Large scripts slow up the entire process, as a browser must load the entire file before it can move on to rendering the rest of the content.
Avoid this delay by directing the browser to load your scripts asynchronously — that is, while continuing to render the webpage. Simply add the async attribute to your script tags (your code will look something like this: <script src=”my_script.js” async></script>).
Some experts recommend adding your <script> tags near the bottom of your body content as older browsers may not be able to read the async attribute, but there’s no need to do this. You’d be hard-pressed to find a browser in the wild that couldn’t handle the async tag.
6. Use mobile-first designs
Website performance optimization needs to include mobile-first thinking. Smartphones are now the source of nearly four in five e-commerce website visits and two in three e-commerce purchases. Unfortunately, the mobile web is still a drag. Most sites have much longer load times on mobile devices. With over 50% of mobile visitors ready to jump ship if a site takes longer than 3 seconds to load, e-commerce retailers are likely losing out on a lot of business.
Almost every website published these days is responsive, but designers who code for desktop and then later optimize for mobile may be going in the wrong order. Using mobile phone emulators to design for small screens puts the needs of this growing audience front and center.
Plus, it’s easy — Google Chrome’s Dev Tools allow you to enter “device mode” to view what your site will look like on smaller screens.
Designing for mobile phones also requires you to make the most of limited screen real estate, which may mean you opt for fewer decorative elements that can slow down a page. You’ll also want to simplify navigation and interactions rather than going for flashy or unique experiences that require external scripts and plugins.
If you’re working with an existing site, you probably can’t implement this practice right now. Just keep it in mind for your next redesign.
7. Compress text-based files with gzip
HTML and CSS files may not seem too onerous to load, but when you’re counting in milliseconds, every byte matters. Compression reduces the size of text-based files so they can make the trip from your server to a customer’s browser more quickly. Gzip is the most common compression framework, but Brotli and Deflate also work well to speed up your website.
This is another feature that’s set up on the hosting side. Most hosts enable it by default, but it’s good to check yours using a free HTTP Compression test. If you find out your content isn’t compressed, it’s time to reach out to your hosting provider.
8. Minify CSS, JavaScript, and HTML files
Compression frameworks like Gzip aren’t the only byte-savers. You can also minify your text files by removing anything that’s not a key part of the code — things like comments, formatting, or lengthy variable names. Many of these elements are helpful for human developers, but web browsers don’t need them to display your web page directly.
There’s no need to go through and delete comments and extra spaces and tabs by yourself. Minifier.org offers a free tool that can handle CSS and JavaScript. Google’s web.dev recommends this free HTML minifier.
If you’re looking for tools that can mass-minify, Google’s PageSpeed Module works with Apache or Nginx web servers and automatically minifies your files. However, installing tools like it or CSSNano may require you to call IT.
9. Optimize images and videos
Multimedia files often decrease website performance simply because they’re so large. E-commerce merchants, who rely heavily on images and videos, must be diligent about optimizing these files to reduce the burden on visitors’ internet connections.
The easy part of optimizing images is resizing them. No file should exceed 20 megabytes (MB) — but really, only your hero images should be that big. Shopify recommends merchants keep images around 500 kilobytes (KB) if possible, though they allow that some sites need files up to 2 MB in size. You’ll likely have to compress your images to meet these goals. Thankfully, there’s plenty of free image compression tools out there you can use.
Once you’ve cut file sizes down, make sure you’re using responsive design principles to keep things speedy for users loading your site from smaller devices. MDN Web Docs, run by Mozilla, has a nice responsive images tutorial you can follow if you’re new to the subject.
10. Take advantage of browser caching
Web browsers can store files locally on users’ machines, which speeds up loading times for repeat visitors. Instead of contacting your server for every file, browsers can pull cached assets from the machine’s local memory.
Caching is an excellent solution for most e-commerce merchants, as your assets remain fairly static. If you do a major site overhaul or replace product pictures, you’ll want to make sure browsers have instructions to re-download the new content and replace cached assets. However, this is a rare enough occurrence for most online retailers that setting up caching is the way to go.
Your web host is, once again, the party in charge of your caching settings. You’ll want to find its documentation and follow the instructions to enable local caches and set expiry dates (which instruct browsers how often they should refresh cached assets from your site).
11. Use a content delivery network (CDN)
Browser caches only help audiences who have come to your website before. Content delivery networks, or CDNs, stash assets as close as possible to each visitor to cut down on load times.
CDNs don’t rely on local machines to store assets. They simply distribute your assets to a network of servers in various locations. That means instead of having one server in Virginia that answers all requests, you may have a server in Virginia, one in California, one in Illinois, and so on. Companies that serve international audiences can work with international CDNs, so they have servers in multiple countries, regions, and continents.
Whenever a browser sends a request to load your website, that request routes to the server that’s geographically closer to the user. It may not sound like a huge time-saver, but since page load speeds are measured on a very small scale, CDNs make a noticeable difference.
12. Regularly audit your plugins
Plugins, add-ons, and extensions are a huge time-saver for most web developers. But, like external scripts, bloated plugins can drag your page speed down. Improve your website performance by revisiting your plugin library to see whether there are any hangers-on that you no longer use.
Sometimes, you need all your plugins, but your pages are still loading way too slowly. In that case, it’s time to figure out the culprit. Copy your site into a staging environment, disable all your plugins, and test your site load speed. Then, enable plugins one at a time to determine whether a single plugin is tanking your performance metrics. (Make sure you enable, test, and then disable each plugin so you’re not accidentally measuring cumulative effects.)
Thankfully, with so many plugins out there, you’ll likely be able to find a replacement for any sluggish tools.
One other option is to look for plugins that have been optimized for speed. For instance, our Ratings & Reviews display technology was designed to keep your website running quickly, and our developers shared the steps they took to fulfill that promise. Find tools built in this vein — ones that use best practices like minifying and reducing script files, caching, and lazy loading — to make your audits a breeze.
13. Remove unnecessary pop-ups
Yes, we’ll say it. Pop-ups are super unpopular. They lead to a bad experience, especially on mobile devices. Even if you think your pop-ups are tastefully done and helpful, internet users are faced with a barrage of modals, overlays, and chat widgets all day long. Everyone has pop-up fatigue, and if you contribute, you’re eroding your consumers’ trust.
Most pop-ups call outside scripts and reference assets like images and fonts, all of which a browser has to load. Modals that appear conditionally have to gather audience data before triggering, which also takes time. And if your Total Blocking Time is high, users may not be able to close out of these elements as the rest of your site renders. This delay would influence users’ perception of your site speed even if there was no actual slowdown.
The slowdown is real, though, as is the nearly universal dislike for these tools. Removing them from your site is a win-win.
14. Choose the fastest services
When a customer clicks a link or types in a URL, they’re telling their browser to query a DNS service to take them to their target site. That DNS service routes the browser to your site’s IP address. Then, their browser starts reading your HTML files and requesting assets from your server or CDN so it can render the website you’ve designed.
That’s a lot of services coming together to make your site appear. If any one of them is slow, your page speed will be negatively affected. That’s why the cheapest option isn’t necessarily the best option for your technical infrastructure.
For instance, many base website hosting plans are shared. This means other websites use the same server you do, so a spike of traffic from one of them might slow down your load times. VPS hosting (for growing sites) or dedicated website servers (for those who can afford them) will return better results.
You also want to make sure your domain registrar, which handles DNS hosting, is a high performer. DNSPerf keeps an ongoing log of DNS performance so you can see for yourself how various providers stack up.
Of course, speed doesn’t only matter at the top levels. We talked about finding lightweight and streamlined plugins. You’ll also want to think about services like your security software and other backend tools. Though customers don’t interact with them directly, they can still impact your e-commerce website’s performance.
15. Monitor website operations
Checking your website performance every once in a while to see if there’s big problems is a smart idea. Constantly monitoring your site so you’re aware the second a problem pops up is even smarter.
You can invest in tools that collect data on your users’ experience to show how your site performs in the real world. Since many shoppers will be visiting you from setups unlike your own, real user monitoring provides a fresh perspective.
Other tools pretend to be human visitors, using a series of scripts to navigate your website and test its performance. Synthetic monitoring setups like these are more useful for teams looking to gather data from controlled tests. If you’re in the midst of optimizing your site, synthetic monitoring will help you spot changes that actually make a difference. These systems can also run scheduled tests with the goal of catching major problems before your customers run into them.
There’s plenty of tools that perform both of these jobs (and more):
- Site24x7 performs synthetic and real user monitoring for you
- LogRocket monitors users and identifies errors and site interactions users typically struggle with
- New Relic is an end-to-end synthetic monitoring system that integrates with just about every infrastructure there is
Whichever tool you use, make sure you configure the alerts to tell you when something goes wrong. The quicker you can fix the problem, the fewer customers you’ll disappoint.
Website performance is all about the need for speed
As internet and mobile connections become faster and even more ubiquitous, consumer standards will continue to rise. Providing a fast, convenient experience is a baseline expectation. Companies who can figure out how to excel on mobile and get those loading speeds down to a second or less will have a chance to capture more market share.
The customer experience you provide is directly connected to your conversion and retention rates, and your website’s performance is directly related to that customer experience. Website optimization isn’t a project that can wait for a rainy day. It’s an essential part of bringing customers to your site and making more sales.
Improving your site’s speed isn’t the only way to reach more customers. Check out these ways to increase organic traffic to keep your momentum on the SERP.
