Measuring web performance metrices in TypeScript front end program

Question

My front end is written in Angular9, TypeScript.

I am interested to annotate my app with different page load time performance metrics (both browser timing as well as DOM handling) as suggested by W3 working group W3 performance working group.

How can I start importing the Performance object in my TypeScript app such that I can start monitoring the different performance metrics as mentioned here.

Thanks, Pradip

Answer 1

The performance metrics are provided by the browser itself. So you don't really need to do anything.

However if you are using specific metrics, you could use the web vitals project. given below is a use case:

import {getFCP} from 'web-vitals';

// Measure and log the current FCP value,
// any time it's ready to be reported.
getFCP(console.log);

Sice it is open sourced, you can check how they use APIs' a well.