1. Diagnóstico de Core Web Vitals en el Stack Nuxt 3
Comprender los cuellos de botella reales entre SSR, hidratación del cliente y renderizado en el navegador.
En aplicaciones modernas con Nuxt 3, los tres pilares de Core Web Vitals (LCP, INP y CLS) suelen degradarse por patrones comunes: sobrecarga en el bundle de hidratación del cliente, fuentes web bloqueantes sin fallback de métricas exactas, y scripts de terceros ejecutándose en el hilo principal.
Para LCP (Largest Contentful Paint < 1.2s), el objetivo es servir el HTML con el nodo visual crítico pre-renderizado desde el servidor Nitro y pre-cargar imágenes prioritarias con atributos fetchpriority="high" antes de que comience el análisis del DOM.
Para INP (Interaction to Next Paint < 100ms), es imperativo evitar hidratar componentes estáticos que no requieren interactividad reactiva, fragmentando la ejecución de JavaScript en micro-tareas.
Regla de Oro de Rendimiento
Si un componente solo muestra texto o estructura estática, no debe penalizar el bundle cliente. Usa islas o componentes de servidor cuando la interactividad no sea requerida.
2. Cero FOUT con @nuxt/fonts y Carga Crítica en Tailwind v4
Cómo eliminar el salto de diseño acumulado (CLS: 0.00) y acelerar el First Contentful Paint.
El Cumulative Layout Shift (CLS) ocurre casi siempre por fuentes externas que cambian las dimensiones del texto tras descargarse. El módulo oficial @nuxt/fonts resuelve esto generando automáticamente métricas de ajuste (@font-face fallbacks con size-adjust, ascent-override y descent-override) que coinciden exactamente con la fuente de respaldo del sistema.
En combinación con Tailwind CSS v4, el nuevo motor Rust compila CSS atómico con cero reglas no utilizadas y genera un subconjunto crítico ultra-ligero que se inyecta directamente en el <head> de la respuesta SSR.
export default defineNuxtConfig({
modules: ['@nuxt/fonts', '@nuxt/image'],
fonts: {
families: [
{ name: 'Inter', provider: 'google', weights: [400, 600, 700] },
{ name: 'Bangers', provider: 'google', weights: [400] }
],
defaults: {
fallbacks: {
'sans-serif': ['system-ui', 'Segoe UI', 'Roboto', 'Arial']
},
preload: true
}
},
image: {
format: ['webp', 'avif'],
quality: 85
}
})3. Pre-renderizado Selectivo en Nitro y Defer de Scripts
Tiempos de respuesta Time to First Byte (TTFB) menores a 60ms en edge servers.
Nitro permite combinar páginas estáticas pre-generadas (SSG) con rutas dinámicas SSR mediante routeRules. Al configurar nitro.prerender.routes para las páginas principales del portafolio o producto, el servidor web entrega archivos HTML puros pre-optimizados directamente desde CDN.
Para scripts de analíticas o widgets no esenciales, se debe postergar su inyección hasta el evento idle del navegador usando requestIdleCallback o componentes auxiliares de carga diferida.
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: ['/', '/sobre-mi', '/proyectos', '/contacto', '/articulos']
}
},
routeRules: {
'/**': {
headers: {
'X-Content-Type-Options': 'nosniff',
'Cache-Control': 'public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400'
}
}
}
})4. Checklist de Producción para 100/100
Pasos concretos antes de desplegar tu aplicación Nuxt 3.
1. Servir imágenes en formato AVIF/WebP con dimensiones explícitas (width y height) en el componente NuxtImg.
2. Preconectar orígenes externos críticos (fuentes, CDN de imágenes) en nuxt.config app.head.
3. Habilitar compresión Brotli/Gzip en el servidor o CDN de borde.
4. Auditar el tamaño del bundle con npx nuxi analyze para eliminar librerías duplicadas o de excesivo peso en runtime.