Mejorar Core Web Vitals: qué tocar en qué orden.
LCP, INP y CLS reales según CrUX, no lab. Cómo subirlos en WordPress, Shopify, Next.js: priorización, técnicas concretas, herramientas y rangos de mejora honestos.
Actualizado mayo 2026
Core Web Vitals son factor de ranking real. Mal puntuados es perder posiciones.
Los Core Web Vitals (CWV) son tres métricas que Google usa como factor de ranking SEO desde 2021, endurecidas en 2024-2026. Miden experiencia real del usuario: velocidad de carga visual (LCP), interactividad (INP) y estabilidad visual (CLS).
LCP (Largest Contentful Paint) mide cuánto tarda el elemento más grande visible en cargar. Bueno: <2,5s. Pobre: >4s. INP (Interaction to Next Paint) mide latencia interactiva. Bueno: <200ms. Pobre: >500ms. Reemplazó FID en 2024. CLS (Cumulative Layout Shift) mide cuánto se mueve la página durante la carga. Bueno: <0,1. Pobre: >0,25.
Google usa CrUX (Chrome User Experience Report): datos reales de usuarios Chrome agregados. No es lab data. Si una pyme tiene CWV en "pobre" en categoría mobile, pierde ranking lentamente. Aquí va cómo subirlos sin migrar entera la web. Ver SEO técnico pyme.
Cómo bajar LCP en orden de impacto
Optimizar imagen hero
El elemento LCP en mobile suele ser una imagen hero o título grande. Si es imagen: convertir a WebP/AVIF, dimensionar correctamente (no 4000px en mobile de 360px), añadir width/height para reservar espacio, srcset responsive. Reducción típica: -30 a -60% en tamaño.
Preload del recurso LCP
Si LCP es imagen o webfont, preload en HTML: <em>link rel preload as image href ruta-imagen</em>. Le dice al navegador "carga esto cuanto antes". Mejora LCP 100-400ms típicamente.
Server response time
Si TTFB (Time to First Byte) >800ms en mobile, hosting o app lentos. Mejorar: caché agresiva (Cloudflare, WP Rocket), hosting decente (no shared barato), optimizar queries DB. TTFB <200ms es bueno.
Reducir CSS render-blocking
CSS inline crítico (above-the-fold) en HTML head. CSS restante async/defer. Reduce tiempo a primer render. Para WordPress: WP Rocket "optimize CSS delivery". Para Next.js: Critical CSS automático.
Reducir JS bloqueante
Scripts third-party (chat, analytics, A/B) que bloquean rendering. Mover a defer/async. Para WordPress: WP Rocket "delay JS execution". Para Next.js: Script con strategy="lazyOnload".
Cómo bajar INP (la métrica nueva más complicada).
INP mide la latencia entre interacción del usuario (clic, tap, scroll) y siguiente paint del navegador. Reemplazó FID en marzo 2024. Bueno <200ms, pobre >500ms. La mayoría de problemas de INP vienen de JavaScript pesado bloqueando el hilo principal.
Diagnóstico: Chrome DevTools → Performance → grabar interacción → ver "Total Blocking Time" y long tasks. Tareas >50ms son problema. Tareas >300ms son críticas. Identificar qué scripts las causan.
Soluciones típicas: (1) reducir JS de terceros (analytics, chat, recommendation engines) o cargar bajo interacción, (2) code splitting en frameworks modernos (Next.js dynamic imports), (3) eliminar bibliotecas pesadas no necesarias (Moment.js → date-fns, jQuery innecesario), (4) usar React.memo, useMemo, useCallback bien (no abusar).
Para WordPress: WP Rocket "delay JS execution" + "remove unused JS". Plugins menos pero más eficientes. Quitar plugins que añadan JS al frontend sin usarse.
Para Next.js: usar Script con strategies (afterInteractive, lazyOnload), dynamic imports para componentes pesados, optimizar bundle con next-bundle-analyzer.
Cómo eliminar CLS en menos de 1 día
Reservar espacio imágenes
Cada imagen con width y height explícitos. Para responsive con aspect-ratio CSS. Eliminar 80-95% de CLS típicos. Para WordPress: usar Lazy Load decente. Para Next.js: Image component reserva espacio automáticamente.
Reservar espacio embeds
iframes (YouTube, Maps, Calendly), banners, sticky elements. CSS con min-height fijo o aspect-ratio. Sin esto, espacio se inserta tarde y empuja contenido.
Fonts con font-display: optional o swap
Web fonts cargando tarde causan re-layout cuando llegan. Usar font-display: swap (texto visible con font sistema, cambia cuando llega web font) o optional. Preload el font crítico. CLS bajo cero.
Lo que usar para medir y diagnosticar
PageSpeed Insights (real CrUX)
Free de Google. Da CWV real de últimos 28 días (CrUX) + análisis lab data. Pestaña "Datos de origen" es la oficial Google. Probar al menos home + 3 páginas de cada plantilla (product, blog, category).
Search Console → CWV
Pestaña Core Web Vitals separado mobile/desktop. Lista URLs por categoría (Buena, Mejorable, Pobre). Para sitio grande, esencial para priorizar qué plantillas tocar.
Chrome DevTools Performance
Grabar carga + interacciones, ver long tasks, bundle size, render-blocking resources. Para diagnosticar INP particularmente. Curva aprendizaje media pero esencial para profundizar.
WebPageTest
Free. Test desde location específica, conexión específica, varios runs para datos confiables. Filmstrip muestra qué renderiza primero. Útil cuando PageSpeed Insights no es claro.
Bundle analyzer
next-bundle-analyzer para Next.js, webpack-bundle-analyzer para webpack. Identifica qué pesa tu JS bundle. A veces 30-50% del bundle es código no usado (tree-shaking falla).
Quick wins específicos por plataforma
WordPress
WP Rocket o LiteSpeed Cache + Cloudflare APO + ShortPixel (imágenes WebP automático) + theme decente + menos plugins. 70% de mejora con menos de un día de trabajo.
Shopify
Theme moderno (Dawn 2.0+), apps mínimas necesarias (cada app suma JS), Lazysizes para imágenes, Critical Hero Optimizer. CWV nativos suelen ser razonables si no abusas de apps.
Next.js
next/image siempre, next/font para Google Fonts, dynamic imports componentes pesados, ISR/SSG en vez de SSR puro cuando posible, Vercel Speed Insights para CrUX continuo.
Webflow / Wix
Plataformas SaaS con menos control. Lo que puedes: imágenes optimizadas antes de subir (WebP), animaciones mínimas, embeds limitados, theme sencillo. Si CWV malos persisten, evaluar migración.
Dudas que nos hacéis llegar
¿Quieres auditoría CWV y plan de mejora realista?
Auditoría LCP/INP/CLS página a página, priorización por impacto, plan de mejora con plazos y rangos esperados. Sin promesas mágicas.