How to Measure Website Performance

Several approaches and tools exist for measuring website performance. However, the basic premise remains: use a tool to analyze critical metrics and make the necessary site changes to further optimize them.

This article explores various metrics and tools. We also discuss how to read the various reports the tools generate and further optimize the user experience.

Summary of key website performance measurement concepts 

How to measure website performance—overview

Before discussing the methods of measuring website performance, let’s consider what you should measure.

Metrics that measure website performance

Tools for measuring website performance

Google PageSpeed Insights is a free tool for assessing web performance. It primarily reports in Core Web Vitals and reports your site performance as poor, needs improvement, or good. It also provides speed improvement suggestions for mobile and desktop web page versions.

WebPageTest is another tool that provides more comprehensive reporting beyond the Core Web Vitals. Tests are conducted from various global locations and real browsers. The free tier offers powerful visualizations like waterfall charts and film strips (explained in the next section). 

The pro version lets you measure your carbon footprint. You can also conduct experiments. This enables you to make changes and observe the performance impact without altering your actual website. This feature can significantly reduce the time and effort required for website development. You also get API access to integrate the tool into developer workflows.

Reading your website performance measurement results

Tools like WebPageTest report your performance metrics using different scores and charts. We describe some common methods below.

Lighthouse scores

Lighthouse is an open-source Chrome developer tool for basic performance analysis. Different tools integrate Lighthouse and use the same scoring method to measure performance.

Lighthouse assigns a score between 0 to 100 across five different categories:

• Progressive Web Apps (PWA) checks for mobile optimization, HTTPS security, and other modern features.
• Performance assesses your FCP, LCP, Speed Index, CLS, time to interactive, and total blocking time.
• Accessibility assesses various website design elements based on the axe user impact assessments, such as accessible buttons and color contrast ratios.
• Best practices assess whether your website implements different best practices, such as a valid doctype declaration, optimized images, and suitable page titles.
• SEO checks for SEO best practices like crawlable links, valid robots.txt, and meta descriptions.

You can conduct Lighthouse performance tests with various device configurations. The default settings for mobile and desktop differ in more than just screen size or the user agent used for device identification. You can choose different device configurations to influence other elements of the test environment.

• Network latency: how long does data to travel between the client and the server?
• Network bandwidth: how much data can be exchanged between client and server per second?
• CPU speed: how quickly can the browser run code or perform tasks like rendering page content?

You can limit network speed to the parameters specified in the test configuration when the test is conducted on a PC with a fast internet connection. Lighthouse’s mobile scores and metrics are significantly lower because the simulated test environment runs much more slowly on mobile.

So, how is the performance score in a Lighthouse test actually calculated? We summarize in the table below.

Waterfall charts

Waterfall charts map out all the resources on your web page, organizing content by how long they take to load and when they load.

Is JavaScript slowing down your site speed? Are your large images consuming all of your bandwidth? You also want to check whether your resources are being correctly cached and how they impact page performance. That’s where waterfall charts come in handy.

Important elements in a waterfall chart are:

Key

The key shows three information types,

• Information about the connection status (DNS lookup, connection established)
• The requested resource type (e.g., HTML, images, etc.)
• Miscellaneous events (wait, JavaScript execution)

The moment at which the user’s browser requested the resource is indicated by the light shade. The dark shade indicates the actual download point of the resource.

Request list

A list of resources the browser identifies on a webpage, along with the sequence in which they were requested. The request number is displayed on the left, and a yellow lock icon indicates whether the request is made through a secure connection (HTTPS).

Request timeline

The timeline displays time on the horizontal (x) axis and each request made on the vertical (y) axis. It includes the discovery (wait) phase, the moment requests are sent, and the eventual downloading of resources. 

CPU utilization

It displays the CPU usage of the current webpage at any given time, ranging from 0 to 100%.

Bandwidth In

This serves as a signal that data has entered the browser. You can use the visualization to quickly observe when the browser is wasting time and when it is working productively. Since the absolute scale isn’t particularly precise, it might be disregarded. 

Browser Main Thread

