Have you ever considered how important your web performance is? According to the latest studies, 40% of customers will abandon a website that takes more than 3 seconds to load, and 79% of customers who are dissatisfied with website performance are less likely to make a repeat purchase. Moreover, Google won’t even let websites with slow performance show up top on search results. Sounds like performance is really important, doesn’t it? So, let’s take a closer look at your website performance and learn some methods we use to get e-commerce websites to load faster.

What Do You Need to Increase E-commerce Website Speed?

If your website performance leaves much to be desired, you’re more likely to experience problems such as low conversions, reduced average daily attendance rate, and, eventually, the lack of sales.

Website load speed affects almost every metric a business-owner should care about: bounce rate, search ranking, conversion, page views, and above all – the revenue. Thus, retailers come to a common conclusion: the faster the website, the higher the conversion. So, how do you build faster websites?

You need to implement performance tuning for your store. Not sure where to start and how to speed up e-commerce website? Let’s demystify performance tuning together.

Metrics to Measure Website Performance

It’s a well-known fact that Google’s recommended speed for the e-commerce website is two seconds. However, you need to know that many more factors must be taken into account to define performance in an accurate manner. There are lots of e-commerce website performance metrics you can refer to in order to determine your website performance. However, you can get lost in the variety. To make it easier for you, we recommend that you simply draw your attention to the next 7 metrics:

  • Time to title – the time that passes from the moment a visitor requests your website and the moment the title of the website has shown up in the user’s browser.
  • Time to start render – the time elapsed between a user’s request and the moment when the content appears in the browser’s window.
  • Time to impact (or time to interact) – the time between a request and the moment when a visitor can click links. It should be noted that some elements (e.g. scripts, trackers) may continue to load during this period.
  • Domain name system (DNS) lookup time – the amount of time it takes for your DNS provider to translate a domain name into an IP address.
  • Connection time – the time interval between a request and when a connection is established between the user’s browser and your origin server.
  • Time to first byte (TTFB) – the time it takes for the first byte to reach a user’s browser after a connection to the server has been established.
  • Time to last byte (TTLB) – the time it takes until the last byte is received by the browser or client.

We strongly believe that these metrics are the most useful ones if you want a deep exploration of performance. While you are on this mission, you should also be aware of so-called vanity metrics that include the number of visitors, registered users, social media likes etc. – these typically do not offer enough information to aptly reflect the real state of affairs.

How to Test Website Performance?

Now that you know which metrics need to be explored, the next issue to solve is the search for a reliable tool to measure the metrics listed above. To help you carry out your e-commerce website performance testing successfully, we’ve generated a list of the recognized leaders in the field of performance measurement.

In one of our previous articles we’ve raised an issue of performance importance. In this article we also explored the question of how to measure the success of the e-commerce website and offered some effective tools for use.

Top-9 Useful Tools to Improve E-commerce Site Speed:

    • 1. KeyCDN

       – An extremely fast and lightweight tool intended to provide you with meaningful insights. You are welcome to choose from 14 locations around the world to perform a test, and you can make the results public or private. Information provided by KeyCDN includes the number of HTTP requests made, load time, and the full size of the page requested.
    • 2. Google PageSpeed Insights

       – A tool that grades results on a scale from 1 to 100 points – the higher your mark, the more optimized your website is. Any mark above 85 points means your site performance is doing really well. You can even test both mobile and desktop versions of the webpage.
    • 3. GTMetrix

       – This tool assigns page results a grade from F to A. Its reports are subdivided into 5 sections that include PageSpeed results, YSlow results, waterfall breakdown, video, and history. Seven various locations are available for testing.
    • 4. WebPagetest

       – Being very similar to the tools mentioned above, WebPagetest allows you to use more than 40 locations to perform tests with over 25 browsers to choose from (including mobile ones). You can learn how successful your FTTB, caching, compression, usage of CDN, etc. are.
    • 5. Uptrends

       – A pretty basic tool, yet it provides over 35 locations to run speed tests. In addition to the regular reports, the user is free to choose extended reports where they can define data needed to be represented. Uptrends’ reports can be delivered in a very custom way by choosing desired charts and filters to be applied.
    • 6. Yellow Lab Tools

       – This tool can give you unique data, such as the details of JavaScript interactions with document object model (DOM) during the loading of the web page. You can also get an overall score based on page weight, requests, DOM, Server Config, etc.
    • 7. YSlow

       – An open-source tool that analyzes web pages using Yahoo!’s rules for high performance websites. Performance is analyzed in three steps: first, YSlow decompounds DOM in order to find its every component such as images, scripts, etc, then gathers information about size of each element, and then puts an overall grade based on the data taken.
    • 8. PerfTool

       – An open-source performance measurement tool hosted on Github. It collects more than 200 performance indicators intended to help you speed up your e-commerce site.
    • 9. SiteSpeed.io

       – Perfect for client-side performance evaluation from real browsers. While analyzing your website performance, SideSpeed tool checks the website for compliance with performance best practices and timing metrics. You can analyze a single website or compare multiple ones.

