Slow-loading websites rank poorly, drive less revenue, and cost more to run. Whatever business you’re in, if you have an online presence, improving your site speed is one of the most beneficial things you can do to reduce your bounce rate and boost ecommerce conversion rate.
If you’re in the ecommerce space, it’s even more essential to dedicate time and resources to achieving the fastest possible site speed. Research shows that site speed directly and significantly affects product rankings, conversions, and value-per-visitor.
But many retailers are unwilling to commit to make significant changes. Site speed optimization can seem complicated. There are lots of different areas that demand attention, many of which require specific coding skills that most people don’t possess.
If you feel the same way, then don’t worry. In this guide, we’re going to cover everything you need to know – from image compression to CDNs to server-side database optimization and beyond. Once you’ve got to grips with the basics, you’ll feel confident and knowledgeable enough to send your site speed straight into the stratosphere. Even if you don’t have any technical development or optimization knowledge.
What Is Site Speed?
Why Does Site Speed Matter?
How to Check Your Current Site Speed: Google PageSpeed Insights Results Explained
Top Data-Backed Methods for Boosting Page Speed
1. Check and Improve the Speed of Your Hosting Provider
2. Optimize Images
3. Enable Browser Caching
4. Minify HTML, JavaScript and CSS
5. Take Advantage of AMP (Accelerated Mobile Pages) and PWAs (Progressive Web Apps)
6. Kill Poorly-Performing WordPress Plugins
7. Use a Content Distribution Network
8. Optimize Your Server Response Time
9. Use Compression Wherever Possible
10. Load Files Asynchronously Wherever Possible
11. Reduce Redirects
Tools to Help Boost Your Site Speed
Ready to improve your ecommerce site speed?
Sounds good? Let’s dig in then!
There are quite a few common misunderstandings when it comes to site speed. Before we dive into the meat of the post, let’s define a few key terms.
First off, it’s important to distinguish between “page speed” and “site speed”. Page speed is the time it takes to load a single specific page on your website. Site speed is the average speed for a sample of pages across your site.
First off, it's important to distinguish between page speed and site speed. Page speed is the time it takes to load a single specific page on your website. Site speed is the average speed for a sample of pages across your site. Click To TweetIn many ways, this distinction is arbitrary, but it is worth understanding to avoid any confusion. This post aims to provide you with both page-specific and site-wide optimization tips. By implementing best page practices (that will inform how you design all your pages going forward), you will improve your overall site speed, which is the crucial metric.
Site speed can be measured in terms of page load time – the time it takes for a page to render fully – or time to first byte – the time it takes for a browser to receive the first byte of data from a server. Generally speaking, page load time (and similar variations) is the more accurate and commonly-used measure, although time to first byte is also a useful figure in certain contexts.
Site speed affects your website in many crucial ways related to search rankings, engagement, conversions, and more. But many webmasters, ecommerce retailers among them, overlook this vital aspect of their sites.
Site speed affects your website in many crucial ways related to search rankings, engagement, conversions, and more. But many webmasters, ecommerce retailers among them, overlook this vital aspect of their sites. Click To TweetA slow load time has a direct effect on your bottom line. Source
Improving your site speed is one of the surest ways to gain a competitive edge. Let’s take a quick look at why it’s so important:
Site speed is a major ranking factor for Google. Google itself has reiterated this on many occasions. And numerous independent analyses confirm that site speed is one of the most important areas for optimization when it comes to SEO.
As Edwin Toonen, writing for Yoast, says: “You don’t even have to listen very carefully because SEO people are shouting it from the rooftops: site speed is everything. Not a day goes by without a new article, white paper, Google representative or SEO expert telling us that optimizing for speed is one of the most important things you can do right now. And they’re right, of course!”
People are more likely to leave your site if it takes a long time to load. Not only is this activity a negative signal to Google (indicating low customer engagement), but it also directly affects your conversion rate.
If customers aren’t sticking around because your site takes too long to load, they don’t have a chance to see your wonderful, conversion-optimized page and excellent products.
Research shows that the value-per-pageview increases along with site speed. And we’re not just talking about a few percentage points here. Cutting your site load time down to one second can increase your value-per-pageview by up to 100%.
Reducing your site speed to below one percent can increase value-per-pageview by up to 100%. Source
A slow-loading website leads to frustration for customers and communicates a lack of professionalism on your part.
People feel tangible stress when it takes too long for a page to load. And once a would-be customer associates your brand with that negative experience, they’re more likely to take a dim view of it in the future.
Conversely, a fast-loading site provides customers with a positive user experience (check out this 11 UX tips!) and communicates the professionalism and quality of your store.
There are numerous tools available for testing your site speed. Some focus on specific areas – like your DNS provider speed or your time to first byte (TTFB) – while others are more comprehensive. As a starting point, there’s no better option than Google PageSpeed Insights.
Here’s how to give your site a full medical and what the results mean:
1. Head over Google PageSpeed Insights and type your URL into the text bar. Hit “Analyze” to get your results.In this walk-through, we’ll use Zappos as an example. Google PageInsights, arguably the best tool available for testing site speed, is completely free and very comprehensive.
2. Along with an overall result included at the top of the page, which ranks your page as either slow, average, or medium, you’ll be provided with three sets of results for both mobile and desktop:
The “Lab Data” section has the most detailed drill down of site speed metrics.
3. Don’t forget that there two tabs (blue menu in the header) – one for mobile and one for desktop – that show different data. You will often need to apply the optimization suggestions associated with each individually.
4. In each of the sections, there are two key speed measures (FCP and FID) along with five separate measures in the “Lab Data” section:
5. Beneath these three sections is a section titled “opportunities”, along with the amount of time they can shave off your site speed. This is the real meat of the test – the practical suggestions for improving site speed. You can expand each suggestion for implementation instructions.
Let’s take a look at a few examples from the screenshot below (we will look at most of these in more detail in the section below):
The “opportunities” section is where you are provided with concrete suggestions for boosting your site speed.
6. Finally, beneath the “opportunities” section are the “diagnostics” and passed audits” section. These cover (respectively) further speed opportunities based on best web practices and criteria that you passed.
In subsequent sections, you can see even more suggestions for improving site speed, along with which audits you have passed (great for checking if a change has been implemented properly).
Google PageSpeed Insights has instructive and clear documentation about all of its features and suggestions and is a great resource if you have any further uncertainty.
For all its features, PageSpeed Insights is not flawless.
One area where it stumbles is in relation to geographic area. The location of the test server is unknown, so results may not be uniform. If, for example, your server is in the United Kingdom, and the test server is on the west coast of the US, results will be faster for someone visiting your site in the former country.
Use Pingdom and GTmetrix, both of which allow you to set the location of the test server, to supplement the picture provided by PageSpeed Insights.
OK, so let’s dig into some practical tips.
Here are the top ten steps you can take to ensure your site loads in the blink of an eye:
Short Version: While there are positive changes you can make to your servers, and it may be beneficial to move from a shared to a dedicated plan, sometimes you just need to change provider. Before moving onto tasks that are under your control, check the quality of the service from your provider.
If your hosting provider’s servers are slow, there’s little you can do to overcome the problem. Source
Use a tool like Bitcatcha to test the speed of your website hosting server and compare it to other companies.
If your hosting provider is slow, there’s not much you can do about it. You may need to consider changing to a new provider. If you are running an online store, it’s usually beneficial to switch to a dedicated or managed hosting provider with ecommerce experience.
Here are the key differences between hosting plans in terms of speed:
Generally speaking, if you’re running an ecommerce site, you’ll want to opt for either dedicated or VPS hosting.
Here are a few of the most highly-rated providers for online retailers:
SiteGround – SiteGround has a number of dedicated plans for ecommerce platforms, including Magento, WooCommerce, and PrestaShop.
Liquid Web – One of Liquid Web’s core propositions is superior customer service. The company offers 24/7 access to advisers, often with less than a minute response time. A number of ecommerce-specific plans are offered (including dedicated hosting for WooCommerce) and it’s a great option for small and medium-sized retailers that are expecting to scale in the future.
InMotion Hosting – InMotion is very popular with ecommerce retailers and is one of the best-priced options available.
Rackspace – Rackspace is one of the premier solutions for enterprise ecommerce, offering a range of dedicated and cloud-hosted solutions. The customer service and security infrastructure are among the best in the industry.
Don’t skimp on your hosting provider. It’s the one area that isn’t under your control. And prioritizing cost over performance will only lead to lower returns over the long-term.
Short Version: Optimizing images is one of the easiest and quickest ways to improve site speed. Ensure images are in a format that’s suitable for the web. Use CSS sprites for quicker image load times.
Images are prime culprits when it comes to site speed. Image files that are unnecessarily large needlessly take up server space and require more time to send to visitor’s browsers.
You should optimize images in a program like PhotoShop or GIMP to retain full control over the quality of images. Different formats work best for different types of images. Generally speaking, for example, JPEGs are ideal for photographs while simpler images with stock colors will render more quickly as PNGs.
Here’s a quick rundown of the most common formats and when to use them:
Alongside using the correct format, here are a few more things you can do to optimize images for site speed:
Finally, upload images to your server as CSS sprites where appropriate. CSS sprites are collections of multiple images combined into a single file. Rather than load images from a server individually, a browser can download the equivalent of a single image, thus eliminating the need for multiple server requests. It’s then possible to tailor the page code to only show a specific individual image whenever it’s needed. You can use this technique for everything from product images to CTA (call to action) buttons and social media icons.
Short Version: “Ask” browsers to save and reuse your site files whenever users return. Doing so reduces page load times for repeat visitors with virtually no input on your part.
Browser caching occurs when a browser stores important files that make up your site. This means that when a visitor returns to your site, their browser doesn’t have to retrieve every file directly from your servers. It only needs to request specific files that are likely to have been updated, or even certain parts of individual pages (like the logo image). This increases load times substantially because it cuts the number of requests made to the server.
Enabling caching is a fairly straightforward process and involves adding a small amount of code to your HTTP headers to set expiry periods for specific files. If your site is hosted on WordPress, there are numerous plugins, like W3 Total Cache, to streamline this process.
Browser caching can be a little tricky for online retailers because pages are often subject to time-sensitive updates regarding price, stock levels, reviews, delivery information, and so on. Because of this, it’s important to distinguish between those files that store genuinely stable content – CSS styles, logo, navigation, etc. – and those pieces of content that are subject to change. Then you can code accordingly. Remember, it’s entirely possible to code specific page elements like headers and footers, along with bigger files (like CSS stylesheets) that aren’t time-sensitive, and even just enabling caching for these will still have a positive effect on site speed.
Short Version: Use a CDN (content delivery network) to enable automatic minification and reduce your file sizes by up to 60%. Setting up a CDN is a relatively straightforward process made possible by well-known services like CloudFlare and Amazon AWS.
Minification is the process of minimizing code in your web files. It’s been shown to significantly reduce site load times. Smaller files can be requested with greater speed and then interpreted by the browser. This optimization strategy is often highlighted by page speed tools and is one of the most effective that you can implement.
It works because of the discrepancy in length and complexity of that is intelligible to developers (which usually includes comments, spaces, commas, and more) and the kind of minimal code that is necessary for a browser to render a page. Sometimes this reduced version can be as small as 40% of the original version.
Minification can dramatically reduce the size of web files. Source
But there is a key problem. Manual minification is a big no-no. It takes too much time and there’s way too much scope for mistakes. Even with automated tools, a high level of manual input is required in the development stage to process and implement all alternate code.
Instead, the best option is to use a CDN (content delivery network) that will automatically minify code before delivering it to a browser. The original files will be kept on your own server, while minified versions will be stored on the CDN servers. Whenever you make changes to pages, they’ll be synced with the CDN servers. CDNs are also useful for a variety of other reasons but we’ll come to those later.
Short Version: AMPs and PWAs, both developed by Google, can dramatically increase the speed at which your mobile pages load. There is a large development cost so the transition to either PWAs or AMPs should be taken in light of other positive factors (if you’re inclined). If you do decide to go ahead, the impacts on your site speed can be significant.
Converting your mobile pages to AMPs can be a big job and it isn’t for everyone. But it is definitely worth exploring as a longer-term strategy, however.
What exactly are AMPs and PWAs? Here’s a quick overview:
There are some key differences between the two (and a lot of debate) but both improve mobile site speed. You can learn about the practicalities of AMPs and PWAs from Google’s comprehensive documentation.
Short Version: Plugins can act as a big drain on load times. If your ecommerce site is hosted on WordPress, conduct a comprehensive review of plugins, getting rid of those that you don’t need and seeking alternative solutions for “heavy” plugins.
The availability of easy-to-use plugins is one of the reasons that many retailers opt for platforms like WooCommerce and Shopify. Most of the time, plugins are beneficial for retailers. They boost performance, eliminate the need for complicated development tasks, and are often free.
However, plugins that are badly coded, conflict with other elements of your site, or are outdated, can put a lot of strain on site load times. Similarly, large plugins often need to send multiple file requests to retrieve their own stylesheets or JavaScript.
Fortunately, troubleshooting plugins is quite straightforward. Often, the simplest method is to use your speed report to pinpoint problems that might be related to plugins, retesting once they’ve been disabled.
Alternatively, you can use a WordPress plugin like P3. It will scan your plugins and highlight any areas of low performance.
The other interesting thing about plugins is that many of the problems they solve can often be rectified by simple changes to the code in web files. Overuse of plugins is a sure sign of an absence of developer knowledge. If you regularly fall into the trap of solving relatively small issues with clunky plugins, then you could be doing your site speed a great injustice.
Short Version: CDNs (Content Distribution/Delivery Networks) are inexpensive to subscribe to and easy to implement.
CDNs have already been touched upon because many providers also offer the option for automated minification, but it’s worth mentioning them again here because they provide additional benefits over and above automatic minification.
CDNs mitigate the negative effects of data transfer over wide geographical distances. Source
The idea behind CDNs is very smart. A CDN is a global network of servers that stores cached versions of your website. This provides visitors at different geographical locations with faster access to your site. Whenever a visitor makes a request to your site through their browser, the nearest server that stores a copy of your site will be contacted.
Using a CDN can also help you control bandwidth costs (if you’re paying them) and deal with traffic spikes.
Short Version: While you can’t change a bad server, you can optimize one that’s performing well. Focus on cleaning up your database, picking the right settings for your CMS, and opting for a fast DNS provider.
Time to first byte (TTFB) is a measure of the amount of time it takes for a browser to receive the first byte of information from a server. There are essentially three parts of a server request, each signifying a potential area for optimization: the time it takes to send a request, the time it takes for the server to process a request, and the time it takes to send the requested information to the browser.
You can check your time to first byte with WebPageTest. It should be under 200 ms.
Using a CDN is one of the best ways to improve the first and third stages because the network will reduce the distance between servers and your visitors’ browsers.
It’s the second area that we’re concerned with here. Optimizing server speed is a massive topic that’s well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.
Here’s a quick checklist for ensuring good server response time:
Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it’s good practice to hire an experienced optimization developer to ensure that no mistakes are made. It’s also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.
Short Version: Gzip enables you to compress files before they’re sent to a visitor’s browser. It’s an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).
Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.
So how exactly does it work?
Whenever your server sends files to a visitor’s browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.
To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).
Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).
Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.
During an asynchronous load, multiple files are loaded at the same time. Source
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.
It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.
Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.
Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.
Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list. Click To TweetWhenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.
Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.
Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.
Don’t worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.
In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.
Here’s a quick rundown of the tools you need to help with implementation:
Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.
Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.
WebPageTest – A simple tool to test your TTFB.
DNSPerf – A good tool for testing the speed of your DNS provider.
Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It’s a good complementary tool for use in conjunction with PageSpeed Insights.
Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.
Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.
CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.
Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.
Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.
Improving your site’s speed is a big job. But it’s worth it. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.
But remember one crucial point. It’s vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).
Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.
Now, time to head over to PageSpeed Insights.
Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we’ve written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.
Oh, and it’s free! Click here to download it now and gain a vital edge over your competitors.