How to increase speed performance in Nuxt with SSR

Question

How we can increase the speed performance in Nuxt with SSR for the following points.

• Reduce unused JavaScript
• Avoid serving legacy JavaScript to modern
• Minimize main-thread work
• Reduce JavaScript execution time
• Avoid enormous network payloads

Answer 1

Pretty generic questions, so let's go point by point:

• Reduce unused JavaScript: you can tree-shake your code (+3rd party) + lazy load your routes + components (Nuxt does that nicely)
• Avoid serving legacy JavaScript to modern: the modern property is nice for that
• Minimize main-thread work: beware of the heavy 3rd party scripts, like Google Analytics/GTM, heavy chats, heavy operations etc. Using a Service worker can help, other you could also try Partytown
• Reduce JavaScript execution time: same, depends of your code here. More analysis of it will be required
• Avoid enormous network payloads: check if you're making huge amounts of HTTP calls or loading big 5MB of i18n JSON files

As always, you cannot have a quick and simple answer on that kind of subject. You either need a performance expert or debug/learn it yourself.
This is a nice start, you could get quite a lot of explanations regarding core web vitals.

This frontend checklist is always a nice article to read too.

---

PS: also if the matter is mostly SSR, it may come down to have a better infrastructure on the backend, with bulkier VPS server, some improved DB, maybe some Elasticsearch, some cache etc etc... (all the usual things you can improve on the backend)

Answer 2

For speed optimization, we need to follow the following steps.

• Need to optimize the images
• Use shouldPreload in the render function nuxt.config.js
• Use compressor: shrinkRay(), for compression
• Use dns-prefetch for Google fonts
• Use minify js and css
• optimize API queries