Tu tienda WooCommerce pasa el test de PageSpeed y aparece en rojo. Las métricas están mal. INP alto, CLS disparado, y tú no tocaste nada raro. Solo instalaste los plugins que todo el mundo usa: un chat en vivo, popups de captura de emails, Google Analytics, quizás un script de reseñas. Cada uno de esos plugins te prometía más ventas. Ninguno te dijo que, juntos, están destruyendo la experiencia de tus visitantes y tu posicionamiento en Google.

El problema no eres tú. WooCommerce, por sí solo, es un plugin pesado. Pero eso es manejable. Lo que vuelve el caso casi imposible de resolver es la combinación de WooCommerce con todos esos scripts de terceros que cargan al mismo tiempo, bloquean la interacción del usuario y mueven el contenido mientras la persona intenta hacer clic. Si eres dueño de una tienda online en WordPress y no eres desarrollador, probablemente has intentado de todo: instalar plugins de caché, activar CDN, comprimir imágenes. Y las métricas siguen mal.

La razón es simple: los problemas de INP y CLS en WooCommerce casi nunca vienen de las imágenes o del servidor. Vienen de JavaScript de terceros que se ejecuta en el momento equivocado y de elementos que aparecen después de que la página ya se pintó. Vamos a arreglarlo.

Qué significan realmente INP y CLS en tu tienda

Antes de tocar cualquier cosa, necesitas entender qué está fallando. No sirve de nada optimizar a ciegas.

INP (Interaction to Next Paint) mide qué tan rápido responde tu página cuando alguien hace clic en algo. Si un cliente toca el botón de “Añadir al carrito” y la página tarda más de 200 milisegundos en reaccionar, tu INP es malo. Google quiere que esté por debajo de 200ms.

CLS (Cumulative Layout Shift) mide cuánto se mueve el contenido mientras carga. Si tu cliente quiere hacer clic en un producto y de repente un popup o un banner aparece y empuja todo hacia abajo, eso es CLS. Google quiere un valor menor a 0.1.

Lo que hace único al caso de WooCommerce es que ambos problemas se agravan por la naturaleza del ecommerce: hay más scripts, más elementos dinámicos, más plugins compitiendo por el hilo principal del navegador.

Los culpables reales detrás de tus métricas rotas

He trabajado con tiendas WooCommerce que tenían puntuaciones perfectas en desktop y fallaban estrepitosamente en móvil. El patrón siempre se repite. Estos son los responsables más comunes, en orden de daño:

Plugins de chat en vivo

Tidio, Crisp, LiveChat, Zendesk Chat. Cada uno carga un bundle de JavaScript que pesa entre 200KB y 1MB. Ese script se ejecuta en el hilo principal del navegador, bloqueando cualquier interacción del usuario. Mientras el chat carga, el botón de “Comprar ahora” no responde. Eso es INP puro.

Además, muchos de estos plugins inyectan un widget flotante en la esquina inferior. Si ese widget carga después de que el contenido ya se pintó, desplaza los elementos de la página y genera CLS.

Scripts de analytics y seguimiento

Google Analytics 4, Google Tag Manager, Meta Pixel, Hotjar, Microsoft Clarity. Cada script que añades compite por el mismo recurso: el hilo principal del navegador. No es que uno solo sea el problema. Es la acumulación. Una tienda promedio tiene entre 5 y 8 scripts de seguimiento. Juntos, pueden bloquear la interactividad durante más de un segundo en móviles con conexiones lentas.

Google Tag Manager es especialmente peligroso porque carga scripts de forma asíncrona, pero “asíncrono” no significa “gratis”. Cada tag que disparas dentro de GTM sigue usando el hilo principal.

Popups y banners emergentes

OptinMonster, Sumo, Popup Builder, ConvertPlus. Estos plugins cargan sus propios scripts y CSS. Pero el daño real al CLS viene después: el popup aparece cuando la página ya terminó de cargar, desplaza el contenido y, en muchos casos, fuerza un reflow del layout completo. Si el popup tiene dimensiones diferentes al contenedor que lo aloja, todo se mueve.

Scripts de reseñas y prueba social

Plugins como Yotpo, Judge.me o Trustpilot inyectan widgets de reseñas directamente en la página del producto. Esos widgets cargan su propio JavaScript desde servidores externos. Mientras cargan, ocupan un espacio que luego cambia de tamaño cuando el contenido real aparece. CLS garantizado.

Optimización de imágenes lazy y CDN

Ironías de la vida: los plugins de optimización de imágenes y los CDNs que instalaste para mejorar la velocidad a veces empeoran el CLS. Si tus imágenes no tienen dimensiones explícitas (width y height en el HTML), el navegador no sabe cuánto espacio reservar. Cuando la imagen finalmente carga, empuja todo lo demás. Lazy loading agrava esto porque retrasa la carga, así que el espacio reservado puede estar vacío durante más tiempo.

Cómo diagnosticar qué está fallando en tu tienda

No adivines. Mide.