You may also wish to visit Performance Budget Calculator, developed by Jonathan Fielding. This tool lets you choose the desired time of the webpage loading and the type of connection. It will then provide recommendations on what can be fixed in order to obtain aspired performance.

The last thing we’d like to mention in this section is that you should never rely on a single tool. Use as many tools as is needed to make sure you’re provided with the most relevant and accurate data about your store’s web performance.

Ways to Increase the Speed of E-commerce Site

Now that all the necessary tests have been conducted and weaknesses detected, let’s clarify – what can be done to improve your website’s performance?

There are many variants that affect performance measurements: you have undoubtedly heard about caching, content delivery network (CDN), and code and configuration optimization. Let’s look at them in more detail.

Content distribution network

CDN is a network of connected servers that are used to help load distribution in content delivery. Copies of the website are stored at multiple data centers that are geographically distributed all over the world in order to provide users with faster and more reliable access to the website. Using CDN is a good way to improve web performance in case your store audience extends worldwide. CDN is especially life-saving for e-commerce websites during Black Friday, Cyber Monday, Christmas, and other busy retail days. Beyond better site performance, CDN can also offer you a more secured global network.

Code optimization

Code optimization means thoroughly learning the existing code and its further refactoring. Some code may contain redundant lines, strange variables, spaghetti code, etc. A code review will fix all those issues.

The main objectives of code optimization are to decrease the amount of code and the amount of the memory being used, to accelerate the program, and to decrease the number of input-output operations. The optimized program must improve speed by at least 20-30% versus unoptimized, otherwise spending the time on optimization is a waste.

There are wide-spread good practices in optimization:

  • The very first thing in code optimization is to find the bottlenecks and a way to fix them.
  • Optimization should be applied to the code snippets that are regularly repeated in the work. The efficiency of this principle can be easily explained: performance growth for the single iteration is small, however, the 1000th repetition of this iteration effect will be impressive.
  • Every step in optimization should be precisely weighed and considered in order to avoid critical errors.

Places in the code that should be optimized can be defined manually by a developer, or with specific automatic tools that are part of a specialized software or a built-in compiler. Modern processors can also optimize code via explicit code instructions.

Caching

The next performance tuning method is caching. For now caching is probably the most well-known method among other approaches.

A cache is a small and fast temporary storage memory, designed to speed up the transfer of data and instructions. Intended to remove performance bottlenecks that cause slow access to data, caching improves performance by retaining frequently used information (stylesheets, images, JavaScript files etc) so when the visitor comes back, their browser doesn’t have to reload the entire page every time.

You can use YSlow to see whether you have already appointed an expiration date for your cache. Then, you can put an “expires” header in which the duration of caching data on your website will be mentioned. The most common practice is to set the expiration period as one year, unless your website’s design changes frequently. You can learn more about how to leverage browser caching according to Google politics here.

Server tuning

Another step towards good web performance comes with server tuning.The main server characteristic you should concentrate on is server response time. Server response time is affected by such factors as the amount of traffic you receive, the resources each page uses, the software your server uses, and the hosting used.

