Extremely low fps at page refresh / start
hey guys π
so i am working on my nuxt project, and i've been noticing that opening the page is extremely slow.
so when i start the server, let it take its time and etc... then open the page on the browser, the fps starts out very low
it starts at around 20 and then it keeps slowly going up over the next, approximately, 7 seconds to finally reach and stabilize at around ~160 ish. this also happens every time i refresh the page
am wondering if i am doing something wrong for it to "cold start" like that, i really need guidance and advice here, thank you so much
ps: i have a laptop with an i7 10750h and rtx 2070 and 32 gbs of ram on win 11 23h2
2 Replies
Hi @xeus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The slow initial performance you're experiencing with your Nuxt application is a known issue that several Nuxt users have encountered. Based on the knowledge sources, there are a few potential causes and solutions to consider:
Windows Performance Issues
For Windows users specifically, there's a documented issue with Hot Module Replacement (HMR) performance that can cause extremely slow reload times:
Solution for Windows users: For significantly improved performance, it's recommended to use WSL (Windows Subsystem for Linux) with a distribution like Ubuntu. This can reduce reload times to under a second and avoid multiple restarts, providing a smoother development experience. Nuxt Documentation
Payload Size and Reactivity
The initial low FPS could be related to how Nuxt handles its payload (sometimes referred to as
__NUXT__):
1. Recent performance improvements in Nuxt have changed how reactivity is handled in the payload, using shallowReactive instead of making the entire payload reactive, which can improve performance Performance Enhancement PR
2. You might want to check the size of your payload, as large payloads can significantly impact initial load performance. Alexander Lichter has a detailed video on reducing payload size: Reduce the size of your payload and NUXT
Global Component Registration
Another common performance killer in Nuxt/Vue applications is registering components globally:
- Avoid registering components globally as it can significantly impact performance. Instead, use auto-imports or import components only where needed. Nuxt Performance Video
Startup Optimizations
Recent Nuxt updates have focused on improving startup performance:
1. Deferring version/config checks until after Vite build Performance PR
2. Starting warmups after Nitro build to prevent blocking heavy file system operations Performance PR
Additional Considerations
1. Check if you have middleware that runs on both server and client. Try to optimize when middleware runs by using conditions like if (import.meta.client) for client-only operations.
2. Review your plugins and third-party integrations, as they can impact initial load performance.
3. If you're using Cloudflare or another CDN, ensure you've disabled features that might interfere with Nuxt, such as Rocket Loader, Mirage, and Email Address Obfuscation Nuxt Deployment Docs
Your hardware specifications are more than sufficient for Nuxt development, so the issue is likely related to configuration or the Windows environment rather than hardware limitations.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@870317465412980777> Kapa.ai is still learning and improving, please let me know how I did by reacting below.