Cómo diagnosticar problemas de INP en Shopify

Una tienda puede mostrar la página rápido y tardar en responder cuando el cliente selecciona una talla o abre el carrito. INP mide la capacidad de respuesta de las interacciones observadas; no es…

Para corregirlo hay que identificar qué interacción presenta la demora y qué trabajo ocurre en el navegador antes de que la pantalla responda.

Separa las etapas de la interacción

Una interacción lenta puede esperar porque el hilo principal ya está ocupado; después, el manejador puede ejecutar demasiado código y el navegador puede tardar en pintar el resultado. Las tres etapas necesitan diagnósticos distintos.

Síntoma	Qué investigar
La acción espera antes de ejecutarse	Tareas largas e inicialización de scripts
El manejador tarda en terminar	Cálculos, eventos duplicados y trabajo sobre el DOM
La respuesta visual llega tarde	Recalcular estilos, diseño y renderizado

Un selector de variantes puede activar cambios en precio, imagen, disponibilidad y apps. Prueba con un producto representativo y registra exactamente qué opción se seleccionó.

Reproduce antes de optimizar

Revisa datos de campo disponibles para saber qué páginas o grupos requieren atención. Después usa una traza de rendimiento en Chrome DevTools, con un dispositivo o perfil comparable al de los usuarios. Repite el recorrido con distintas condiciones de consentimiento y anota las apps que se inicializan.

En una copia del theme, desactiva una dependencia a la vez cuando sea viable y compara bajo las mismas condiciones. No atribuyas el problema a una app por aparecer en la página: busca evidencia en la traza y valida que la funcionalidad siga operando.

Diseña una corrección verificable

Divide trabajo largo cuando corresponda, elimina inicializaciones duplicadas, limita el alcance de los listeners y evita actualizar partes de la página que no cambiaron. Evalúa el costo de introducir dependencias nuevas y no pospongas todo al primer clic si eso hace esperar al comprador.

Prueba variantes, carrito, buscador, accesibilidad y medición antes de publicar. Compara trazas y observa el dato de campo conforme se acumulen visitas; una mejora de laboratorio no garantiza una mejora inmediata en el agregado.

Consulta la explicación de INP de web.dev y usa los recursos técnicos de Shugert para el contexto general de rendimiento.