Assets Hints for improved performance

[Baroshem]

Describe the feature

As we have Nuxt Image, Fonts and Scripts, I think it would be useful to detect common issues about these things (i.e. unoptimized fonts/scripts) and based on that instruct the user to download these modules.

I know that scripts tab is already there but I thought mainly about the Performance tab and detect issues and recommend official packages.

I can work on it if you agree! :)

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[Baroshem]

@huang-julien I can proceed with this.

My idea is to check if the page contains third party scripts and custom fonts fetched from another domain (i.e. googlefonts) and if they are present, display them as the issue for LCP metric for both logger and devtools tab.

These resource can affect the metric value as explained https://developer.chrome.com/docs/performance/insights/render-blocking.

So basically if either of them is detected, we add them to the metric issues and display in both logger and dev tools tab like following:
You have a third party script X that can block the render of the LCP element. Learn more https://developer.chrome.com/docs/performance/insights/render-blocking, Use Nuxt Scripts

WDYT? :)

[huang-julien]

Cool ! Go for it !

[huang-julien]

About image hints.
Users could provide their breakpoints through options and we could generate the best NuxtImage sizes prop per breakpoint. WDYT ?