Abre tu tienda en Chrome, haz clic derecho e inspecciona. Ve a la pestaña Lighthouse y ejecuta un test en móvil. Luego ve a Performance y graba una interacción: haz clic en un botón de “Añadir al carrito” y mira qué aparece en el waterfall de JavaScript.

Pero la herramienta más útil para tu caso es PageSpeed Insights (pagespeed.web.dev). Pega tu URL, revisa la sección “Diagnósticos” y busca estos dos campos:

  • Reduce the impact of third-party code: aquí te dice exactamente qué scripts de terceros están consumiendo más tiempo.
  • Avoid large layout shifts: aquí te muestra qué elementos se están moviendo y por cuánto.

Apunta los 3 o 5 scripts que más tiempo consumen. Ese es tu punto de ataque.

También puedes usar web.dev/measure para obtener una segunda opinión y comparar resultados.

Soluciones reales para cada culpable

Ahora sí, vamos a arreglarlo. Cada solución está pensada para alguien que no programa. Si algo requiere tocar código, te digo exactamente qué copiar y dónde.

Retrasar el chat en vivo

En vez de cargar el script del chat de inmediato, cárgalo cuando el usuario hace scroll o después de que la página terminó de pintar. La mayoría de plugins de chat permiten esto en su configuración.

Si tu plugin de chat no tiene esa opción, instala Flying Scripts o Perfmatters. Ambos permiten retrasar scripts específicos por nombre. Busca el nombre del script de tu chat (por ejemplo “tidio” o “crisp”) y configúralo para que se cargue con un delay de 5 segundos o al evento de interacción del usuario (scroll, clic, movimiento del mouse).

Esto solo puede mejorar tu INP entre 100ms y 400ms. Es el cambio con mayor impacto y el más fácil de hacer.

Cargar analytics de forma inteligente

No elimines Google Analytics. Pero sí cambia cómo se carga.

Si usas Google Tag Manager, revisa cuántos tags tienes activos. Elimina los que no uses. Muchas tiendas tienen tags de campañas que corrieron hace meses y siguen ahí. Cada tag activo es trabajo extra para el navegador.

Para el resto de scripts de seguimiento, usa la misma técnica del delay. Perfmatters, WP Rocket y Flying Scripts permiten retrasar la carga de scripts específicos hasta que el usuario interactúa con la página. Google Analytics y Meta Pixel no necesitan ejecutarse en el primer segundo. Se ejecutando 3 segundos después, los datos siguen siendo correctos y tu INP se desploma (para bien).

Eliminar el CLS de popups

Tres reglas de oro para popups sin CLS:

Primera: nunca muestres un popup antes de que la página termine de cargar. Configura un delay mínimo de 3 segundos. Esto le da tiempo al navegador a estabilizar el layout.

Segunda: si el popup se muestra en un contenedor dentro de la página (popup inline, no overlay), define un tamaño fijo para ese contenedor. El plugin debería hacerlo, pero muchos no lo hacen. Si tu popup aparece entre dos secciones de la homepage, asigna un alto fijo al contenedor padre con CSS personalizado.

Tercera: si puedes, reemplaza los popups por formularios embebidos dentro del contenido. Un formulario de captura de emails dentro de la página no genera CLS y convierte igual o mejor que un popup, especialmente en móvil.

Resolver el CLS de imágenes

Esto es automático si usas un plugin de optimización moderno. Asegúrate de que tus imágenes tengan los atributos width y height en el HTML. WooCommerce normalmente los incluye, pero si migraste productos o importaste imágenes con un plugin, es posible que falten.

Instala ShortPixel o Imagify y activa la opción de “Agregar dimensiones de imagen”. Ambos plugins escanean tu biblioteca de medios y añaden las dimensiones faltantes al HTML de tus páginas.

Para el lazy loading, usa el que trae WordPress por defecto (desde la versión 5.5). Si tienes un plugin externo de lazy loading, asegúrate de que excluya las imágenes que aparecen “above the fold” (las primeras que se ven sin hacer scroll). Una imagen con lazy loading que está visible al cargar la página es un desastre de CLS.

Reducir el impacto acumulativo

Después de aplicar los cambios anteriores, ejecuta PageSpeed Insights de nuevo. Si “Reduce the impact of third-party code” sigue apareciendo, el problema es la cantidad total de scripts.

Aquí tienes que tomar decisiones. ¿Realmente necesitas Hotjar Y Microsoft Clarity? ¿Necesitas el chat en vivo en todas las páginas o solo en las de producto? ¿Puedes reemplazar 3 plugins de funciones menores por uno solo que haga todo?

Menos scripts = menos problemas. Cada script que eliminas es menos trabajo para el navegador y mejor experiencia para tu cliente.

El plugin de caché correcto para WooCommerce

Un buen plugin de caché es fundamental, pero elijas el que elijas, necesitas configurarlo bien para WooCommerce.

WP Rocket es la opción más popular y funciona muy bien con WooCommerce. Activa la minificación de CSS y JavaScript, pero revisa que no rompa tu checkout. Siempre prueba el proceso de compra después de activar cualquier opción de optimización de código.

LiteSpeed Cache es la alternativa gratuita si tu hosting usa servidores LiteSpeed. Tiene opciones específicas para WooCommerce que excluyen páginas del carrito y checkout de la caché.