To improve server response time, you should look for performance bottlenecks, whether they are slow database queries, slow routing, or the lack of adequate memory. Nowadays generally accepted server response time is considered to be under 200 ms.

Though they are not as widespread as the ones listed above, they are still helpful in achieving the best results, so we’d also like to recommend that you think about the following performance tuning methods.

  • Avoid 301 redirects – although it is still useful in some cases, a 301 redirect is nothing else but a serious performance killer when it comes to conversion. The reason is that redirects increase your round trip time (RTT) and thus the time for loading the HTML increases too, even before the browser starts to load other assets;
  • Reduce HTTP requests – the more HTTP requests your page makes, the slower it loads. You can use CSS sprites, use less code, or inline your JavaScript (it is acceptable only in cases where the JS code is small);
  • Optimize web fonts – use less fonts, minimize the number of used variants;
  • Minify CSS and JavaScript – in such a way that unnecessary characters in your HTML, CSS and JavaScript files can be reduced – and elements such as block delimiters, white spaces, new line characters and comments can be removed. Grunt and Gulp minify plugins will assist you in minifying or you are welcome to leverage WordPress Cache Enabler if you use WordPress.
  • Enable GZIP compression – this allows you to compress web pages, CSS, and JavaScript at server level before sending it to the browser. You can check whether your website is already compressed here;
  • Fix 404 errors – the cause of this error is any missing files. Depending on the platform you use, it can cost you on average from 60 to 100 MB of memory consumed just to return a 404 error code;
  • Use scaled images and image optimization – we know it is incredibly important to represent your products well when it comes to user engagement in e-commerce websites – they hold a great significance as you can’t sell your products without including high-quality product images. But, on the other hand, heavy ones can also slow your website down. Thus, it is necessary to optimize images so that you can deliver a faster website with good quality images.
  • Database optimization – there are always things to be optimized in the database – whether it is cleaning up old unused tables or creating indexes to provide faster access.

Whidegroup’s Experience in Performance Measurement

Because we build websites for e-commerce companies, we also often optimize already existing stores. We’ve even created our own tool for performance measurement.

We have developed Storalyze with a special focus on e-commerce. Intended to improve e-commerce site performance, our tool allows you to evaluate the performance of your store by designating 4 URLs: Home Page, Products Page, Category/Collection Page, and any other important page that comes to mind. By analyzing the pages specified on these URLs, you’ll get the following insightful information: first screen load time, CDN usage, static files minification and external resources accessibility.

Our tool also shows you the following information:

  • Revenue increase potential – by which percentage your revenue can be increased.
  • Use of images in 100% size – the percentage of the images that are resized by HTML or CSS leads to the poor performance of the website and low quality of the images.
  • Render blocking requests – shows the number of blocking CSS and JavaScript resources that cause a delay in rendering your page.

Storalyze’s main features are analyzing non-trivial factors (such as the quality of displayed images, conversion growth potential, etc.), identification of performance bottlenecks, and providing you with clear reporting and guidelines of how you can improve your webstore.

We’ve also worked on optimization for these next two projects: Styled – a Danish apparel retailer, and Opulent – a US jewelry store. Let’s explore them in closer detail.

For both, we made CSS and JS minification by putting JavaScript and CSS files into a single compressed file. As a result, the content was retrieved by a single HTTP request, thus saving bandwidth and improving website performance.

The major challenge encountered for both websites was poor load time. After a thorough exploration, we found the main bottleneck – images were unnecessarily heavy due to the wrong method of compression being applied, and this affected the time load. To solve this issue, we developed an algorithm that calculates the optimal size for the images. This algorithm can save the original aspect ratio which leads to more light-weight images while still preserving their quality.

Something you’ve probably taken away from the article above: performance tuning strongly affects any e-commerce business. It is not always easy to define what exactly needs to be fixed on your website: there are so many possible elements that can cause bottlenecks and it’s often hard to know what to do offhand or how to improve your ecommerce website speed. If so, don’t hesitate to turn to web specialists with the appropriate level of expertise, like Whidegroup. We will find the most apt solution to exclusively suit your situation!

How to Increase an E-commerce Website Speed
51star1star1star1star1star