INP en Shopify: mejora la velocidad sin tocar el tema

Si tu Shopify “carga rápido” pero al tocar un filtro, abrir el carrito, cambiar una variante o desplegar un acordeón se queda pensando, casi seguro estás pagando el precio en INP. Y desde que INP sustituyó a FID como métrica de interactividad en Core Web Vitals, este tipo de lentitud se traduce en peor experiencia… y en peor rendimiento orgánico en queries competidas. La buena noticia: en muchos casos puedes mejorar el INP en Shopify sin tocar el tema, simplemente controlando apps, scripts, etiquetas y el orden en que se ejecutan.

En SEOAGIL solemos ver el mismo patrón: tiendas con buen LCP, pero con INP degradado por terceros (reviews, A/B testing, heatmaps, chat, tracking, personalización) y por “comodidad” en la implementación (todo por GTM, todo en todas las páginas, todo siempre). Vamos a corregir eso con método y con pasos accionables.

1. Qué es INP y por qué Shopify suele fallar (2026)

INP (Interaction to Next Paint) es una métrica de Core Web Vitals que estima la “latencia real” que percibe el usuario cuando interactúa con tu web. No mide solo el tiempo hasta que el navegador recibe el evento; mide el tiempo hasta que el navegador puede pintar el siguiente frame tras procesar la interacción. En la práctica, INP se dispara cuando el hilo principal está ocupado ejecutando JavaScript, recalculando estilos o haciendo layout, y por eso el clic “no hace nada” durante cientos de milisegundos o incluso segundos.

En Shopify, lo normal es que el HTML inicial llegue razonablemente bien (CDN, caché, infraestructura sólida), pero el problema aparece en el “después”: cuando el usuario interactúa y entran en juego apps embebidas, snippets y scripts que se ejecutan en el cliente. Los casos más típicos que degradan el INP Shopify son:

• Apps que inyectan JavaScript en todas las páginas (aunque solo se usen en producto o carrito).
• Widgets de terceros: reviews, UGC, chat, recomendaciones, bundles, upsells, popups, loyalty, etc.
• Tracking excesivo vía GTM (múltiples etiquetas por interacción, listeners agresivos, triggers “All Pages”).
• Re-render y manipulación del DOM tras cada clic (por ejemplo, scripts que recalculan precios/promos en cada cambio de variante).
• Long tasks (tareas largas) por bundles de JS grandes, librerías duplicadas o código que bloquea el main thread.

Un matiz importante en 2026: con la expansión de resultados enriquecidos y resúmenes con IA (AI Overviews y motores conversacionales), la experiencia percibida sigue importando, pero además tu web compite en un entorno donde Google necesita señales de calidad consistentes. INP no es “un número” aislado: suele correlacionar con una web con demasiada complejidad en cliente, y eso también afecta a rastreo eficiente, estabilidad (CLS) y mantenibilidad.

Si tu objetivo es mejorar velocidad Shopify con impacto real en UX, INP es la palanca más infravalorada: muchas tiendas ya han trabajado imágenes y LCP, pero no han atacado la interactividad. Y lo mejor es que, sin tocar el tema, aún puedes ganar mucho control con una auditoría de scripts, reglas de carga y limpieza de apps. Si necesitas una visión completa del stack (apps + tracking + rendimiento), puedes ver nuestro enfoque en el método de trabajo de SEOAGIL.

2. Cómo medir INP en Shopify (CrUX, DevTools y extensiones)

Antes de aplicar fixes, confirma el diagnóstico con medición de campo (usuarios reales) y de laboratorio (tu navegador). La regla: CrUX manda para decidir prioridades, y DevTools manda para encontrar culpables.

1) CrUX / PageSpeed Insights (datos reales)
CrUX (Chrome UX Report) agrega experiencia real de usuarios de Chrome. Para Shopify, esto es clave porque muchos problemas de INP solo aparecen en móviles reales con CPU limitada. En la práctica, lo más accesible suele ser PageSpeed Insights, que muestra la sección de “Datos de campo” cuando hay suficiente tráfico. Qué mirar:

• INP (campo) y su distribución (p75). Si el p75 está en “needs improvement” o “poor”, prioriza.
• Segmenta por móvil vs desktop. En Shopify, móvil suele sufrir más por JS y third-parties.
• Comprueba si el problema es global o de plantillas (producto/colección/carrito).

2) Chrome DevTools Performance (debug de la causa)
DevTools te permite grabar una sesión y ver qué bloquea el main thread durante una interacción concreta. Recomendación práctica:

1. Abre la tienda en incógnito (sin extensiones) y con cache limpia.
2. DevTools → Performance → Start profiling.
3. Ejecuta la interacción problemática: abrir minicart, aplicar un filtro, cambiar variante, abrir menú, etc.
4. Stop. Busca Long tasks y picos en Main.
5. En el panel “Bottom-Up” o “Call Tree”, identifica funciones y archivos JS que consumen tiempo.

