Measuring Performance

By default, an app generated from enact create with Enact CLI includes a performance relayer that allows you to measure and analyze the performance of your application using different metrics.

To measure any of the supported metrics, you only need to pass a function into the reportWebVitals function in index.js:

reportWebVitals(console.log);

This function is fired when the final values for any of the metrics have finished calculating on the page. You can use it to log any of the results to the console or send to a particular endpoint.

Web Vitals

Web Vitals are a set of useful metrics that aim to capture the user experience of a web page. In Create React App, a third-party library is used to measure these metrics (web-vitals).

To understand more about the object returned to the function when a metric value is calculated, refer to the documentation. The Browser Support section also explains which browsers are supported.

Sending results to analytics

With the reportWebVitals function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example:

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  const url = 'https://example.com/analytics';

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

reportWebVitals(sendToAnalytics);

Note: If you use Google Analytics, use the id value to make it easier to construct metric distributions manually (to calculate percentiles, etc…).

function sendToAnalytics({ id, name, value }) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate
  });
}

reportWebVitals(sendToAnalytics);

Read more about sending results to Google Analytics here.