Measuring web performance metrices in TypeScript front end program

0 votes

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

May 31 in TypeSript by Logan
• 1,580 points
12 views

1 answer to this question.

0 votes

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.

answered Jun 1 by Nina
• 2,900 points

Related Questions In TypeSript

0 votes
1 answer

What is TypeScript and why would I use it in place of JavaScript?

TypeScript is a superset of JavaScript which primarily ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
8 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
38 views
0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
28 views
0 votes
1 answer

How do you typecast in TypeScript?

Casting: return this.createMarkerStyle(<MarkerSymbolInfo> symbolInfo); Or Casting compatible with tsx mode: return ...READ MORE

answered Jun 1 in TypeSript by Nina
• 2,900 points
17 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
471 views
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10 in Others by Rahul
• 8,980 points
413 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 10,840 points
508 views
0 votes
1 answer
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
17 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP