This content originally appeared on DEV Community and was authored by Jakub Andrzejewski
Performance is no longer just about speed—it’s about user experience. Google’s Core Web Vitals (CWV) are a key ranking factor, meaning a sluggish Nuxt app can hurt both your SEO and conversions.
Nuxt ships with powerful performance features out of the box. With some smart optimizations, you can make your app pass CWV audits with flying colors.
This guide covers practical techniques for optimizing Nuxt apps specifically for Core Web Vitals.
Enjoy!
🤔 What Are Core Web Vitals?
Core Web Vitals are a set of metrics defined by Google to measure real-world user experience on the web. They focus on how fast, responsive, and stable your pages feel.
- Largest Contentful Paint (LCP) — Measures how quickly the main content (often a hero image, headline, or large block of text) becomes visible.
- Target: < 2.5s
- Optimized by: image compression, preloading key assets, fast server responses.
- Interaction to Next Paint (INP) — Replaced First Input Delay (FID) in 2024 as the responsiveness metric. INP measures the total time from when a user interacts with the page (click, tap, key press) until the browser paints the next frame.
- Target: < 200ms (good), 200–500ms (needs improvement).
- Optimized by: reducing JavaScript bloat, avoiding main thread blocking, using async components, lazy hydration.
- Cumulative Layout Shift (CLS) — Measures visual stability: do things jump around unexpectedly as the page loads?
- Target: < 0.1
- Optimized by: reserving space for images, loading fonts properly, preventing ads from shifting content.
Together, these metrics determine whether users perceive your Nuxt app as fast, responsive, and polished.
🟢 Best Practices for Nuxt Performance
Treat the following list of best practices like a checklist for improving performance of your Nuxt application!
1. Optimize Images with Nuxt Image
Images are often the biggest contributor to poor LCP.
The @nuxt/image module automatically handles optimization. Instead of manually juggling formats and sizes, Nuxt Image serves the best version for the device and connection.
Example with advanced optimizations:
<NuxtImg
src="/hero.jpg"
alt="Hero Banner"
width="1200"
height="600"
format="webp"
loading="lazy"
fetchpriority="high"
sizes="(max-width: 768px) 100vw, 1200px"
/>
✅ Tips for Better Performance:
-
widthandheight→ Prevents layout shifts (CLS). -
format="webp"or"avif"→ Smaller file size. -
loading="lazy"→ Defers offscreen images. -
fetchpriority="high"→ Critical hero images load ASAP. -
sizes→ Proper responsive breakpoints for mobile/desktop.
2. Use Static Site Generation (SSG) Where Possible
For content-heavy or marketing pages, enable static generation to improve TTFB and LCP:
export default defineNuxtConfig({
nitro: {
preset: 'vercel', // or 'netlify', 'static'
},
ssr: true,
target: 'static',
})
3. Lazy-Load Components (and Hydrate Smarter)
Lazy-Load Non-Critical Components
Heavy components shouldn’t block your initial render. Use Nuxt’s dynamic imports:
<script setup>
const LazyChart = defineAsyncComponent(() => import('@/components/Chart.vue'))
</script>
<template>
<Suspense>
<LazyChart />
</Suspense>
</template>
This reduces INP by deferring non-essential JavaScript.
Lazy Hydration
Even after lazy loading, hydration can still block interactivity. Nuxt offers lazy hydration strategies to delay hydration until the right time:
<ClientOnly fallback-tag="div">
<MyHeavyWidget client:visible />
</ClientOnly>
Hydration strategies you can use:
-
client:visible→ Hydrate only when scrolled into view. -
client:idle→ Hydrate when the browser is idle. -
client:media="(min-width: 1024px)"→ Hydrate only on specific breakpoints.
This drastically improves INP for complex apps.
4. Prevent Cumulative Layout Shift (CLS)
CLS happens when fonts, ads, or images load without reserved space.
Best practices in Nuxt:
- Always define
widthandheightfor images. - Use Tailwind’s
aspect-ratioutilities for responsive media. - Load fonts properly (see Nuxt Fonts below).
5. Optimize Fonts with Nuxt Fonts
Fonts are a common cause of CLS and slow LCP.
Use @nuxt/fonts to self-host and preload fonts automatically.
Example config in nuxt.config.ts:
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
families: [
{ name: 'Inter', provider: 'google' },
],
},
})
Benefits:
- Self-hosting avoids layout shifts from external font providers.
- Automatic
font-display: swap. - Preloads fonts for faster rendering.
6. Control Third-Party Scripts with Nuxt Scripts
Third-party scripts (analytics, chat widgets, ads) can destroy INP if they block the main thread.
The @nuxt/scripts module helps load them safely.
Example config in nuxt.config.ts:
export default defineNuxtConfig({
modules: ['@nuxt/scripts'],
scripts: {
defer: [
{ src: 'https://example.com/analytics.js' }
],
async: [
{ src: 'https://example.com/chat-widget.js' }
]
}
})
On-Demand Loading with Composables
Nuxt Scripts comes with built-in composables like useScript for fine-grained control.
Example: load a chat widget only when the user clicks a button:
<script setup>
const { load, unload } = useScript('https://example.com/chat-widget.js')
function initChat() {
load().then(() => {
// Initialize chat widget
})
}
</script>
<template>
<button @click="initChat">Open Chat</button>
</template>
This ensures non-critical scripts only load when needed, keeping INP low.
7. Reduce JavaScript Payload
A bloated bundle slows down INP.
Tips:
- Run
nuxt build --analyzeto find heavy dependencies. - Import only what you need (e.g., single icons instead of entire icon packs).
- Prefer Nuxt composables instead of adding large third-party state managers if you don’t need them.
8. Prefetch and Preconnect
Nuxt automatically prefetches links in the viewport, but you can fine-tune it:
<NuxtLink to="/about" prefetch>About</NuxtLink>
For external APIs or fonts, use preconnect in nuxt.config.ts:
app: {
head: {
link: [
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }
]
}
}
This reduces delays for LCP.
9. Measure & Iterate
You can’t improve what you don’t measure. Use:
- Lighthouse (Chrome DevTools)
- PageSpeed Insights (real-world CWV data from the Chrome UX Report)
- WebPageTest.org (detailed load waterfall)
Nuxt’s Nitro engine also provides hooks for logging server timings, which can help track TTFB issues.
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
🧪 Advance skills
A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.
Check out Certificates.dev by clicking this link or by clicking the image below:
Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!
✅ Summary
Optimizing Nuxt apps for Core Web Vitals isn’t about a single hack—it’s about layered improvements:
- Optimize images (Nuxt Image).
- Use lazy load and lazy hydration to load the code when it is needed.
- Keep JavaScript lean, load scripts only when needed (Nuxt Scripts +
useScript). - Use Nuxt Fonts to prevent CLS from late font rendering.
- Measure, iterate, repeat.
Take care and see you next time!
And happy coding as always 🖥️
This content originally appeared on DEV Community and was authored by Jakub Andrzejewski
Jakub Andrzejewski | Sciencx (2025-08-25T08:43:08+00:00) Optimizing Nuxt Apps for Core Web Vitals. Retrieved from https://www.scien.cx/2025/08/25/optimizing-nuxt-apps-for-core-web-vitals-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.