Web performance metrics are quantifiable indicators to evaluate and enhance website and web application speed, responsiveness, and overall user experience. They provide critical insights regarding loading times, user interactions, and visual stability. Stakeholders can identify improvement areas, optimize resource usage, and ensure a smooth, efficient user experience across various devices and network conditions.
Optimized sites lead to positive user experiences, boost engagement and conversions, and enhance brand reputation. This article explores 25+ essential web performance metrics, categorized into seven groups for clarity.
Key web performance metrics summarized
The rest of the article explains these metrics in detail.
Site speed metrics
Site speed metrics evaluate how quickly a webpage loads and becomes usable for visitors. They are critical for understanding server performance, network latency, and overall user experience.
They indicate two aspects—perceived performance and actual performance. For example, if a page loads quickly but a video the site visitor wants to watch loads last, actual performance is good, but perceived performance is poor.
DOM Content Loaded (DCL)
DOM Content Loaded represents when the initial HTML document has been completely loaded and parsed without waiting for external resources like stylesheets or images to finish loading. This metric is crucial for understanding when the page structure is ready for JavaScript manipulation.
A fast DCL allows for quicker interactivity and improves perceived performance. Optimizing DCL requires minimizing render-blocking resources and optimizing the script loading order.
Time to First Byte (TTFB)
Time to First Byte measures how long a user's browser takes to receive the web server's first byte of page content. It indicates server responsiveness and network latency. A low TTFB means a fast initial server response, which is essential for overall page load speed.
TTFB is affected by factors like server configuration, network conditions, and DNS lookup time. Optimizing TTFB improves perceived page load times and user experience.
Load time
Load time measures the duration from the start of the page load to when all resources on the page, including images, scripts, and stylesheets, have finished loading. It provides a comprehensive view of the total time it takes for a page to be fully rendered and functional.
However, there are cases when load time might not accurately reflect when a page becomes usable for the visitor. For example, a page may take several seconds to fully load all resources, but the primary content (such as text or initial images) could be visible and interactive much earlier. This is common with progressive web apps, where key elements are prioritized for loading before the rest of the content.
Another instance is when a website uses lazy loading, where images and other media load only as the user scrolls down. It reduces initial load times but still makes the full load time seem longer. In such scenarios, even though the complete load time is high, the user can interact with the page sooner, increasing perceived speed.
Load time is essential for understanding the overall performance and identifying bottlenecks in resource loading. Optimizing load time requires techniques like lazy loading, resource compression, and minimizing HTTP requests.
Speed Index
Speed Index measures how quickly the visible parts of a web page are populated. It calculates the average time at which visible page components are displayed. A lower score indicates a faster visual rendering of the page content. This metric helps understand the perceived loading speed from a user's perspective.
Improving the Speed Index requires you to:
- Optimize above-the-fold content (webpage components you can see without scrolling)
- Reduce render-blocking resources
- Prioritize critical rendering paths.
Server Response Time
Server Response Time measures how long it takes for a web server to respond to a browser request. It is crucial to understand backend performance and its impact on page load times. Factors influencing this metric include server hardware, software configuration, application logic, and database queries. Optimizing server response time requires improving server-side caching, optimizing database queries, and upgrading server infrastructure.
User-centric metrics
User-centric metrics focus on how real users experience website performance. They indicate the website’s responsiveness to ongoing user interactions. These metrics help gauge user satisfaction and engagement.
First Paint (FP)
First Paint is when the browser renders anything visually different from what was on the screen before navigation. This could be a background color change or the first elements of the page layout. FP signifies the start of the page rendering process and indicates how quickly users get the first visual feedback that the page is loading. It provides a sense of responsiveness even though it doesn't necessarily mean helpful content is displayed. Improving FP enhances perceived performance and user satisfaction.
{{banner-34="/design/banners"}}
First Contentful Paint (FCP)
First Contentful Paint measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. This could be text, images, SVGs, or non-white canvas elements. It indicates when users first see something meaningful on the page for feedback that the page is loading.
A fast FCP contributes to a positive user experience by reducing perceived load times. Improving FCP involves optimizing the critical rendering path, reducing server response times, and minimizing render-blocking resources.
Largest Contentful Paint (LCP)
Largest Contentful Paint measures the render time of the largest image or text block visible within the viewport relative to when the page first started loading. It marks the point in the page load timeline when the page's main content has likely loaded. A fast LCP helps reassure the user that the page is helpful.
Improving LCP requires optimizing the loading of key page elements, prioritizing above-the-fold content, and ensuring efficient delivery of critical resources.
Interaction to Next Paint (INP)
This metric measures the time elapsed between a user's interaction, such as a click or tap, and the subsequent visual update on the screen. This metric provides insights into how quickly a website responds to user actions.
A lower INP indicates that the website is highly responsive, allowing users to see the results of their actions almost immediately. Developers and website owners can identify performance bottlenecks and optimize their sites to ensure users experience smooth interactions for satisfaction and engagement.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures the sum total of all individual layout shift scores for every unexpected layout shift during the entire page lifespan. Layout Shift is the unexpected movement of visible elements on a web page as it loads, such as images, buttons, or text shifting position without user interaction. A layout shift occurs when a visible element changes its position from one rendered frame to the next.
CLS quantifies how often users experience unexpected layout shifts. A low CLS ensures the page is delightful. Improving CLS involves strategies like:
- Specifying size attributes for images and videos
- Avoiding inserting content above existing content, and
- Using transform animations instead of animations of properties that trigger layout changes.
A transform animation uses transform: translateX(100px) to slide an element across the screen. This affects the element's position but doesn’t cause other elements around it to change.
Animation of properties uses left: 100px to move the same element. This changes the element’s position but also requires the browser to recalculate the layout around it. It impacts other elements and causes a heavier performance load.
Time to Interactive (TTI)
Time to Interactive measures the time from when the page starts loading to when it is visually rendered, its initial scripts (if any) have loaded, and it's capable of reliably responding to user input quickly. A fast TTI ensures that users can interact with the page soon after it appears loaded. Improving TTI involves:
- Reducing JavaScript execution time
- Deferring or removing non-critical JavaScript
- Minimizing main thread work.
Resource metrics
Resource metrics analyze the various components that contribute to webpage loading and performance. Use them to identify optimization opportunities, such as reducing file sizes or minimizing requests to improve loading times.
Page weight
Page weight refers to the total web page size, including all HTML, CSS, JavaScript, images, and other resources that need to be downloaded. It indicates the overall network load and the time it might take to fully download a page, especially on slower connections. A lower page weight generally leads to faster load times and better performance, particularly on mobile devices. Optimizing page weight metric involves compressing images, minifying code, leveraging browser caching, and removing unnecessary resources.
Number of HTTP requests
The Number of HTTP requests metric counts how many separate requests a web page makes to load all its resources fully. Each request adds to the overall load time, as the browser needs to set up connections and wait for responses. Reducing the number of requests can significantly improve page load times, especially on congested networks. Strategies to optimize this metric include:
- Concatenating files (combining multiple CSS or JavaScript files).
- Using CSS sprites for images.
- Implementing lazy loading for non-critical resources.
Transfer size
Transfer size measures the data transferred over the network to load a web page, including headers and compressed file sizes. This metric is essential for understanding a website's real-world performance, especially on mobile networks or areas with limited bandwidth. A smaller transfer size generally leads to faster load times and lower user data costs. Optimizing transfer size metric requires compressing resources, leveraging browser caching, and using efficient data formats.
Resource timing
Resource timing provides detailed timing information for each resource loaded by a page. This includes metrics like redirect time, DNS lookup, TCP connection, SSL negotiation, request send, waiting (TTFB), and content download. Resource Timing is crucial for identifying bottlenecks in resource loading and understanding the performance of individual page components. This detailed breakdown allows developers to pinpoint specific areas for optimization, such as improving server response times or optimizing resource delivery.
Memory usage
Memory usage measures how much memory a web page consumes in the browser. This metric is essential for understanding the overall website efficiency, especially on devices with limited resources. High memory usage leads to slower performance, crashes, and poor user experience, particularly on mobile devices. Optimizing memory usage often involves efficient JavaScript coding practices, avoiding memory leaks, and adequately managing DOM elements.
{{banner-37="/design/banners"}}
Backend performance metrics
Backend performance metrics assess the efficiency of server-side processes that support web applications. Monitoring them ensures server reliability and responsiveness under varying loads.
Requests per second
Requests per second (RPS) measures the requests a server can handle in one second. It indicates server capacity and performance under load. A higher RPS means the server can handle more traffic efficiently. However, increasing the number of requests can strain server resources, leading to slower responses and a higher likelihood of errors. Maintaining the balance between response time and error rate ensures the server can handle traffic efficiently without compromising speed or stability. Optimizing RPS often involves improving server hardware, optimizing application code, implementing caching strategies, and load balancing across multiple servers.
Error rate
Error rate measures the request percentage that results in errors (such as HTTP 500 status codes) compared to the total requests. This metric is vital for understanding the reliability and stability of a web application. A low error rate indicates a more stable and reliable system. High error rates lead to poor user experience and lost business. Improving error rate often involves robust error handling, thorough testing, monitoring, and quick resolution.
User engagement metrics
User engagement metrics measure how effectively a website retains visitors and encourages interaction. They provide insights into user behavior and content effectiveness, helping businesses refine their strategies to enhance engagement.
Bounce rate
Bounce rate measures the visitor percentage that navigates away from the site after viewing only one page. This metric is crucial for understanding user engagement and the effectiveness of landing pages. A high bounce rate indicates issues with content relevance, user experience, or page load times. However, a high bounce rate might be expected for some types of sites (like blogs). Improving the bounce rate involves enhancing content quality, improving site navigation, optimizing page load times, and ensuring the site content meets user expectations.
Page views per session
Page Views per Session measures the average number of pages a user views during a single website visit. This metric is essential for understanding user engagement and the effectiveness of site navigation. A higher number of page views per session generally indicates that users find the content engaging and explore the site more deeply.
Improving this metric involves creating compelling content, optimizing site navigation, implementing effective internal linking strategies, and ensuring fast page load times across the site.
Average session duration
Average session duration measures the average user session length on a website. This metric is crucial for understanding how engaging and valuable users find your content. A longer average session duration generally indicates that users are finding the content relevant and are spending time exploring the site. However, the ideal session duration varies depending on the type of website.
Improving average session duration requires creating high-quality, relevant content, optimizing site navigation, and ensuring a smooth user experience across all pages.
Technical performance metrics
Technical performance metrics evaluate specific aspects of website performance that can affect user experience. They help developers identify performance bottlenecks and optimize code for better user experiences.
Total Blocking Time (TBT)
Total Blocking Time measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI), where the main thread was blocked for long enough to prevent input responsiveness. It is crucial to understand the interactivity and responsiveness of a page during load. A high TBT negatively impacts user experience, as the page appears unresponsive. Improving TBT involves,
- Optimizing JavaScript execution
- Breaking up long tasks
- Minimizing main thread work during page load.
The following figure indicates the time the main thread gets blocked due to long tasks.
Long Tasks
Long Tasks are any tasks that take more than 50 milliseconds to execute on the main thread. This metric is important for understanding potential causes of unresponsiveness in web applications. Identifying and optimizing long tasks significantly improves a web page's responsiveness and interactivity. Strategies for improving this metric include code splitting, using web workers for heavy computations, and optimizing JavaScript execution. You can use CatchPoint to determine long tasks more conveniently.
Internet Performance Monitoring (IPM) Metrics
The types of monitoring presented in this section are part of what we collectively refer to as Internet Performance Monitoring (IPM), which is meant to observe the performance of services from third-party providers that comprise the Internet stack. You can read this page to learn more about the Internet stack.
DNS monitoring
DNS monitoring is a critical process that involves tracking and analyzing the availability, performance, and security of DNS infrastructure. You monitor zone transfers, verify DNS records, and analyze query patterns to detect potential attacks like DNS floods or spoofing. Organizations ensure the reliability of their online presence, optimize performance and maintain security by identifying issues before they impact users or business operations.
DNS monitoring also includes tracking response times from authoritative nameservers, validating DNSSEC signatures, and monitoring the propagation of DNS changes across the internet.
To assess global DNS performance, IBM and Catchpoint collaborated to measure DNS speeds for over 2,000 popular websites. Their tests, conducted during peak internet traffic, revealed significant performance differences between authoritative DNS providers. Read this report to learn more about these findings.
CDN performance
CDN performance metrics assess the efficiency and effectiveness of Content Delivery Networks in distributing web content. These metrics include response times, cache hit ratios, and geographic distribution of content delivery. Monitoring CDN performance helps organizations optimize content delivery, reduce latency, and improve user experience.
Additionally, CDN performance monitoring involves analyzing throughput, origin shield effectiveness, and the performance of different content types (e.g., static assets, dynamic content, streaming media). It also includes monitoring CDN health, load balancing efficiency, and the impact of CDN configurations on overall website performance.
By closely tracking these metrics, organizations can make data-driven decisions to optimize their CDN strategy, enhance global content delivery, and provide a fast and reliable user experience across diverse geographic regions and network conditions.
Network transit latency
Network transit latency metrics measure the time data travels between different points in a network. This includes factors like routing efficiency, network congestion, and physical distance. Monitoring network transit latency is needed for understanding and optimizing the overall performance of digital services, as it directly impacts user experience and application responsiveness across various geographic locations.
Moreover, network transit latency monitoring involves analyzing packet loss, jitter, and round-trip times across different network paths and providers. It helps identify bottlenecks, inefficient routing, and potential network issues affecting service quality. The Border Gateway Protocol (BGP), used between Internet Service Providers (ISP) to hand off traffic, can also cause delays or security breaches and should be regularly monitored. Organizations can proactively address network performance issues by continuously monitoring these metrics, optimizing routing decisions, and ensuring consistent service quality.
API performance metrics
API performance metrics evaluate the speed, reliability, and efficiency of Application Programming Interfaces. These metrics typically include response times, error rates, and throughput. Monitoring API performance is essential for ensuring smooth integration between different software systems, maintaining service level agreements, and identifying bottlenecks or issues that could affect the functionality of applications relying on these APIs.
API performance monitoring tracks metrics such as request volume, payload sizes, and API availability across different endpoints and methods. It also involves analyzing API usage patterns, identifying frequently used endpoints, and monitoring rate limiting and throttling effectiveness. Advanced API performance monitoring may include synthetic testing to simulate user interactions and real-user monitoring to capture actual user experiences.
Impact of web performance metrics on business goals
By optimizing core metrics, businesses can significantly improve user satisfaction, which has a ripple effect on key business goals. Enhanced web performance leads to lower bounce rates, increased time spent on site, and more conversions, whether product purchases, form submissions, or content consumption.
The impact of web performance optimization is not limited to improved user experience. Faster websites have lower operational costs and require fewer server resources and bandwidth to deliver content efficiently. By investing in performance optimization, businesses can reduce infrastructure costs and enhance scalability, ensuring their websites handle higher traffic volumes without compromising speed or usability.
Let’s look at some real-world examples.
Pinterest implemented various optimizations across the front-end, network, and backend to improve metrics like overall page load time and user-perceived wait time. These improvements led to a 40% decrease in user wait time, a 15% increase in SEO traffic, and a 15% increase in signup conversion rate. The multiplicative effect of increased traffic and conversion rate made this initiative Pinterest's biggest user acquisition win in 2016. It significantly boosted web and app signups.
The BBC found that for every additional second a page takes to load, 10% of users leave. They shifted focus to maintaining speed under high load, even at the cost of temporarily disabling some features. They implemented strategies such as caching and CDNs, optimizing page generation, and leveraging client-side JavaScript to increase user retention. Their approach effectively handled massive traffic spikes during major events like the Olympics. They could serve over 100 million devices during peak times.
The Catchpoint platform allows you to monitor all the metrics listed above and view them in conjunction with your business metrics to get a complete picture of your optimization requirements. You can collect all the metrics in a centralized system and analyze them visually to quickly identify the factors slowing down your website and what needs to be done to fix it.
Conclusion
Performance metrics are crucial in achieving business goals, such as higher conversion rates, reduced bounce rates, and increased user loyalty. They also significantly impact search engine rankings, as search engines like Google increasingly prioritize fast, responsive websites in their algorithms. Consequently, optimizing these metrics enhances the overall user experience, drives organic traffic, and improves visibility in search engine results.
{{banner-39="/design/banners"}}