Lo que quieres encontrar no es “un número bonito”, sino el script exacto y el patrón: ¿se ejecuta en cada clic? ¿Se recalculan estilos? ¿Hay demasiados event listeners? ¿Se bloquea por parse/compile de JS?

3) Extensiones y ayudas rápidas
Sin entrar en herramientas de pago, estas ayudas son útiles para el día a día:

• Lighthouse (en DevTools) para laboratorio y recomendaciones orientativas (ojo: no sustituye campo).
• Web Vitals (extensión) para ver INP en tiempo real mientras navegas y clicas.
• Performance Monitor (DevTools) para observar CPU, JS heap y FPS en vivo al interactuar.

Consejo de consultoría: mide también con y sin consentimiento de cookies (banner). En muchas tiendas, el CMP (Consent Management Platform) y los tags condicionados por consentimiento disparan trabajo extra justo al primer clic.

Si además quieres alinear medición y negocio (conversiones, embudos, eventos), conviene revisar tracking con una capa técnica sólida. En nuestra consultoría SEO lo abordamos como un sistema: rendimiento + medición + CRO, no como optimizaciones aisladas.

3. Checklist de fixes sin tocar el tema (apps, scripts, GTM)

Esta es la parte práctica: acciones que suelen mejorar Core Web Vitals Shopify y, en particular, INP, sin editar tu theme (o con cambios mínimos desde paneles de apps, configuraciones y GTM). No todas aplican a todos los casos; prioriza según lo que viste en DevTools.

Checklist rápida (impacto alto, riesgo bajo)

• Audita apps: desinstala las que no aporten ingresos o que estén duplicadas (popups + email capture + loyalty + reviews). Menos JS = mejor INP.
• Desactiva cargas globales en apps que solo se usan en producto o carrito (muchas apps permiten “Enable on specific pages”).
• Reduce scripts de terceros: cada widget que escucha clicks y manipula DOM puede degradar INP.
• Revisa GTM: elimina etiquetas redundantes, baja triggers de “All Pages” a “Some Pages”, y evita listeners en “Click - All Elements” si no son necesarios.
• Lazy-load de widgets por interacción o por visibilidad (cuando el usuario hace scroll o abre un bloque).
• Controla A/B testing y personalización: suelen inyectar JS pesado y re-render en cada interacción.

Acciones concretas por áreas

A) Apps: menos, mejor, y solo donde toca
En Shopify, muchas apps añaden scripts por App Embed o por inyección. Sin tocar el tema, puedes:

• Revisar App Embeds y apagar los que no uses. Cada embed suele añadir JS + listeners.
• En apps de reviews/UGC/chat, busca opciones tipo “load on demand”, “defer”, “lazy load” o “only product pages”.
• Evita tener dos apps que resuelvan lo mismo (por ejemplo, dos sistemas de popups o dos upsells).

B) Scripts de terceros: carga condicional y por prioridad
Muchos scripts no necesitan estar listos en el primer frame ni en el primer clic. Estrategias sin tocar theme (o con mínima intervención vía configuraciones):

• Carga por página: el chat no es crítico en checkout; el script de reviews no es crítico en home.
• Carga tras consentimiento (bien hecho): si tu CMP dispara múltiples tags a la vez al aceptar, puedes escalonar cargas (primero analytics esencial, luego marketing).
• Carga tras interacción: por ejemplo, cargar el chat cuando el usuario pulsa el icono.

C) GTM: menos triggers, menos trabajo en main thread
GTM puede ser un “acelerador” del caos si se usa sin gobierno. Para mejorar INP:

• Convierte triggers “All Pages” en “Some Pages” (producto, colección, carrito) cuando aplique.
• Evita etiquetas que escuchen todas las interacciones (click listeners globales) si solo necesitas medir un botón.
• Elimina etiquetas duplicadas (dos píxeles midiendo lo mismo; dos configuraciones de GA4).
• Revisa el orden: no todo necesita disparar en “Initialization”.

Si tu tienda depende mucho de tracking y campañas, conviene revisar arquitectura de medición para no sacrificar rendimiento. En nuestro enfoque de web y rendimiento priorizamos que midas lo importante con el mínimo coste en interactividad.

D) Carrito, filtros y variantes: los puntos donde INP suele explotar
Aunque no toques theme, sí puedes cambiar el comportamiento de ciertas apps o componentes:

• Filtros: si usas una app de filtrado que re-renderiza toda la lista al cambiar un checkbox, prueba a reducir opciones, desactivar animaciones pesadas o limitar scripts en móvil.
• Variantes: apps de bundles/upsells que recalculan precio y DOM en cada cambio suelen crear long tasks. Revisa si pueden operar “server-side” o con menos lógica en cliente.
• Minicart / drawer: muchos scripts se enganchan al evento de abrir el carrito. Haz que se carguen solo al abrir (no al cargar la página).

Errores comunes al intentar bajar INP en Shopify

