Performance metrics for Vuejs

I’m looking for performance metrics for a Vue app. Metrics regarding the whole app but also for some specific components.

I know that I can use Vue.config.performance = true; and then run the performance dev tools and maybe I could use something like Performance Observer in order to do specific things on new performance events.

I was wondering, if there are any libraries or services that could help or provide more metrics regarding the performance. The idea would be to have a ui with these metrics and could be visible for non-devs.

Any ideas?

Answer

You can use web-vitals library from the npm. It supports core web vitals metrics:

• Largest contenfull paint ,
• First input delay
• Cumulative layout shift

Example will be looks like this:

import { getLCP, getFID, getCLS } from "web-vitals";

const reporter = (result) => console.log(result);

getCLS(reporter);
getFID(reporter);
getLCP(reporter);

Inside handler you can log the result to the console or send them your report system for further analysis.

It’s also possible to get CDN version from here