Nuxt•2mo ago

Debug Navigation performance Issues

Navigating to pages with the nuxtlink component takes ages. Sometime up to 3s. How can I debug this?

13 Replies

Hi @Samuelreichoer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To debug slow navigation performance with the <NuxtLink> component in Nuxt, you can use several built-in tools and best practices: 1. Nuxt DevTools
Use Nuxt DevTools to gain insights into your app's performance. The Timeline feature tracks time spent on rendering, updating, and initializing components, helping you identify bottlenecks during navigation. The Render Tree and Inspect features can also help you see which components and files are loaded and their impact on performance Nuxt DevTools. 2. Chrome DevTools
Open the Performance tab in Chrome DevTools to record and analyze navigation events. This will show you metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP), which are crucial for understanding navigation delays Chrome DevTools. 3. browserDevtoolsTiming Experimental Feature
Enable the browserDevtoolsTiming experimental feature in your nuxt.config.ts to add performance markers for Nuxt hooks in the browser devtools. This helps you track exactly where time is spent during navigation in the Performance panel of Chromium-based browsers:

   export default defineNuxtConfig({
     experimental: {
       browserDevtoolsTiming: true,
     },
   })

   export default defineNuxtConfig({
     experimental: {
       browserDevtoolsTiming: true,
     },
   })

This is enabled by default in development mode browserDevtoolsTiming. 4. NuxtLink Prefetching
By default, <NuxtLink> uses smart prefetching, which can sometimes cause delays if too much is prefetched. You can change the prefetching strategy to only prefetch on interaction:

   export default defineNuxtConfig({
     experimental: {
       defaults: {
         nuxtLink: {
           prefetchOn: 'interaction',
         },
       },
     },
   })

   export default defineNuxtConfig({
     experimental: {
       defaults: {
         nuxtLink: {
           prefetchOn: 'interaction',
         },
       },
     },
   })

This can help reduce unnecessary network requests and speed up navigation Links. 5. Nuxi Analyze
Use the nuxi analyze command to visualize your production bundle. Large blocks in the visualization may indicate components or libraries that are slowing down navigation. Consider lazy loading or splitting large components Nuxi Analyze. 6. Check for Lazy Loading and Hydration
Use lazy loading (Lazy prefix) and lazy hydration (hydrate-on-visible) for components that are not immediately needed. This reduces the initial JavaScript bundle size and can improve navigation speed Lazy Loading Components, Lazy Hydration. By combining these tools and strategies, you can pinpoint and address the causes of slow navigation in your Nuxt app. If you still experience issues, use the Timeline and Performance panels to identify specific components or network requests that are causing delays. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

flapili•2mo ago

Hi Does the target page include any awaited useAsyncData ?

SamuelreichoerOP•2mo ago

Hi, yes it does

flapili•2mo ago

Tldr it's probably the issue

flapili•2mo ago

https://stackblitz.com/edit/github-ksvonjiz?file=app%2Fapp.vue

Benoît Deveaux

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

flapili•2mo ago

Already did long messages days and weeks agos, never had any official response

SamuelreichoerOP•2mo ago

Oh man, thank you I will try to remove my awaits and check if this helps.. strange that the nuxt team does not look into this. Seems to be a big issue..

flapili•2mo ago

Not even an issue It's misunderstandings of nuxt team at this point 🙁 I wont harass people about open source stuff so, I just gave up the fact that it will never ba clarified

SamuelreichoerOP•2mo ago

Okey but that's a bad design 😅 If no one should use await, why is it allowed to use I think that's feedback from the community that is important and makes the framework better

flapili•2mo ago

There are lazy which half fix that Si you add a option to bypass a keyword which is not required :this_is_fine_anim: Try to ask, every 6 month I ask I got ignored

SamuelreichoerOP•2mo ago

Dang, i had an await in a catch all route, I removed it and the site feels snappy now 😅

flapili•2mo ago

nice

Gaming

Programming

Debug Navigation performance Issues

Did you find this page helpful?