Lo que no debes hacer: instalar dos plugins de caché a la vez. Se pisan entre sí y generan conflictos que empeoran todo.

Configuración mínima recomendada para WooCommerce:

  • Caché de páginas activada (excluyendo carrito, checkout y mi cuenta)
  • Minificación de CSS activada
  • Minificación de JavaScript activada
  • Lazy loading de imágenes activado (con exclusiones above the fold)
  • Compresión GZIP o Brotli activada en el servidor

CDN: el último paso, no el primero

Un CDN sirve, pero no va a arreglar un INP de 800ms. El CDN reduce el tiempo de entrega de archivos estáticos (imágenes, CSS, JS), pero el INP se mide por cuánto tiempo tarda el navegador en procesar JavaScript. El archivo llega rápido, pero se ejecuta lento. Son cosas diferentes.

Activa un CDN (Cloudflare tiene plan gratuito que funciona bien) después de resolver los problemas de JavaScript. No antes. Si pones un CDN sobre una tienda con 8 scripts de terceros ejecutándose sin control, solo estás sirviendo los mismos problemas más rápido.

Checklist final para tu tienda WooCommerce

Antes de cerrar, revisa que tengas todo esto aplicado:

  1. Scripts de chat retrasados hasta la interacción del usuario (reduce INP entre 100ms y 400ms)
  2. Google Analytics, Meta Pixel y GTM tags retrasados con delay de 3 segundos (reduce INP al liberar el hilo principal)
  3. Popups con delay mínimo de 3 segundos y dimensiones definidas (reduce CLS)
  4. Imágenes con atributos width y height explícitos (reduce CLS)
  5. Lazy loading activado pero excluyendo imágenes above the fold (reduce CLS)
  6. Plugin de caché con minificación de JS activada para WooCommerce (mejora INP y LCP)
  7. CDN activado después de resolver los problemas de JavaScript (mejora LCP, no INP)
  8. PageSpeed Insights con INP por debajo de 200ms y CLS por debajo de 0.1

Cada punto de esta lista tiene un impacto medible. No son mejoras teóricas. Son cambios que he aplicado en tiendas reales y que se reflejan en las métricas de Google Search Console dentro de las siguientes semanas.

Conclusión

Resolver Core Web Vitals en una tienda WooCommerce no es un problema de servidor ni de hosting. Es un problema de gestión de scripts. Los plugins de chat, analytics, popups y reseñas son herramientas útiles para tu negocio, pero cargados sin control se convierten en el principal obstáculo entre tu tienda y una buena experiencia de usuario.

La solución no es eliminar todo. Es controlar cuándo y cómo se ejecuta cada script. Retrasa lo que no es urgente, elimina lo que no usas, y define dimensiones para todo lo que aparece dinámicamente. Con esos cambios, una tienda WooCommerce que tiene INP de 600ms y CLS de 0.35 puede bajar a INP de 150ms y CLS de 0.05.

Tu tienda merece métricas que reflejen el trabajo que le has puesto. Y tus clientes merecen una experiencia de compra que no los haga esperar.

Preguntas frecuentes

¿Por qué mi WooCommerce es tan lento si tengo buen hosting?

Porque el problema no está en el servidor. WooCommerce carga muchos scripts por sí solo, y cada plugin adicional suma más JavaScript al hilo principal del navegador. Tu hosting puede ser rápido y aun así tener un INP alto porque el navegador no puede procesar todo a tiempo.

¿Cuánto tarda Google en reconocer las mejoras en Core Web Vitals?

Google recopila datos de Chrome User Experience Report (CrUX) en un ciclo de 28 días. Después de hacer los cambios, puede tomar entre 2 y 4 semanas para que las métricas se actualicen en Search Console y PageSpeed Insights.

¿Es seguro retrasar scripts de Google Analytics?

Sí. Los datos de Analytics se siguen recopiliando correctamente. La única diferencia es que el script se ejecuta unos segundos después. Para métricas de sesión y páginas vistas, el impacto es nulo. Para eventos en tiempo real, puede haber un retraso menor que no afecta los reportes.

¿Puedo usar Cloudflare gratis para mejorar mis Core Web Vitals?

Cloudflare ayuda con la entrega de archivos estáticos, pero no resuelve problemas de JavaScript en el hilo principal. Úsalo como complemento, no como solución principal. El verdadero impacto viene de retrasar y eliminar scripts innecesarios.

¿Necesito un desarrollador para hacer estos cambios?

La mayoría de las soluciones de esta página se pueden implementar con plugins y configuraciones sin tocar código. Solo necesitarías un desarrollador si tu tema tiene problemas graves de layout shift que requieren cambios en el CSS o si tu plugin de caché rompe funcionalidades del checkout.

¿WP Rocket o LiteSpeed Cache?

Depende de tu hosting. Si tu servidor es LiteSpeed, usa LiteSpeed Cache (es gratuita y está optimizada para ese entorno). Si no, WP Rocket es la opción más segura y compatible con WooCommerce. No instales ambos.