Build size slow down website!
Hi!
I have a Nuxt app with a basic pre-rendered landing page, but when I check PageSpeedInsight, it show the page is super slow due to the Nuxt script
It's a super simple landing page, so no idea why it's so heavy. Is there a way to fix that?
13 Replies
Hi @Nico. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There are several ways to improve the performance of your Nuxt application. Based on the knowledge sources, here are some approaches to address your slow landing page issue:
Optimize Your Build
1. Consider SPA Mode: If you're only building a simple landing page, you might not need SSR at all. Nuxt can build a plain SPA (Single Page Application) which might be more appropriate for your use case.
Building a plain SPA with Nuxt!?
2. Use Build Cache: The nuxt-build-cache module can significantly improve build times for re-builds and deploys, which might help with your performance issues.
Faster Nuxt Builds?
3. Webpack Optimization: You can configure webpack optimization settings in your nuxt.config.js file to improve performance:
Nuxt Configuration - webpack
4. Single App.vue: If you're only generating one static page, you can simplify your build by using just the app.vue file without the pages directory:
"If you only have a single page, you may consider instead moving it to app.vue for a lighter build."Stack Overflow - Can I use nuxt3 without router when I'm only generating one static page? Common Issues to Check 1. Dependencies: Some dependencies might be causing slowdowns. For example, there have been issues with Tailwind CSS versions causing extremely slow builds. Slow Vercel Build - Tailwind >=4.0.10 with Nuxt taking 30+ minutes 2. Compression Issues: Check if you're using h3-compression, as there have been reports of it causing performance issues. Stack Overflow - Nuxt.js 3 website replaces with Unicode chars after build Part 3 3. Module Waterfall: Having too many small modules can cause network congestion during development, which might also affect production builds. Request waterfall flow If you're still experiencing issues after trying these optimizations, you might want to analyze your specific build more deeply to identify the bottlenecks. Remember that Nuxt 3 is generally faster than Nuxt 2, but there are still opportunities for optimization depending on your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@244171974790742018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai No, I have a whole app, but the landing page is slow
Let me check the knowledge base for you again. One moment! :books:
----------------------
I understand that you have a complete Nuxt application, but specifically your landing page is experiencing performance issues. Let me provide some targeted advice based on the knowledge sources.
Performance Optimization Strategies for Nuxt Landing Pages
1. Improve Router Scroll Behavior
Recent fixes to Nuxt's default router scroll behavior have addressed performance issues with page loading and transitions:
"handle first page load and page refresh scenarios (restore scroll position without jumps), fixes hash-navigation when changing pages and browser back/forward positions, especially when page transitions are involved."fix(nuxt): improve default router
scrollBehaviour
2. Implement Lazy Hydration
Nuxt offers delayed/lazy hydration support which can significantly improve landing page performance:
This allows you to control when components become interactive, only hydrating them when needed (e.g., when visible in viewport, after user interaction, etc.). This is particularly useful for landing pages with many components.
feat(nuxt): delayed/lazy hydration support
You can enable this feature in your nuxt.config.ts:
Docs > Api > Nuxt Configuration > experimental
3. Avoid Global Component Registration
Global component registration can be a performance killer. Instead of registering components globally, use auto-imports or explicit imports:
"Registering components globally is a common pattern but also often a performance killer. Learn in this video what a better way of adding third party components is..."YouTube [Nuxt 3]: Avoid a common Vue PERFORMANCE KILLER 4. Windows-Specific Performance Issues If you're developing on Windows, HMR performance can be extremely slow:
"For significantly improved HMR performance, we recommend using 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."docs: improve HMR performance note for Windows users 5. Consider Using
shallowReactive for Large Data
Recent Nuxt improvements mark payload as shallowReactive to improve performance:
"This improves performance by not marking the entire Nuxt payload as reactive - but granularly enabling shallow reactivity first in the parts of it that we need to be reactive."perf(nuxt): mark payload as shallowReactive 6. Optimize Data Passing Between Pages Instead of fetching the same data multiple times, consider passing data between pages when navigating: Then in your destination page, check if the data is already available before fetching it again. Stack Overflow Post > Pass dynamic object data via nuxt-link to component Part 1 7. SASS Performance Issues If you're using SASS/SCSS, consider switching to sass-embedded for better performance:
"I solved it. In my case I was using Vuetify with a template/theme, and I found out that using too much custom CSS slowed down the server warmup and initial request by a lot. The fix was to uninstall theGithub Issue (closed): Nuxt extremely slow on initial request These optimizations should help improve the performance of your landing page while maintaining the functionality of your full Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------sasspackage and installsass-embeddedinstead..."
<@244171974790742018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@Nico Would you be able to provide more information, such as the
package.json, nuxt.config.ts, and so on?Ok, will do when Iām back
Seemingly harmless resources you use in any development project can easily inflate bundle size.
For instance, in any app, it's easy to load entire icon libraries, resulting in multiple mb's added to final bundle... meanwhile you only needed 10 specific icons.
Packages
But why would it load every single icon? š
Alexander Lichter
YouTube
Lazy Hydration is available NOW
Hydration is a delicate topic, especially hydration errors. But the performance aspect of hydration shouldn't be underestimated either. Luckily, we don't need to hydrate everything anymore, as Vue introduced lazy hydration. And now it is ergonomically available in Nuxt too.
Learn how in this video š
---
Links and Resources:
š Vue Lazy...
Nuxt
components Ā· Nuxt Directory Structure
The components/ directory is where you put all your Vue components.
This should reduce the amount of JS that is executed at the moment
other than that, check your bundle and see what contributes the most (as @Kal) said
Via
npx nuxi analyzeNice, will have a look, thanks! š
Your icons implementation may be just fine... I was speaking generally; I don't know your specifics.
In all kinds of web projects (not Vue) I've seen unwanted "stealth" resources (extra icons, fonts, images, etc) make it into bundles.
Doing build analysis is a good first step.