N
Nuxt•6mo ago
Flamenate

Very Poor Lighthouse Performance

Hi, sorry in advance for the very long post. I have been debugging for the past 3 weeks and I have run out of ideas. I have very poor lighthouse performance results in my (rather large) app. To start with, this is the output of nuxi info: 
------------------------------
- Operating System: Windows_NT
- Node Version:     v22.15.0
- Nuxt Version:     3.17.5
- CLI Version:      3.25.1
- Nitro Version:    2.11.12
- Package Manager:  yarn@4.9.1
- Builder:          -
- User Config:      srcDir, devtools, css, runtimeConfig, imports, features, modules, app, vuetify, fonts, critters, vite, vuefire, unocss, image, pwa, site, sitemap, nitro, hooks, viewport, compatibilityDate
- Runtime Modules:  vuetify-nuxt-module@0.18.7, @nuxt/image@1.10.0, @vueuse/nuxt@13.3.0, nuxt-jsonld@2.2.1, @vite-pwa/nuxt@1.0.4, @nuxtjs/sitemap@7.3.1, @pinia/nuxt@0.11.1, pinia-plugin-persistedstate/nuxt@4.3.0, @unocss/nuxt@66.2.0, nuxt-lazy-hydrate@1.0.0, nuxt-viewport@2.3.1, nuxt-vuefire@1.0.5, nuxt-viewport@2.3.1, @nuxt/eslint@1.4.1, @nuxt/fonts@0.11.4, @nuxtjs/critters@0.9.0  
- Build Modules:    -
------------------------------
------------------------------
- Operating System: Windows_NT
- Node Version:     v22.15.0
- Nuxt Version:     3.17.5
- CLI Version:      3.25.1
- Nitro Version:    2.11.12
- Package Manager:  yarn@4.9.1
- Builder:          -
- User Config:      srcDir, devtools, css, runtimeConfig, imports, features, modules, app, vuetify, fonts, critters, vite, vuefire, unocss, image, pwa, site, sitemap, nitro, hooks, viewport, compatibilityDate
- Runtime Modules:  vuetify-nuxt-module@0.18.7, @nuxt/image@1.10.0, @vueuse/nuxt@13.3.0, nuxt-jsonld@2.2.1, @vite-pwa/nuxt@1.0.4, @nuxtjs/sitemap@7.3.1, @pinia/nuxt@0.11.1, pinia-plugin-persistedstate/nuxt@4.3.0, @unocss/nuxt@66.2.0, nuxt-lazy-hydrate@1.0.0, nuxt-viewport@2.3.1, nuxt-vuefire@1.0.5, nuxt-viewport@2.3.1, @nuxt/eslint@1.4.1, @nuxt/fonts@0.11.4, @nuxtjs/critters@0.9.0  
- Build Modules:    -
------------------------------
As you can see in the screenshot, my LCP element takes upwards of 10 seconds to render. More than 95% of that time is spent in render delays. The unused js tab contains two files, one containing a bunch of vuefire logic, and the other a bunch of vuetify logic and components. I ran nuxi analyze and I improved chunking as much as possible, I don't think there's any more room for improvement in that area, so I'm not sure what do to do. I also find it weird that there's a "Minify Javascript" insight when this is a production build (nuxt generate). I disabled features.inlineStyles (since vuetify-nuxt-module disables it anyway) and I'm using @nuxtjs/critters instead, but there's still a 22KiB entry.css stylesheet anyway.
No description
No description
4 Replies
kapa.ai
kapa.ai•6mo ago
Hi @Flamenate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Flamenate
FlamenateOP•6mo ago
As the flame chart shows (in the performance profile screenshot) a lot of the time is spent in layout tasks. In the snapshots, there are no visible layout shifts, but I noticed that everything gets rendered at once, instead of bit by bit. These are a few configs in my nuxt.config.ts that I think are relevant: 
build: {
  cssCodeSplit: true,
  cssMinify: 'lightningcss',
  minify: 'terser',
  terserOptions: {
    compress: true
  }
},
nitro: {
  compressPublicAssets: {
    brotli: true,
    gzip: true
  },
  minify: true,
}
fonts: {
  defaults: {
    subsets: ['latin']
  },
  families: [
    {
      name: 'Poppins',
      provider: 'google',
      preload: true,
      weights: [300, 400, 500, 600, 700],
      display: 'block'
    }
  ]
},
critters: {
  config: {
    inlineFonts: false,
    pruneSource: true,
    preload: 'swap'
  }
},
vuetify: {
  vuetifyOptions: {
    defaults: {
      global: {
        ripple: false
      }
    },
  },
  moduleOptions: {
    styles: {
      configFile: 'assets/styles/settings.scss'
    }
  }
}
build: {
  cssCodeSplit: true,
  cssMinify: 'lightningcss',
  minify: 'terser',
  terserOptions: {
    compress: true
  }
},
nitro: {
  compressPublicAssets: {
    brotli: true,
    gzip: true
  },
  minify: true,
}
fonts: {
  defaults: {
    subsets: ['latin']
  },
  families: [
    {
      name: 'Poppins',
      provider: 'google',
      preload: true,
      weights: [300, 400, 500, 600, 700],
      display: 'block'
    }
  ]
},
critters: {
  config: {
    inlineFonts: false,
    pruneSource: true,
    preload: 'swap'
  }
},
vuetify: {
  vuetifyOptions: {
    defaults: {
      global: {
        ripple: false
      }
    },
  },
  moduleOptions: {
    styles: {
      configFile: 'assets/styles/settings.scss'
    }
  }
}
kapa.ai
kapa.ai•6mo ago
---------------------- You’re facing very poor Lighthouse performance, especially with a long LCP (Largest Contentful Paint) render delay, and have already optimized chunking and tried various config changes. Here’s what the knowledge sources suggest for diagnosing and improving Nuxt performance in such scenarios: --- 1. Common Performance Bottlenecks - Overusing Plugins & Global Components: Registering too many components or plugins globally can bloat your JS bundle and slow down hydration. Prefer auto-imports and local registration for third-party components instead of global registration, as global registration can be a performance killer in large apps [YouTube: Avoid a common Vue PERFORMANCE KILLER]. - Unused Code: Make sure you’re not shipping unused code or components. Tools like nuxi analyze and bundle visualizers can help spot and remove dead code [docs: performance best practices]. --- 2. Lazy Hydration & Component Islands - Lazy Hydration: Use Nuxt’s built-in lazy hydration strategies to delay hydration of non-critical components. This can significantly reduce the JS execution and render delay for your LCP element. For example, you can hydrate components only when they become visible, on interaction, or after a delay: 
<template>
  <div>
    <LazyMyComponent hydrate-on-visible />
  </div>
