feat: experimental lcp hints in development mode

[Baroshem]

Closes #762

Largest Contentful Paint hints in development

This PR adds a new client only plugin that will be registered only in development mode. The main purpose of this functionality is to warn users using Image module in the browser console about popular performance issues with images such as:

1. Lazy loading LCP element with loading="lazy" attribute
2. Not using modern light image formats such as webp
3. Not using fetchPriority="high"
4. Not having width and height attributes set (bad for both LCP and CLS)
5. LCP loading in more than 2500 miliseconds
6. Not preloading the LCP element

How it works?

The plugin is using Performance Observer API under the hood to find the potential LCP element and measure metric values such as load time.

Later on, a set of statements is checking whether this LCP element matches the good practices and follows the Optimize LCP document values and recommendations. If not, warnings are displayed in the browser that would allow users to faster find performance bottlenecks and issues. Screenshot below for reference:

Todo

• Write documentation about this feature
• add configuration option to disable this functionality even in dev environment

Next steps

Keep in mind that this PR is just beginning of the hints that we can show to the users that would allow them to have a better performing website (and improve Lighthouse and Core Web Vitals score).

I have been thinking about developing a functionality that would fix these kind of issues automatically (something like fontaine plugin) but I failed because there is no way to detect LCP programatically (without access to browser) but maybe someone else here would have some interesting ideas for that.

Feedback

As always, I am opne for suggestions on what can be improved here. Let me know what can be done better or different way so that we can help users develop more performant websites :)

[netlify]

👷 Deploy request for nuxt-image pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	afe4120

[manniL]

A few ideas:

1. Add a config option to enable it, e.g. on staging servers (usually running on PRODUCTION env)
2. Add a hook so people can configure behavior (e.g. forwarding the error) when issues with LCP elements are detected providing the type of issue and ref to the element

[harlan-zw]

Nice idea!

Personally, I would say that these types of general performance warnings would be better suited in their own module, or possibly the web vitals module.

If the intent is to have LCP images created correctly, then maybe there's scope to add a new component in the @nuxt/image module that handles it:

• adds the image to be preloaded
• sets the fetch priority
• validates dimensions/format
• only lets you have a single instance of it

Couple of thoughts on your code:

• Image format: you're just checking the src, but it's quite possible that they either have no extension or are sending a webp regardless of the extension (i.e Cloudinary does this). Also what if they're using Avif?
• Could be worth checking that the render size of the image matches the actual image dimensions, Lighthouse does this iirc

[Baroshem]

Thanks for the feedback @manniL @harlan-zw

Alex:

1. I have been thinking about adding a hints boolean configuration option that when enabled, it will register the plugin even in non development rnvironments. Is this what you meant or would you like it to work a different way?
2. I am not so sure about this new hook. The hints are rather warnings than errors that are giving users hints about what they can do to have better results in LCP and in performance in general. I think this could be an overkill (to implement hooks) for such simple hints only and for now, I cannot find use cases in my head when someone would need to use it in other places in the app (but maybe its just me so if you have any example, please let me know 😀 )

Harlan:

I have been thinking initially to have these hints as a part of web vitals or nuxt-performance module but I eventually decided to go for Image module hints instead. Let me explain my decision. Web Vitals alreadh gives similr functionality as you are getting an onLCP with the value and the element. These hints could easily fit in there but Image module is much widely used than web vitals so I thought that I would add these hints here. Also, regarding nuxt-performance separate moduel. From such module, I would expect thst it could do certain perf improvements automatically for me (which wont be the case because majority of these hints are a recommendations, not written in stone rules). So having a module that would just display hints in the browser didnt make sense for me.

Regarding a new component for LCPImage. This could work, but some of these hints should be verified by the real user before applying. I might try to create a proof of concept component that would do that but at this point the most useful for me would be these hints that would let me know what I should to have a better result in LCP

1. I will add avif and other source checking like Cloudinary. This was just a proof of concept to see whether this makes any sense :)
2. That is a good recommendation! I will add it shortly

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Image	Edit on Studio ↗︎	View Live Preview	fef3a50

[rviscomi]

It could also be useful to show the LCP diagnostic metrics: TTFB, resource load delay, resource load time, and element render delay.

[Baroshem]

Thanks @rviscomi !

I think for these more advanced diagnostic metrics we could implement them as next features if this functionality will be useful :)

[Baroshem]

Any other feedback @manniL @harlan-zw @pi0 ? 🙂

[Baroshem]

@pi0 @danielroe

Can I do snything about this PR to be merged? :)

[dargmuesli]

@Baroshem why did you close this PR? 👀

[Baroshem]

@dargmuesli

It was there for about 6 months without any update from the package maintainers.

Also, we recently decided to create a package called nuxt hints that would show this and othe rkind of hints to the user so that he can easily make his app better

[dargmuesli]

I see, thank you for the explanation!
Related: #989 - happy to hear your feedback if you have any 🚀

[riddla]

nuxt hints

@Baroshem, where can I find more information about this package?

[Baroshem]

Hey @riddla

This is still in progress and to be honest, I cannot give you any estimation :(