Placeholder canvas

How to Optimize Your Website Performance: Top Metrics Worth Monitoring

We’ve all heard the saying, “What gets measured gets improved.” It means regular measurement and monitoring keeps you focused because you use that information to make decisions to improve your results. The same is true for anyone in the eCommerce field. 

Good website performance is a cornerstone of any successful eCommerce business because it’s the first touchpoint that all visitors experience. This first impression influences how users feel about your brand, and whether or not they convert, buy, or bounce. As faster sites are higher-performing, you need to optimize the performance of your website in order to improve user experience, increase conversions and boost sales.

However, your website’s performance can fluctuate depending on a number of metrics or factors. These performance metrics will give you important insights into how your website is doing and if there are improvements that need to be made for a better user experience. Even a small fluctuation in these metrics can hugely impact the performance of your website. Hence, you need to start monitoring these metrics to improve your website performance.

In this week’s blog, we are going to discuss the important metrics and tools that you can use to analyze the performance of your website:

Website Performance Metrics

While simple web applications are much easier to maintain and ensure peak performance, more complex websites present a more difficult challenge when it comes to ensuring a smooth user experience on every touchpoint. To that end, the following is a list of some of the most important metrics you should track to measure website performance.

1. Server Response Time – It measures the time between the browser requesting a page and when it receives the first byte of information from the server. It is recommended to have a server response time of 0.5 seconds or less.

2. Page load time: It is the time taken to load an entire web page completely. It is measured from when a user requests a website (e.g. enters a URL in the browser or clicks a link on a search results page) to when the last resource on the page is rendered. 

  • Ideally, a website should load in two to three seconds maximum.

3. First Contentful Paint (FCP): It measures the time taken by your website to load the first piece of text or picture after the user navigates to your page. The ideal FCP time is 0-1.8 seconds.

4. Time to Interactive (TTI): It is the amount of time taken by a page to load until the moment a user can interact with it. 

  • The ideal TTI time is 0 – 3.8 seconds.

5. Speed Index (SI): Speed Index measures how quickly content is visually displayed during page load. 

  • To attain faster speed, your SI needs to be between 0-3.4 seconds.

6. Total Blocking Time (TBT): TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks or screen taps. 

  • The ideal TBT time is 0-200 milliseconds.

7. Largest Contentful Paint (LCP): The time for displaying the most massive site element on the visible part of the screen. 

  • An ideal LCP time is 0 – 2.5 seconds.

8. Cumulative Layout Shift (CLS): Cumulative Layout Shift measures the movement of visible elements within the viewport. To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.

9. DNS Lookup Time – DNS lookup time is how long it takes for the Domain Name System (DNS) to convert the domain name entered by the user into the corresponding IP address. This must be done to retrieve the resources from each hosting server. DNS lookup should be very short, no more than 150 milliseconds — anything longer can noticeably impact performance.

10. Optimal Image Size – It is the number of bytes the image takes up on your website. This is the factor that can slow your website down. If your image size is really big, it’s an indicator that either your image dimensions are too large or the resolution is too high. Ideally, large images should be no more than 1 MB and smaller images should be less than 300 KB. Keep on checking if you can keep on optimizing your images further.

11. Unused/Minify JSS & CSS Files: Reducing unused JavaScript can reduce render-blocking behavior to speed up your page load and improve your visitors’ page experience. By default, JavaScript files are render-blocking because they block the browser from dealing with other page load tasks, thus delaying your page’s First Paint. Loading unused JavaScript can therefore have a heavy impact on your page performance. Naturally, the more unused JavaScript there is on your page, the longer it takes the browser to download, parse, and execute them. Ideally, JavaScript files that have more than 20 KB of unused code should be reduced.

12. HTTP Requests: HTTP dictates that for a website to load in a web browser, the browser must first send an HTTP request to the target website’s hosting server. The web server then sends back a response with the requested resource. In reality, most web pages are complex and require multiple HTTP requests to fully render. As a rule of thumb, the more complex a web page is, the more HTTP requests it needs. And the more requests made, the slower the page. The median number of HTTP page requests to load a webpage on mobile or desktop is between 69 and 75 requests.

13. Catching Metrics: Web caching typically speeds up a webpage after it has been viewed for the first time. Caching accomplishes this by temporarily storing static assets (such as images, HTML, CSS, and JavaScript) from the webpage, so they can be easily accessed later on. Following are some caching metrics to keep in mind for a faster website:

    • Total Requests: Total requests is the count of every request on the server. A basic page may only load 3 or 4 requests, but most of the time 30+ requests are made since there are references to 30 different files on each page. The more the cache requests, the slower will be your website page.
    • Cache Hits: A cache hit describes the situation where your site’s content is successfully served from the cache. The tags are searched in the memory rapidly, and when the data is found and read, it’s considered as a cache hit.
    • Cache Miss: A cache miss refers to the instance when the memory is searched and the data isn’t found. When this happens, the content is transferred and written into the cache.
    • Catching Time: Caching is the process of storing data in a place where it can be more easily fetched in the future. A browser cache saves website data like HTML files and images temporarily on the user’s device. When the user returns to the cached web page, the browser loads these files from its local cache instead of requesting them from the web server, saving time and bandwidth. Browser caching is a must for content that is static on your website for longer periods (content that changes frequently should not be cached). Google recommends a minimum cache time of one week and preferably up to one year for static assets, or assets that change infrequently.

Tools to Use for Analyzing Website Performance

You can utilize multiple tools to analyze the metrics given above. These tools will highlight various areas that need your attention in order to optimize your website performance: 

  • Google Pagespeed Insights
    This is the official website performance testing tool from Google, which is called Google Page Speed Insights. Page speed tool provides you with a grade from 1 to 100, within which a score of 85 and above is considered good. It gives the result for both desktop and mobile versions of the website and further breakdowns the report into various elements that affects page speed.
  • Google Search Console
    It is a free tool provided by Google that helps people track information about their website, boost search rankings, set up alerts to respond to website errors, learn how Google is crawling their website, learn about which pages on their website are indexed, and a lot more. Google Search Console is a great tool because it gives direct access to all the metrics collected by Google.
  • GTmetrix
    The GTmetrix performance test is one more Lighthouse-powered option — it gives an in-depth summary of performance and suggestions for improvement. It also includes a helpful speed visualization (a timeline of screenshots marking each significant load time event), a content waterfall, video recordings of its tests, and historical performance data for tracking improvements over time.
  • Pingdom
    Pingdom is a website monitoring tool that also offers a free website speed test. Its results center on changes you can make to boost performance, and it assigns letter grades to each component enhancing or detracting from load time. It breaks down transfer sizes by file type and number of HTTP requests per content type.
  • Website Grader
    Website Grader provides an aggregate performance score out of 100 which encapsulates the effectiveness of your website. Scoring factors include performance as well as SEO, mobile experience, and security.
  • WebPageTest
    WebPageTest is an open-source testing tool that assesses web performance and security. It runs performance tests on multiple browsers and lets you test from multiple global locations.

These are some of the tools that can be used for analyzing your website performance, however, there are many more such tools available in the market.

It is vital to continually measure your website’s metrics to know how successful your website is performing at any given time. A recommended way of doing this is by prioritizing these metrics via a step-by-step approach. You can start by working on a few of them and once they enter the green zone (the ideal zone), you can move onto the next set of metrics. As you make improvements, note the performance of all your metrics in response to these adjustments. This will be a better gauge than anything else of whether your improvements are truly what is needed to help maximize your conversions and boost sales. 

Related Post