</template>
<template>
  <div>
    <LazyMyComponent hydrate-on-visible />
  </div>
</template>
Other strategies include hydrate-on-idle, hydrate-on-interaction, hydrate-on-media-query, hydrate-after, and hydrate-when. These help ensure only essential components are interactive immediately, reducing the main thread workload [Nuxt Docs: Delayed Hydration]. --- 3. Critical CSS and Styles - Critters & Inline Styles: You’re already using @nuxtjs/critters for critical CSS. If you still see a large entry.css, ensure that only critical CSS is inlined and unnecessary global styles are minimized. You can further experiment with removing external CSS references if all styles are inlined, using a Nuxt build hook: 
export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        for (let i = css.length - 1; i >= 0; i--) {
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})
export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        for (let i = css.length - 1; i >= 0; i--) {
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})
[Nuxt Docs: LCP Advanced Optimizations] --- 4. Profiling and Debugging Tools - Nuxt DevTools & Chrome DevTools: Use Nuxt DevTools (Hooks tab) and Chrome DevTools Performance panel to identify which hooks or components are causing delays. Enabling browserDevtoolsTiming in your config can help you track Nuxt hook timings in the browser’s Performance tab [Nuxt Docs: browserDevtoolsTiming]. --- 5. Third-Party Modules - Heavy Modules: Both Vuetify and Vuefire can add significant weight. If you see unused code from these in your bundle, check if you can tree-shake or lazy-load parts of these libraries, or only import what you use. --- 6. Other Best Practices - Image Optimization: Use the Nuxt Image module for responsive, optimized images. - Font Optimization: Use Nuxt Fonts or Fontaine for font loading and to reduce CLS. - CDN & Asset Delivery: Ensure assets are served via a CDN, compressed, and using HTTP2/3 [Nuxt Docs: Styling]. --- 7. Windows-Specific Note If you’re developing on Windows and experiencing slow HMR or reloads, consider using WSL (Windows Subsystem for Linux) for much faster development performance [docs: HMR performance note]. --- 8. Lighthouse "Minify JavaScript" Warning If you see this warning in a production build, double-check your build config and ensure minification is enabled. Sometimes, third-party modules or custom build steps can interfere with minification. --- 9. General Troubleshooting Steps - Audit your bundle with nuxi analyze and a bundle visualizer. - Use lazy hydration for non-critical components. - Minimize global CSS and JS. - Optimize images and fonts. - Profile with DevTools to find bottlenecks. --- If you’ve already tried all of the above and still see excessive render delays, it may be due to the cumulative effect of large dependencies (like Vuetify and Vuefire) and too many eagerly loaded components. Focus on lazy loading, code splitting, and reducing the initial JS/CSS payload as much as possible. If you need more targeted help, try profiling with Chrome DevTools to see exactly what’s blocking the main thread during LCP, and consider sharing a minimal reproduction for community review. --- References:
- Nuxt Docs: Delayed Hydration
- Nuxt Docs: LCP Advanced Optimizations
- Nuxt Docs: Performance Best Practices
- YouTube: Avoid a common Vue PERFORMANCE KILLER ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6mo ago
<@255792586403479562> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?