This graph visualizes what the browser’s main thread is doing at any specific point in time (x-axis). The y-axis shows the percentage from 0 – 100%.  

Page is Interactive

This graph indicates when the main thread is blocked.

Vertical lines

You can see the key for each of the colored vertical lines below the “Waterfall View” header as seen below:

The table below summarizes the meanings of the different colored lines in the chart.

Filmstrip View

Lighthouse scores and waterfall charts show how your website performs behind the scenes. However, user perception is a key aspect of web performance that is difficult to understand from numbers alone. You want to measure what the user “feels” during a page load, but web pages load too quickly for our eyes to break down the process into discrete steps. 

That’s where the filmstrip view comes in. It takes periodic screenshots of the page content above the fold and displays each image in chronological order. This allows you to visualize how the page unfolds for the user, like a series of static photos depicting a galloping horse, filmed by Eadweard Muybridge in 1878.

The film strip helps you visualize the end-user page load experience. Long runs of unchanging or blank images tell you that the page is too slow. You can also observe when content important to the user actually appears. It thus bridges the gap between context-agnostic metrics and user perception.

You can align the image with places of interest by dragging it left and right. In the example below, the film strip and the page’s rendering start point are aligned.

Comparative view

Ultimately, you measure website performance to improve it. This involves gathering insights and implementing the necessary code changes.

A comparative view shows the performance impact of any changes made. It compares two test runs side-by-side.

For example, in WebPageTest, you can see your recent test runs under the test history tab.  

Select the tests you want to compare, and click the “Compare Selected Tests” button. This will take you through a report similar to the filmstrip view discussed above, but in this view, the two results will be side by side. You can visually see the impact of changes made.

The waterfall, graphs, and bar charts are also visible, comparing different metrics side-by-side.

WebPageTest analyzes your website’s performance and provides actionable recommendations for optimization. With WebPageTest Pro, you can take this further by running experiments to test the impact of suggested changes—without making any modifications to your live site. That way, you can try different changes without impacting your users and roll out only those that deliver the most value to you.

Best practices in website performance measurement

The following best practices will help you ensure accurate, consistent, and meaningful results.

Clear browser cache

Cached files can significantly speed up page load times on subsequent visits, leading to misleading results. Always clear the browser cache or use incognito mode to simulate a first-time visitor experience.

Disable browser extensions

Browser extensions can affect page load times by adding extra scripts or altering how pages are rendered. Disable them to avoid skewing the performance data.

Test from multiple systems

Different devices and browsers can have varying performance characteristics. Test on various devices (desktop, tablet, mobile) and browsers (Chrome, Firefox, Safari) to comprehensively understand your site’s performance.

Analyze all site versions

Mobile and desktop versions of a site can behave differently due to varying screen sizes, network conditions, and content delivery strategies. Ensure both versions are optimized and tested separately.

Consider user location

Geographic location affects latency and load times due to the distance from servers or content delivery network (CDN) endpoints. Test from locations representative of your user base to understand regional performance differences.

Test critical pages

Focus on pages critical to user experience, such as the homepage, product pages, checkout processes, or landing pages. These are often the most visited and have the greatest impact on user satisfaction.

Document test scenarios

Consistent documentation of the scenarios being tested (e.g., specific user flows, page elements, or dynamic content) helps compare results over time and identify which changes may impact performance.

Go beyond Core Web Vitals

WebPageTest provides detailed performance insights, but it’s one component of a comprehensive monitoring approach. Complement synthetic testing with Real User Monitoring (RUM) to gain real-time insights into user behavior and experience, giving you a complete view of your website’s performance.

LM Internet Performance Monitoring, powered by Catchpoint, leverages one of the largest observability networks in the industry, with over 3,000 vantage points worldwide. This coverage lets you measure user experience across critical locations and service providers, helping you detect and resolve performance issues before they affect your users.

Performance issues can stem from third parties in your internet stack, such as DNS, APIs, or other services. Internet Performance Monitoring helps you avoid blind spots and includes them in your website performance analysis.

FAQs