Hace tiempo que me interesa cómo pequeñas mejoras técnicas pueden traducirse en incrementos medibles en conversiones. En tiendas online, las Core Web Vitals (CWV) no son solo un KPI de Google: afectan la percepción del usuario, la tasa de abandono y, en última instancia, las ventas. En este artículo comparto mi experiencia optimizando una tienda montada con Next.js, centrándome en imágenes y prácticas que mejoran las CWV y, al mismo tiempo, la conversión.

Por qué las Core Web Vitals importan para una tienda

Las CWV —Largest Contentful Paint (LCP), First Input Delay (FID) ahora sustituido por INP, y Cumulative Layout Shift (CLS)— son métricas que miden la experiencia real del usuario. En una tienda:

  • Un LCP rápido reduce la fricción inicial: el producto aparece antes y el usuario sigue navegando.
  • Un INP bajo refleja interacciones ágiles (añadir al carrito, filtros). Si los botones responden lento, la conversión cae.
  • Un CLS bajo evita saltos que hacen clics accidentales o confunden al comprador.

    • No se trata solo de SEO: mejorar CWV reduce la fricción y aumenta la confianza del cliente. He visto tiendas pasar de tasas de conversión del 1.3% a 1.8% tras optimizar la capa visual y de recursos críticos.

    ¿Por qué Next.js es una buena base?

    Next.js ofrece herramientas nativas que ayudan con el rendimiento: renderizado híbrido (SSR, SSG), automatic code splitting, imágenes optimizadas con el componente next/image y soporte para Edge y ISR. Pero por sí solo no basta: hay decisiones que tomar en arquitectura y en cómo servimos imágenes y recursos.

    Optimización de imágenes: pasos prácticos que implementé

    Las imágenes representan a menudo la mayor parte del peso de una página de producto. Aquí están las medidas concretas que apliqué y que recomiendo:

  • Usar next/image siempre que sea posible: el componente gestiona lazy-loading, responsive srcsets y formatos modernos como WebP/AVIF cuando el servidor lo permite.
  • Generar imágenes en formatos modernos: WebP y AVIF ofrecen compresión superior. En mi flujo exporto JPG/PNG originales a AVIF y WebP en la pipeline de build (por ejemplo con Sharp o servicios como Cloudinary/Imgix).
  • Servir imágenes desde un CDN: usar un CDN (Cloudflare Images, Bunny CDN, Cloudinary, Fastly) reduce latencias y mejora TTFB, afectando directamente LCP.
  • Dimensiones fijas para evitar CLS: siempre especifico width/height en next/image o uso style con aspect-ratio. Esto reserva el espacio y evita saltos durante la carga.
  • Placeholder y LQIP inteligentemente: usar blurDataURL o placeholders de color evita jumpiness y mejora percepción de velocidad. No abuses de SVG placeholders complejos que penalicen el payload.
  • Lazy-load selectivo: cargar lazy las imágenes fuera de viewport; cargar eager la imagen principal del producto (LCP) y las primeras imágenes de la galería.
  • Optimización responsive: generar múltiples tamaños y servir el más apropiado con srcset. next/image lo hace por defecto, pero confirma que tus tamaños personalizados cubran breakpoints reales.
  • Comprimir y eliminar metadatos: durante la build quito EXIF y reduzco calidad al nivel visualmente aceptable (por ejemplo calidad 75-85 para WebP).

    • Ejemplo de configuración básica con next/image

    Un patrón que uso para asegurar LCP rápido en la página de producto:

  • La imagen principal se prefetch y carga eager si está en el primer viewport.
  • Las thumbnails y galería se cargan lazy.
  • Se reserva el espacio con width/height o style con aspect-ratio.

    • Aunque no incluyo fragmentos de código largos aquí, la configuración en Next.js suele resumirse en:

  • Usar <Image priority={true} ... /> para la imagen LCP.
  • Definir sizes y dejar que next genere srcset.
  • Configurar next.config.js domains y formats para AVIF/WebP.

    • Otras optimizaciones críticas que complementan las imágenes

    Las imágenes ayudan mucho, pero las CWV son el resultado conjunto de varios factores. Yo aplico estas prácticas en paralelo:

  • Critical CSS y preload: extraer CSS crítico para el above-the-fold y preloading de fuentes críticas. Evito cargar tipografías pesadas de forma bloqueante.
  • Reducir Javascript en el initial bundle: aprovechar dynamic imports, React Server Components (si aplicable) y eliminar librerías pesadas en el cliente. Menos JS = mejor INP.
  • Usar SSR o ISR para páginas de producto: entregas rápidas de HTML inicial mejoran LCP frente a renderizado 100% client-side.
  • Optimizar fuentes: usar formatos woff2, preconnect al origen de fonts y cargar solo variantes necesarias (peso y estilo).
  • Evitar layout shifts: reservar tamaños para imágenes, banners y iframes; evitar injects de DOM que cambian la estructura en el primer render.
  • Monitorización real: usar Google PageSpeed Insights, Web Vitals (Lighthouse) y RUM con Web Vitals (web-vitals JS) para detectar problemas reales de usuarios.

    • Métricas y experimentación: cómo medir impacto en conversiones

    Optimizar sin medir es tirar dados. Esto es lo que implementé para atribuir mejoras de CWV a conversiones:

  • Antes y después con A/B: hacía pruebas A/B con variantes donde introducía optimizaciones (ej. imágenes AVIF + CDN) vs control. Medí tiempo de primera interacción, LCP y conversión por segmento.
  • Segmentación por conexión: analizar resultados por velocidad de conexión (4G vs 3G). Las mejoras en imágenes suelen tener mayor impacto en conexiones lentas.
  • Eventos de RUM: capturar LCP/CLS/INP con web-vitals y enviar eventos a GA4 o a un sistema propio para correlacionar con eventos clave (añadir al carrito, checkout).
  • KPIs comerciales: además de tasa de conversión, monitorizo tiempo hasta primer producto en carrito, tasa de rebote en producto y vehículos de abandono en checkout.

    • Errores habituales que conviene evitar

    En proyectos donde he consultado veo patrones repetidos:

  • No priorizar la imagen LCP: lazy-loading por defecto en la imagen principal puede empeorar LCP.
  • Servir imágenes grandes en móviles porque el CMS entrega el archivo original sin reescalado.
  • Excluir next/image por querer "control total" y acabar sirviendo imágenes sin srcset ni modern formats.
  • Ignorar el impacto de fonts y scripts de terceros (chat, trackers) en INP.

    • Herramientas y servicios que recomiendo

    Optimización de imágenes Cloudinary, Imgix, Bunny Optimizer, Squoosh + Sharp en pipeline
    CDN Cloudflare, Bunny CDN, Fastly
    Monitorización RUM Google Analytics 4 (web-vitals), Sentry, Datadog RUM
    Auditoría y pruebas PageSpeed Insights, Lighthouse, WebPageTest

    Implementar mejoras en una tienda Next.js no es solo aplicar una receta: es una combinación de decisiones técnicas, proveedor de imágenes/CDN y pruebas constantes. Si optimizas imágenes correctamente, priorizas recursos críticos y mides con RUM, verás mejoras en CWV que muchas veces se traducen en más sesiones completadas y más conversiones.

    Si quieres, puedo revisar tu arquitectura actual (next.config.js, pipeline de imágenes y estructura de producto) y darte un checklist específico con acciones y estimación de impacto. Me encanta hacer este tipo de auditorías prácticas y concretas.