Massive Performance Issues with Three.js and other stuff.
I have massive performance issues on this website as seen in this pagespeed test. I tried everything to fix this but no matter what I tried it only got worse or did not work.
If you want pieces of the code ask me.
7 Replies
Hi @PandaDEV. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I apologize, but I don't have enough specific information about your Nuxt application and its integration with Three.js to provide a detailed answer about your performance issues. However, I can offer some general advice based on the available information about Nuxt performance optimization:
1. Server-Side Rendering (SSR): Ensure you're utilizing Nuxt's SSR capabilities effectively. SSR can significantly improve initial page load times and SEO Nuxt Docs - Server-Side Rendering (https://nuxt.com/docs/getting-started/introduction#server-side-rendering).
2. Optimize Dependencies: Be cautious with third-party dependencies. Some libraries, like vee-validate, have been known to cause optimization issues in Nuxt 3.8.1 and above GitHub Issue - Optimizing dependencies (https://github.com/nuxt/nuxt/issues/24196).
3. CDN Configuration: If you're using a CDN like Cloudflare, ensure it's configured correctly. Disable features that might interfere with Nuxt's rendering, such as auto-minification and certain optimization features Nuxt Docs - CDN Proxy (https://nuxt.com/docs/getting-started/deployment#cdn-proxy).
4. Use Nuxt DevTools: The Nuxt DevTools, particularly the Hooks tab, can help you identify performance bottlenecks Nuxt DevTools - Hooks (https://devtools.nuxt.com/guide/features#hooks).
5. Webpack Optimization: Consider tweaking Webpack optimization settings in your Nuxt config if needed Nuxt Docs - Webpack Optimization (https://nuxt.com/docs/api/nuxt-config#optimization-1).
6. Three.js Optimization: For Three.js specifically, consider using facade components or lazy loading techniques to improve initial load times Nuxt Scripts - Speed up with Facade Components (https://scripts.nuxt.com).
To provide more specific advice, I would need to see relevant parts of your code and configuration. If you'd like to share those, I can try to offer more targeted suggestions.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@879608137630498858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
This is awful
Hello π
To try to narrow it down :
Is it as slow in local ? Where is it hosted ? With or without SSR ?
Oh I guess the file shows that's in the same locally sorry π
It was instant on my phone... Gonna dig deeper when I'm home in a couple of hours
If SSR, do you use useFetch or did you personalize it ?
You solved it in the meantime ?
On my side thourgh lighthouse :
It behaves wierd on localhost it shows that the performance is good but that is just because its local and there is no bottleneck but I still get all the errors about compression. I do use SSR but what do you mean by useFetch?