learn

Web Performance Monitoring—Strategies and Best Practices

Introduction

Web performance monitoring is the process of regularly checking a website’s responsiveness, speed, and overall performance to ensure a smooth and positive user experience.

Web performance monitoring began in the 1990s with simple manual checks. As websites evolved, the focus shifted to tracking server response times and user experiences using tools like Google Analytics and WebPageTest. Businesses now use web performance monitoring to identify and fix issues early and keep their websites fast and reliable.

This article explains the concept of web performance monitoring, its use cases, various monitoring strategies, and recommended best practices.

Summary of key web performance monitoring concepts

Concept Description
Web performance monitoring The process of tracking the overall performance of a website to ensure a seamless user experience.
Core Web Vitals Core Web Vitals are metrics that measure a website's loading speed, responsiveness, and visual stability to assess overall user experience.
Web performance monitoring strategies Key web performance monitoring strategies include core web vitals, synthetic user monitoring, real user monitoring, and internet performance monitoring.
How to monitor web performance You can conduct a quick performance test with WebPageTest and generate a report for free. For a comprehensive, ongoing performance report, you can implement an Internet Performance Monitoring (IPM) solution with synthetic and real user monitoring capabilities.
Best practices for monitoring web performance Some recommended best practices include continuous monitoring, tracking relevant metrics (such as conversion rate, bounce rate, and the full Core Web Vitals metrics), configuring alerts & notifications, and choosing the right monitoring tool.

Web performance monitoring use cases

Web performance monitoring is important whether you are part of the development team focused on coding or the DevOps and SRE (Site Reliability Engineering) team concerned with continuous delivery and scalability.

For developers

Web performance monitoring tools provide real-time insights into performance bottlenecks. Developers can identify and fix issues before they affect end users.

Monitoring reveals the loading and usage patterns of resources like scripts, pictures, and stylesheets. Developers use this information to reduce load time and enhance overall web performance.

Performance monitoring also highlights the impact of code changes on the website. Developers can optimize code more effectively, creating a maintainable and clean code base.

For DevOps

Detailed performance metrics and monitoring alerts help your DevOps team diagnose and resolve incidents faster, increasing the website's reliability and availability.

Web performance monitoring data helps DevOps understand traffic patterns and performance under load. They can forecast resource needs and efficiently scale infrastructure to handle traffic fluctuations without compromising performance. The insights gathered from monitoring ensure effective resource utilization and reduce maintenance costs.

Monitoring also supports compliance by helping DevOps teams quickly identify and resolve security flaws.

Web performance monitoring strategies

Comprehensive monitoring typically requires several different strategies.

Synthetic user monitoring

Synthetic user monitoring (also known as active monitoring) is a technique that uses scripts to simulate the path users might take while interacting with an application across different scenarios, locations, and devices. It involves multi-step transaction monitoring, web browser or mobile app simulation, and network tests (ping, traceroute). You can also test from various points in the global network of leading wireless and wireline service providers using customizable test frequencies.

It provides analytics and reporting with SLA tracking, dashboards, and alerts. You can analyze the simulation data to evaluate a website's performance, availability, and functionality for different user groups. You gain insight into:

  • How your application responds to typical user behavior
  • When downtime or failure occurs
  • Detecting slowdown or downtime during hours with low or no usage
  • Checking response time from hundreds of points around the globe
  • Security and endpoint usage

You can read more about synthetic monitoring and its working principle in this guide.

The notion of synthetic monitoring from various points in the global network (source: Catchpoint)

{{banner-19="/design/banners"}}

Real user monitoring

Real user monitoring (RUM) is a performance monitoring process that tracks real user interactions with a website or web application. You embed a set of JavaScript tags in your website. When a user visits the site, these scripts collect data on various performance metrics from the user’s browser. The collected real user data is then sent to the RUM platform, so you can analyze performance and understand how users interact with your site.

It offers comprehensive information on end-user experience for performance indicators like page load times, errors, and request durations. You can analyze current and historical application usage patterns to understand performance trends.

The concept of real user monitoring (RUM)

Core Web Vitals

Core Web Vitals are a set of Google metrics that measure a website's user-friendliness by evaluating its loading speed, interactivity, and visual stability. These metrics help ensure a great user experience and improve search performance.

The Core Web Vitals metrics include:

Core Web Vitals Metrics

To ensure you are meeting the recommended targets for these metrics for most of your users, aim to measure the 75th percentile of page loads, categorized by mobile and desktop devices.

The table below presents how Google qualifies the value ranges for these metrics.

Good Need improvement Poor
LCP <=2.5s <=4s >4s
INP <=200ms <=500ms >500ms
CLS <=0.1 <=0.25 >0.25

