Adding web-vitals: onFCP / onTTFB

[stephanelgrg]

Hello 👋

I tried nuxt/hints and it's working great, thank you 👏
Currently, in src/runtime/web-vitals/plugin.client.ts we only track INP, CLS, FCP.

Suggestion:
web-vitals package is also providing onFCP (FCP definition here) and onTTFB (TTFB definition here).

Few days ago I used it for playwright + web-vitals + PerformanceNavigationTiming (to also add pageLoad duration for example) to check page perf via integration tests.
So I would be happy to contribute and add FCP & TTFB for nuxt/hints if you think it's useful 🙏

[huang-julien]

Hello 👋 Thank you for your kind words!

The reason FCP and TTFB are not provided is that Nuxt Hints is currently dev-only. In development mode—especially in larger (often enterprise) projects. FCP and TTFB tend to have much higher values due to the dev server and your browser loading everything as unbundled.

This can be debated, though. We could probably log them as informational only rather than as warnings.

[stephanelgrg]

Hi 😁

Haha, you are right 😂 I was so focused on what I did with non regression tests that I forgot that in this case we are on a dev server. It would be a non sense to measure this here. My bad 😂

Any way, may I help you on anything for nuxt/hints? Don’t hesitate to ping me or DM me if you need help, I would be happy to contribute 👍

[huang-julien]

No worries And thank you very much! I think we'll end up allowing hints in production mode for reporting, but this will wait a bit, maybe in a V2.

For now we're always looking for more ideas ! Opening this discussion is already a very good start :p , of course if any feature requests gets accepted, people can work on it. I restructured the repo to make it easier to work on.