Easiest Way to Build a Performance Analytics Tool for Your Website

If you're seeking to develop your own performance analytics tool to gain real-time insights from user data without extensive effort, there's an excellent JavaScript library available. Developed by Google Chrome's team, this library is lightweight, easy to integrate, and free. It offers a straightforward way to record core web vitals along with other metrics crucial for diagnosing real user performance issues.

The web-vitals.js library leverages commonly supported Performance APIs in modern web browsers. I've written two comprehensive articles highlighting different features and data points of these Performance APIs.

To delve deeper into Performance APIs, explore the following articles:

- Performance API (first-input, largest-contentful-paint, layout-shift, event, long-animation-frame, longtask, paint)

- Performance API (resource, navigation)

These articles will enrich your understanding of how web-vitals.js utilizes Performance APIs for effective performance monitoring.

Performance Metrics

The web-vitals.js library offers six methods to capture comprehensive web vitals data from end users, with additional functionalities for better insight into performance bottlenecks:

• onLCP(): Measures the Largest Contentful Paint, indicating when the main content of a page becomes visible.
• onFID(): Tracks the First Input Delay, revealing the responsiveness of a page to user's first interaction.
• onCLS(): Monitors the Cumulative Layout Shift, showing how much content unexpectedly shifts on a page.
• onINP(): Captures the delay between user interaction and visual output, reflecting page responsiveness to user inputs.
• onFCP(): Records the First Contentful Paint, marking when the first content element is rendered.
• onTTFB(): Measures the Time to First Byte, reflecting the time taken to receive the first byte of page content.

There are two versions of web-vitals.js which are available for gathering performance analytics:

Standard Build

This version provides basic information about core web vitals and performance metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Input Latency (INP), however It does not offer detailed diagnostic data.

Below is an example of the standard information returned from the onLCP method

Attribution Build

The "attribution" build enhances the standard information by including diagnostic details with each metric. This extra information helps to pinpoint the root causes of performance issues, aiding in the identification of problematic areas and reasons for under performance. While the attribution build is slightly heavier, its added insights justify its use.

Below is an example of the information available under the "attribution" key returned from the onLCP method

Choosing the Right Version

The choice between the standard and attribution builds depends on your needs. If you simply require basic performance data and want to use it for monitoring, the standard build is enough. However, if you are encountering performance issues with specific core web vital and need detailed insights to diagnose the problem, the attribution build is recommended. Despite being slightly heavier, the attribution build's additional diagnostic information is valuable for troubleshooting, web-vitals library utilizes the buffered flag with PerformanceObserver, enabling it to retrieve performance entries that happened before the library was loaded.

This implies that you don't have to load the web-vitals.js library early to obtain precise performance data. Typically, it's recommended to defer loading this library until after all the crucial assets that might affect user experience are loaded.

Loading web-vitals.js

Here are examples of loading and utilizing web-vitals.js in different scenarios:

• Loading the "standard" build (using a module script)

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@3?module';
  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>        

• Loading the "standard" build (using a classic script)

<script>
  (function () {
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
    script.onload = function () {
      webVitals.onCLS(console.log);
      webVitals.onINP(console.log);
      webVitals.onLCP(console.log);
    };
    document.head.appendChild(script);
  })();
</script>        

• Loading the "attribution" build (using a module script)

<script type="module">
  import {
    onCLS,
    onINP,
    onLCP,
  } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>        

• Loading the "attribution" build (using a classic script)

<script>
  (function () {
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
    script.onload = function () {
      webVitals.onCLS(console.log);
      webVitals.onINP(console.log);
      webVitals.onLCP(console.log);
    };
    document.head.appendChild(script);
  })();
</script>        

Conclusion

Utilizing the data provided by web-vitals library, developers have the flexibility to implement various methods for capturing and visualizing this data below are some examples.

1. Establish a custom endpoint to which the recorded data is sent from the front-end of your web application to the back-end.
2. Leverage a predefined template within Google Tag Manager to set up a tag, facilitating the transfer of this data.
3. Directly send the data to Google Analytics by employing custom events in Google Analytics 4 (GA4).

Web Vitals represent a standardized approach to measuring and improving web performance, focusing on loading speed, interactivity, and visual stability. web-vitals.js simplifies the process of collecting and reporting these metrics, providing developers with a powerful tool set to optimize user experience effectively. By integrating web-vitals.js into web projects and leveraging its capabilities, developers can drive continuous improvements in web performance and deliver exceptional user experiences across all devices and browsers. Stay tuned for more insights into web performance optimization in future articles!

If you have any questions about this article or would like to share you bit, please feel free to reach out to me!