Core web vital acceptable value ranges (source)

Internet Performance Monitoring

Internet Performance Monitoring (IPM) provides detailed visual insight into the internet dependencies affecting application performance. These dependencies, also known as Internet Stack, include core internet systems, protocols, third-party dependencies, and web services that facilitate digital user experience.

Third-party dependencies that affect your website performance

The above diagram shows components that may be present along the transaction path between the end-user and your application’s interface. Effective IPM solutions like Catchpoint provide real-time insights into external services affecting your application’s performance, allowing you to identify and resolve issues proactively before they impact your end users. Catchpoint’s AI-powered IPM solution delivers a unified view of web performance, combining Domain Name Service (DNS) monitoring, Content Delivery Network (CDN) monitoring, BGP monitoring (the protocol governing the transfer of data across internet service providers), SLO monitoring, Real User Monitoring (RUM), and synthetic monitoring powered by the world’s largest Global Observability Network.

                         Internet Stack Monitored with IPM

Getting started with web performance monitoring

The first step in assessing website performance is using the free version of  https://webpagetest.org/ to score various aspects of your website’s load time and user experience in minutes. Follow the instructions below to get started:

  1. Navigate to https://webpagetest.org/
  2. Select the test type you want to generate from the options (the default option is ‘Site Performance’)
  3. Enter the web page URL you want to test (for the below example report, we used this URL)
  4. Select the test configuration you want (which can either be Mobile or Device)
  5. Start the test and wait a few seconds for the final results

The final report is categorized into different sections so that you can easily identify metrics of concern. The image below shows the report's ‘Page Performance Metrics’ section.

WebPageTest report for an example page

WebPageTest Pro version lets you go beyond analytics to actual website improvement. It lets you perform different no-code experiments directly in the tool to test the impact of changes on website performance. For example, you could pre-load an image in your experiment and check the impact on LCP metrics. You can make the changes in your experiment without changing your actual website.

Please note that WebPageTest is now an integrated part of Catchpoint's Internet Performance Monitoring platform. Consider upgrading to get a complete picture of your website's performance. It includes synthetic monitoring and RUM, along with internet performance data, to give you a full view of how your site performs globally. You can quickly determine how recent users experience your website and whether factors like DNS (Domain Name System) lookup and CDN (Content Delivery Network) caching are causing slowdowns. You can better understand and address performance issues from every angle.

Web Performance monitoring best practices

Here are some recommended best practices to keep in mind as you begin monitoring your site's performance:

Engage in continuous performance monitoring

Tracking metrics like Core Web Vitals is useful but insufficient for continuous performance monitoring in a production environment. Web performance monitoring is not a one-off or periodic operation; it has to be ongoing, consistent, and actionable to yield results. Ongoing Internet Performance Monitoring (IPM) is especially important to track real-time user experience metrics, including all its Internet system dependencies.

IPM tools allow you to analyze global trends in user experience and generate real-time alerts to pinpoint slowdowns and failures. The objective is to quickly identify and address performance issues as they arise, ensuring your website always performs optimally and is secure.

Track appropriate performance metrics

With so much data on the performance report dashboard, deciding which metrics to track can be overwhelming. The first point of call here is to have clear goals aligned with measurable metrics and KPIs. That way, you can narrow down the metrics most relevant to your goals, access the most valuable information, and avoid unnecessary noise.

Here are some of the top metrics you should monitor, categorized into two types:

  • Snapshot-in-time metrics provide a quick look into your website's performance at a particular time. Examples include Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
  • Ongoing real-time metrics identify trends and patterns over time and can be tracked with synthetic and real user monitoring (RUM) tools. Examples include page load time, error rate, DNS resolution time, and network latency.

We discuss these metrics in detail in our guide on website key performance indicators.

Set up alerts and notifications

Set up real-time alerts and notifications based on the metrics used for ongoing monitoring. This allows team members to respond promptly without watching the dashboard 24/7. For example, the setup below triggers the alert after four consecutive failed data points within a set time.

An alert setup that triggers in response to failed data points (Source)

This setup ensures the alert contains enough details for immediate action. Multiple consecutive failures indicate an urgent issue that affects user experience and also reduces the possibility of false positives to the barest minimum.

Automatically route alerts to the right team members according to priority and establish escalation procedures for unresolved alerts that remain so for a certain number of minutes or hours. Also, ensure they contain enough technical details so that whoever receives them can resolve or escalate the issue.

Last thoughts

Web performance monitoring is necessary for helping teams and businesses deliver high-performance experiences to their website users. Continuous checks using IPM tools are essential to monitor the transaction path across the internet stack proactively.

{{banner-37="/design/banners"}}