Measuring Nuxt Performance with Web Vitals

Measuring performance of web applications can be really tricky nowadays as there are several different factors that you need to take into account in order to correctly audit and measure the speed of your website. Thankfully, there are already great resources from Google that help us define and use performance metrics as well as useful tips and hints on how to make the values of these metrics significantly better.

If you have not yet seen web.dev make sure to check it out here for other great materials on developing better websites.

Metrics

Google recommends three metrics for measuring web performance:

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

• First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

These metrics are so called field data, which means that they are gathered through real user devices (not emulated environment as it is done in the case of Lighthouse). Because of that, you will get values that your users will get when accessing and using your website.

If your website is live for some time already, it is possible that some data have already been stored about it from the real users. You can verify that by using CrUX (Chrome User Experience) Report or by using Page Speed Insights:

• https://developer.chrome.com/docs/crux/

• https://pagespeed.web.dev/

I recommend you to check out both of these tools to measure the performance of your website better over time.

Nuxt

In order to measure the performance of Nuxt apps with Web Vitals, you can use a dedicated module that is a wrapper around the web-vitals package by Google that is auditing your website locally so that you can see the values of certain metrics and react to them. The module can be seen here.

To install it, we would go:

# yarn
yarn add --dev @nuxtjs/web-vitals

# npm
npm install --save-dev @nuxtjs/web-vitals

And the last thing we need to do in default example is to register a module in the modules array in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/web-vitals']
})

This module will gather those metrics on each page view, and send them to a provider using either Navigator.sendBeacon() or fetch(). You can set custom configuration to send the values of certain metrics to Google Analytics, Vercel Analytics, or log it in the browser by default, but you can also define some custom log provider where you will be storing metric results in the following form:

{
  href: 'http://localhost:3000/',
  name: 'LCP',
  value: 303.599,
  rating: 'good',
  delta: 303.599,
  entries: [
    {
      name: '',
      entryType: 'largest-contentful-paint',
      startTime: 303.599,
      duration: 0,
      size: 5698,
      renderTime: 303.599,
      loadTime: 0,
      firstAnimatedFrameTime: 0,
      id: '',
      url: ''
    }
  ],
  id: 'v3-1669725914225-9792921995831',
  navigationType: 'reload'
}

For more info about this check out the Providers section in the documentation here.

Summary

This is just the beginning of how you can measure web performance but it should also give you a solid background on what could and should be measured.