Performance problem
Hello everyone! I have created two similar-looking web apps with clear vue.js and nuxt.js.
The problem is poor performance on mobile with nuxt.js app which actually have much less content on it. I'm starting with nuxt and I'm a lil bit confused right now. Maybe it's vercel issue? Please check it and lemme know why it works like that.
Vue app --> https://ilusioncloudtestokok.vercel.app/
Nuxt app --> https://ilusioncloudv2.vercel.app/
Tip: try to open navbar on mobile (it's so lagging on nuxt app) :nuxt: :vue:
26 Replies
Hi @Stritixx. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'll help you troubleshoot the performance issue with your Nuxt app on Vercel, especially the lagging navbar on mobile.
Based on the knowledge sources, there are several potential causes for performance issues in Nuxt applications deployed on Vercel:
Possible Causes
1. Rendering Mode: Nuxt uses universal rendering by default, which means it renders on the server first and then hydrates on the client. This can sometimes cause performance issues if not optimized properly, especially on mobile devices with limited processing power. Universal rendering has both benefits and downsides.
2. Payload Size: The
__NUXT__ payload might be too large, causing performance issues. This is a common problem that can significantly impact mobile performance. Nuxt Performance In Depth discusses this issue specifically.
3. Global Component Registration: If you're registering components globally instead of using Nuxt's auto-imports, this can be a performance killer as mentioned in this video.
4. Lazy Loading: Not using the Lazy prefix for components that aren't immediately needed can impact performance. This video explains when and how to use lazy loading in Nuxt.
5. Vercel Build Environment: There might be specific issues with the Vercel build environment as mentioned in this GitHub issue.
Solutions to Try
1. Reduce Payload Size:
- Check what data you're storing in your Nuxt payload and try to minimize it
- Use shallowReactive for large data objects as mentioned in this PR
2. Optimize Component Loading:
- Use the Lazy prefix for components that aren't needed immediately, especially for navbar components
- Example: <LazyNavbar /> instead of <Navbar />
3. Check for Hydration Issues:
- Make sure your components don't have hydration mismatches between server and client rendering
4. Consider Client-Side Rendering for UI-Heavy Components:
- For interactive components like navbars, you might want to use client-only rendering
- You can use the <ClientOnly> component or set specific components to be client-only
5. Check for Watchers and Reactivity Issues:
- Ensure you're unsubscribing from watchers when components are unmounted as mentioned in this PR
6. Font Issues:
- One interesting issue mentioned in this Stack Overflow post was that the Tajwal font caused performance issues in a Nuxt app. Check if your font choice might be impacting performance.
If you're still experiencing issues after trying these solutions, you might want to use browser developer tools to profile your application and identify specific bottlenecks. The Performance tab in Chrome DevTools can help pinpoint exactly what's causing the lag in your navbar animation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1182371805294493877> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Perfect example of navbar
1st website - nuxt
2nd - vue
Without looking at code or some traces or something it's hard to tell what's causing the issue
Oh sorry for that I forgot to share gh
GitHub
GitHub - Stritixx/ilusioncloudv2
Contribute to Stritixx/ilusioncloudv2 development by creating an account on GitHub.
There you go
try removing AOS, also, i would not recommend you to use tailwind with any UI library which doesnt use tailwind
vuesax injecting base.css which is overriding all the styles from tailwind, (i changed tailwind 3 to tailwind 4 which was casuing lag in my case)
AOS and tailwind 3 was causing the lag, all were conflicting each other styles, after migrating to tailwind 4 , the lag seems to be gone in mobile
I will try to remove aos
But still I'm confused why vue app is not lagging at all
might be because its full SPA
Okay. First I will try to remove aos from my project
Then will see if it's still lagging
and use eslint to improve code readability and use nuxt-device (https://nuxt.com/modules/device) to detect mobile or not and use v-if to conditionally render navbar for mobile and desktop so that component wont even load\
use
<NuxtLink> instead of <RouterLink>
Oh right I forgot to change it while copying from vue app
do not use svg directly for icons, use nuxt/icon (https://github.com/nuxt/icon) and if you want to use svg in you app then dont directly copy-paste svg instead store all your svg in assets/ folder and use nuxt-svgo to use that svg (https://github.com/cpsoinos/nuxt-svgo)
GitHub
GitHub - nuxt/icon: The component, supporting Iconify, Emojis and ...
The component, supporting Iconify, Emojis and custom components. - nuxt/icon
GitHub
GitHub - cpsoinos/nuxt-svgo: SVGO loader for Nuxt
SVGO loader for Nuxt. Contribute to cpsoinos/nuxt-svgo development by creating an account on GitHub.
Thanks for so many advices, for sure I will use them
use setup script directly
<script setup lang="ts"> and copy paste everything directly from setup() and if you want to change the name of the component then use defineOptions({ name: 'YourComponentNewName' }) inside script setup tag
if this is the only place you are using
drop then copy paste all the css in this file only under <style>
you dont need to wrap inside
<div> you can add multiple elements on root in app.vue
and if your app.vue only contains this
then you can delete the app.vue file, its the default
if you want proper SEO support then use this module https://nuxtseo.com/
Nuxt SEO
Nuxt SEO · All-in-one Technical SEO for Nuxt
Nuxt SEO is a collection of hand-crafted Nuxt Modules to help you rank higher in search engines.
you dont need to extract everything into components if usage is only once, (extract into components only if your component is complex or used in multiple places or required lazyily) else you can write there itself only,
ok so right now I deleted AOS and vuesax
but navbar is still lagging while I'm trying to open it
on mobile of course
then looks like something is wrong with animation or
use tailwind 4 and remove nuxt tailwind module