Measuring and Optimizing Web Performance

User experience and web performance are closely related, with the speed of a website being a critical component of the overall user experience. A fast-loading website can significantly enhance user satisfaction, engagement, and retention, while delays can have the opposite effect. Let's look at some numbers.

A delay of just one second in page response can result in a 7% reduction in conversions - Akamai
47% of consumers expect a web page to load in 2 seconds or less, and 40% of people abandon a website that takes more than 3 seconds to load - Neil Patel
53% of mobile site visits are abandoned if pages take longer than 3 seconds to load - Google
Websites with faster loading times tend to rank higher in Google's search results
Pages that load within 2 seconds have an average bounce rate of 9%, while pages that take 5 seconds to load increase the bounce rate to 38% - Pingdom
A 2-second delay in load time during a transaction resulted in abandonment rates of up to 87%. This is significantly higher than the average abandonment rate of 67% - Radware

Photo by toine G on Unsplash

Understanding factors that attribute to slow page speeds is crucial for diagnosing performance issues and implementing effective optimizations. Here are some of the most common causes of slow page speeds:

Large File Sizes: High-resolution images, videos, and other media files can significantly increase the size of a webpage, leading to longer loading times. Optimizing these files through compression and proper formatting can help reduce their impact on page speed.
Unoptimized Code: Bulky code with unnecessary characters, comments, and unused scripts can slow down a website. Minifying and combining files (CSS, JavaScript) can streamline the code and improve load times.
Excessive HTTP Requests: Each resource (CSS, JavaScript, fonts, images, etc) on a webpage requires a separate HTTP request to load. Too many requests can overwhelm the server and slow down the page loading process. Reducing the number of elements on a page can minimize these requests.
Lack of Caching: Without proper caching strategies, each resource must be downloaded on page load. Caching stores copies of files so that returning visitors can load the page faster.
Poor Server Performance: The web hosting server's performance can greatly affect page speed. Overloaded servers, slow API/database calls, and inadequate hosting plans can all contribute to slow loading times.
Unoptimized Images: Images that are not properly optimized for the web can cause significant delays. This includes images that are too large, not compressed, or not in the right format.
External Embedded Media: Relying on external sources for media content can lead to slower page speeds, especially if the external server's response time is slow.
Network Latency: The physical distance between the user and the server can impact page load times. Users located far from the server may experience longer loading times.

Before addressing these issues, they need to be identified and measured. A variety of techniques and tools designed to analyze website performance and identify bottlenecks can be used to diagnose slow speeds. These tools provide insights into aspects such as file sizes, load times, and the efficiency of code execution. These tools generally rely on techniques such as performance auditing, code profiling and network analysis.

Tools

Google PageSpeed Insights: Provides performance analysis of a webpage for both mobile and desktop devices, offering recommendations for improvement.
Lighthouse: An open-source, automated tool by Google that audits the quality of web pages. It can be run in Chrome DevTools, from the command line, or as a Node module. Lighthouse provides insights into performance, accessibility, progressive web apps, SEO, and more.
WebPageTest: Offers detailed performance testing from multiple locations around the world, using real browsers at real consumer connection speeds, with detailed optimization recommendations.
GTmetrix: Analyzes the loading speed of a webpage, providing insights into how well it performs and offering actionable recommendations based on best practices.
Chrome DevTools: Built into the Google Chrome browser, DevTools provides a suite of web development tools, including a robust performance panel for analyzing runtime performance and network activity.

Sample Page Speed Analysis

Web Vitals

Web Vitals is a Google initiative designed to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Web Vitals focuses on three core aspects of user experience:

