Jonathan Fielding, lead engineer at RVU, explained at HalfStack this year how developers may measure and analyze the performance of their sites. Synthetic data and real user metrics give a complementary vision of the site performance.
Fielding started with reminding the audience that a lot of talks on performance focus on the steps to take to make a website faster. Fielding will instead talk about how developers can gather their own data on their own users.
Fielding distinguished two types of data: synthetic data, which are usually obtained by running tests from a server that offers a controlled environment; and real user metrics that capture the interaction of real users with the measurement target.
In both measurement approaches, Fielding identified five key metrics that are good candidates for performance tracking: time to first byte (TTFB), first input delay, first contentful paint, largest contentful paint, and cumulative layout shift.
The time to first byte is the time it takes for a browser to receive the first byte of content. The first input delay measures the time from when a user first interacts with a page (e.g. clicking on a link) to the time when the browser is actually able to begin processing event handlers in response to that interaction. The 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. The largest contentful paint reports the render time of the largest image or text block visible within the viewport. The cumulative layout shift scores and aggregates all unexpected layout shifts that occur during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
Fielding gave an example of synthetic performance data collection leveraging headless browser browserless and lighthouse APIs. Fielding gave another example of real user metrics collection, this time relying on Google’s web-vitals:
// Start by importing the metric you want to get
import {getFCP} from 'web-vitals';
// Measure and log the current First Contentful Paint value,
// anytime it is ready to be reported
getFCP(log)
The performance measurement process usually includes the following steps: select which data to measure, store it, query it, and analyze it. Fielding gave examples of querying using Google’s BigQuery. Other tools like Google Analytics, or Google Tag Manager may also be used.
With the available data, developers may not only analyze snapshots at concrete points in time, but also track the evolution over time of the data, and assess the effects of changes made in the application.
The full talk is available online and contains many additional remarks and technical examples. HalfStack is a UI-centric, one-day, single-track conference focused on the possibilities of the JavaScript and web ecosystems. Due to Covid-19, HalfStack took place online in May 2020.