• Optimizar solo Lighthouse: el laboratorio puede “mejorar” y el INP de campo seguir igual. Prioriza CrUX.
• Instalar otra app “de velocidad” sin entender la causa: a veces añades más JS del que quitas.
• Meter todo por GTM porque “es más fácil”: es más fácil… hasta que tu INP cae.
• No segmentar por plantilla: el problema puede estar solo en producto o colección.
• Dejar scripts huérfanos tras desinstalar apps (a veces quedan etiquetas externas o configuraciones en GTM).

Si quieres una auditoría rápida de culpables (apps + terceros + GTM) y un plan priorizado para ejecutar sin tocar theme, en SEOAGIL lo trabajamos como intervención corta, con antes/después medible.

4. Conclusión: plan de 7 días para bajar INP y vender más

Reducir INP no es un proyecto eterno. Con foco y método, en 7 días puedes eliminar fricción real en la experiencia de compra. Este plan está pensado para ejecutarse sin tocar el tema (o con cambios mínimos fuera del código), priorizando acciones reversibles.

Día 1 — Foto fija (campo + lab)

• Revisa INP en CrUX/PageSpeed Insights para home, colección y producto.
• Define 2–3 interacciones críticas (abrir minicart, filtrar, cambiar variante).
• Graba DevTools Performance para cada interacción y apunta scripts dominantes.

Día 2 — Inventario de scripts y terceros

• Lista apps instaladas y qué páginas afectan.
• Lista scripts de terceros (reviews, chat, heatmaps, AB testing, afiliación).
• Identifica duplicidades (dos trackers, dos popups, dos sistemas de recomendaciones).

Día 3 — Limpieza y apagado selectivo

• Desinstala o desactiva apps sin ROI claro.
• Apaga embeds globales no críticos y limita a plantillas necesarias.
• Verifica que no queden scripts activos tras la desinstalación (GTM/etiquetas).

Día 4 — GTM bajo control

• Reduce triggers “All Pages”.
• Elimina listeners globales de click si no aportan valor.
• Retrasa etiquetas no esenciales (marketing/remarketing) si afectan interactividad.

Día 5 — Lazy-load por intención

• Configura carga por interacción para chat, popups, widgets secundarios.
• Configura carga por visibilidad para bloques que están debajo del fold.

Día 6 — Re-medición y verificación

• Repite grabaciones de Performance en las mismas interacciones.
• Comprueba que disminuyen long tasks y que la interacción “pinta” antes.
• Valida que tracking y conversiones siguen funcionando (QA básico).

Día 7 — Estabilización y reglas

• Define una política: cualquier app nueva debe justificar su impacto y limitarse por plantilla.
• Documenta el stack de terceros y qué dispara cada tag.
• Programa una revisión mensual (especialmente si haces campañas y añades scripts).

La clave es entender que INP suele ser un síntoma de “demasiado JavaScript haciendo demasiado pronto”. Al quitar ruido y priorizar cargas, no solo mejoras métricas: reduces fricción en clicks críticos (añadir al carrito, seleccionar variante, aplicar filtro) y eso impacta en conversión. Si necesitas que lo aterricemos en tu caso (apps específicas, GTM real, restricciones de tu stack), revisa los servicios de SEOAGIL o pide una evaluación directa.

Preguntas frecuentes

¿Puedo mejorar el INP en Shopify sin tocar el tema de verdad?

Sí, en muchos casos. El mayor impacto suele venir de apps, scripts de terceros y GTM. Limitando dónde cargan, cuándo cargan y cuántos listeners añaden, puedes mejorar INP sin editar Liquid. Si el problema está en lógica del theme (por ejemplo, un script del propio tema que bloquea), ahí sí puede requerir desarrollo.

¿Por qué mi Lighthouse dice que estoy bien pero CrUX muestra INP malo?

Porque Lighthouse es laboratorio (una simulación) y CrUX es campo (usuarios reales). INP suele empeorar en móviles reales, con redes variables, CPU más lenta y sesiones largas donde se acumulan scripts y listeners.

¿Qué interacción suele empeorar más el INP en eCommerce?

Normalmente: abrir el minicart, aplicar filtros, cambiar variantes y clics en elementos que disparan muchos tags (por ejemplo, botones que activan tracking + upsell + recomendaciones).

¿Desinstalar apps siempre mejora la velocidad?

No siempre, pero con frecuencia sí. Algunas apps dejan scripts residuales o se sustituyen por otras igual de pesadas. La mejora real llega cuando reduces JavaScript ejecutándose en el main thread durante interacciones. Por eso es clave medir antes/después.

¿Qué priorizo si tengo poco tiempo: INP o LCP?

Depende de tus datos de campo. Si LCP ya está estable y el INP está en “needs improvement/poor”, prioriza INP: es lo que el usuario nota cuando intenta comprar. Si ambos están mal, ataca primero lo que bloquee ingresos (suele ser interactividad en ficha de producto y carrito).