Largest Contentful Paint (LCP): This metric measures the loading performance of a web page. It reports the render time of the largest image or text block visible within the viewport. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. Some ways to improve LCP are to optimize and compress images, preload important resources and remove unnecessary third-party scripts.
First Input Delay (FID): This metric measures the interactivity of a web page. It reports the time from when a user first interacts with a page (i.e., when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. To provide a good user experience, pages should have an FID of less than 100 milliseconds. To improve FID, minimize the impact of third-party code, reduce JavaScript execution time, defer non-critical JavaScript and use browser caching to optimize the loading of resources.
Cumulative Layout Shift (CLS): This metric measures the visual stability of a web page. It reports the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. To provide a good user experience, pages should maintain a CLS of less than 0. To improve CLS, specify size attributes for images and videos, ensure ad elements have a reserved space and avoid inserting new content above existing content.

Web Vitals website

Please note that the metrics that make up Core Web Vitals will evolve over time. The current set focuses on three aspects of the user experience: loading, interactivity, and visual stability. It includes the above three metrics.

These metrics can be measured by using Google's web-vitals JavaScript library. This API internally uses the standard PerformanceObserver and other APIs like Largest Contentful Paint, Event-Timing, etc.

Other Metrics

Time to First Byte (TTFB): This metric measures the time it takes for a browser to receive the first byte of page content from the web server. TTFB is an important performance metric that measures the time it takes for a user's browser to receive the first byte of page content from the server, it is considered more of a server/network performance metric rather than a user experience metric directly. TTFB can influence the overall loading performance of a page and indirectly affect the Core Web Vitals, especially LCP.
First Contentful Paint (FCP): This metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. It is an important metric for understanding how quickly a user perceives that a webpage is loading.
Total Blocking Time (TBT): This metric 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's an important metric for understanding how non-interactive a page is before it becomes reliably interactive; however, it's more of a diagnostic metric rather than a core user experience metric.
Interaction to Next Paint (INP): This metric measures the time from when a user first interacts with a page to the time when the browser is able to render the next page.

Custom Metrics

The above user centered metrics are important and can be universally measured to create a baseline but there may be cases where measuring custom metrics can add value to your business. For example, if you have a single page application, you may want to measure the time it takes to go from one route/state to another. Or how much time it takes for a page to display data fetched from a database for logged-in users, etc. For these APIs, consider using the following APIs:

PerformanceObserver: This API is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
User Timing API: This API allows you to create application-specific timestamps in the browser's performance timeline.
Navigation Timing API: This API provides data that can be used to measure the performance of a website.
Long Tasks API: This API provides a way to measure responsiveness and identify performance issues caused by long-running tasks.
Server Timing API: This API allows web servers to provide performance timing information via HTTP headers.
Element Timing API: This API allows you to measure the performance of specific elements on a web page.
Resource Timing API: This API provides detailed network timing data for resources in a document.

More details about custom metrics can be found in the Custom Metrics article.

Integrating Web Performance Testing into DevOps

Integrating web performance testing into DevOps helps in identifying performance bottlenecks early in the development cycle, allowing for quicker adjustments and improvements. Here's how to effectively incorporate web performance testing into DevOps:

Using industry standards, competitor analysis, and your specific business requirements, define performance goals and benchmarks for your web application. Include metrics discussed above.
Integrate automated performance testing tools into your continuous integration/continuous deployment (CI/CD) pipelines. Tools like Lighthouse CI, WebPageTest API, or custom scripts can be used to automate testing.
While synthetic monitoring (using tools to simulate user interaction) is great for identifying potential performance issues, Real User Monitoring provides insights into how actual users experience your website. Integrating both approaches into your DevOps practices offers a comprehensive view of your web performance. There are various tools available for RUM: Retrace, New Relic, Datadog, etc.
Use performance budgets to set limits on the size and number of resources that can be loaded on a page. This can help prevent performance regressions and ensure that your web application meets your performance goals.
Monitor and analyze the performance of your web application in production to identify performance issues and make data-driven decisions about optimizations.

General strategies to improve performance

To provide a better user experience on your website/web app, there are several ways to improve performance and thus the Web Vitals metrics. Some common strategies include:

Optimizing images and other media to reduce their file size and improve loading times.
Minimizing the use of third-party scripts and optimizing the ones that are necessary to improve page load times.
Using lazy loading to defer the loading of non-critical resources until they are needed.
Minimizing layout shifts by reserving space for images and other media as they load.
Reducing the impact of third-party scripts on performance by deferring their loading or using asynchronous loading.
Optimizing server response times to improve Time to First Byte (TTFB).
Using a content delivery network (CDN) to cache and serve content from servers located closer to the user.
Implementing browser caching to store static resources locally and reduce the need to re-download them on subsequent visits.
Using a performance budget to set limits on the size and number of resources that can be loaded on a page.

Measuring and optimizing web performance is a continuous process that significantly impacts user experience and business outcomes. By focusing on metrics and Web Vitals, developers and businesses can prioritize efforts to enhance website speed, responsiveness, and stability. Implementing the recommended improvements for each Web Vital will lead to a noticeably better user experience, higher engagement, and improved conversion rates. Every millisecond counts.