page-timing

import { navigation, paint } from 'page-timing';
(async () => {
 const results = await Promise.all([
 paint(),
 navigation()
 ]);
 const metrics = Object.assign(...results);
 fetch('/browser-performance-metrics', {
 method: 'POST',
 body: JSON.stringify({
 page_name: 'my page',
 metrics
 }),
 });
})();

API endpoints

Metrics

More functions

fps

import { fps } from 'page-timing';
const frames_per_second = await fps();
console.log({ frames_per_second });

const frames_per_second = await fps({ sample: 5 });
console.log({ frames_per_second });

measure

import { measure } from 'page-timing';
async function myFunction(
 await wait(50);
 doSomethingElse();
}
await measure(myFunction, 'my-function');
// Example: Convert entries to a named array
Object.assign(
 ...performance.getEntriesByType('measure').map(
 ({ name, duration }) => ({[name]: duration})
 )
);
// {my-function: 53.35999990347773}
// Example: Retrieve a specific entry
const { duration } = performance.getEntriesByName('my-function');
// 53.35999990347773

Illustration of navigation events

Bonus

npm i page-timing web-vitals tti-polyfill

import { all, connection } from 'page-timing';
import { getLCP, getFID, getCLS } from 'web-vitals';
import TTI from 'tti-polyfill';
(async () => {
 const connectionInfo = await connection();
 // Send metrics from browser performance API
 send(await all());
 // Send web vitals to the same endpoint
 [
 [getLCP, 'largest_contentful_paint'],
 [getFID, 'first_input_delay'],
 [getCLS, 'cumulative_layout_shift'],
 ].forEach(
 ([ fn, name ]) => fn(
 ({ value }) => send({
 [name]: value,
 ...connectionInfo // Some connection info
 })
 )
 );
 TTI.getFirstConsistentlyInteractive().then(
 (time_to_interactive) => send({
 time_to_interactive,
 ...connectionInfo // Some connection info
 })
 ).catch(() => null)
})();
const send = metrics => fetch('/browser-performance-metrics', {
 method: 'POST',
 body: JSON.stringify({ page_name: 'my page', metrics }),
});