Corregir INP alto en Shopify: 7 soluciones comprobadas para bajar de 200 ms (2026)

¿Qué es INP y por qué reemplazó a FID?

La interacción con Next Paint (INP) es una de las tres de Google Core Web Vitals : las métricas que influyen directamente en su clasificación de búsqueda y miden la experiencia real del usuario. Medidas del INP qué tan rápido responde su página a las interacciones del usuario : cada clic, toque y pulsación de tecla durante toda la visita a la página.

En marzo de 2024, el INP oficialmente reemplazó el retardo de la primera entrada (FID) como Core Web Vital. ¿Por qué? FID solo midió el retraso antes del navegador comenzó procesando la primera interacción. Omitió dos problemas críticos: tiempo de procesamiento lento (el trabajo real que realiza el navegador) y retraso en la presentación (tiempo para pintar el resultado). También ignoró cada interacción después de la primera.

INP soluciona todo eso. rastrea cada interacción and measures the full round trip — from the moment a user clicks to the moment the screen updates. Each interaction has three phases:

INP informa el peor interacción (técnicamente el percentil 98) en toda la visita a la página. Esto significa que incluso una interacción lenta, como un botón lento "Agregar al carrito" o un menú desplegable de filtro lento, puede fallar su puntaje INP.

Por qué INP es importante para tu tienda Shopify: Una tienda que responde lentamente se siente rota. Cuando un cliente toca "Agregar al carrito" y no sucede nada durante 400 ms, vuelve a tocar y, a veces, termina con dos artículos o se aleja por completo. Un INP deficiente perjudica tanto su clasificación SEO como su tasa de conversión. ¿Quieres ver dónde se encuentra tu tienda? Realiza una prueba de velocidad gratuita.

La solución fácil: optimización automática de INP

Antes de sumergirse en la optimización manual de JavaScript, existe un enfoque más rápido. Thunder Page Speed Optimizer aborda automáticamente varias de las causas más comunes de INP alto en las tiendas Shopify.

Cómo medir el INP en tu tienda Shopify

Antes de corregir INP, es necesario identificar qué interacciones son lentas y por qué. Aquí están las mejores herramientas:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const duration = entry.duration;
    const status = duration < 200 ? '🟢' : duration < 500 ? '🟡' : '🔴';
    console.log(
      `${status} INP candidate: ${duration.toFixed(0)}ms`,
      `| Input delay: ${entry.inputDelay?.toFixed(0) ?? '?'}ms`,
      `| Processing: ${entry.processingDuration?.toFixed(0) ?? '?'}ms`,
      `| Presentation: ${(duration - (entry.inputDelay ?? 0) - (entry.processingDuration ?? 0)).toFixed(0)}ms`,
      `| Target: ${entry.target?.tagName ?? 'unknown'}`
    );
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

Causas comunes de INP alto en Shopify

Antes de comenzar a solucionar problemas, comprenda qué está causando un INP alto en su tienda. Estos son los culpables más comunes, clasificados según la frecuencia con la que afectan a las tiendas Shopify:

La mayoría de las tiendas Shopify tienen una combinación de estos problemas. La buena noticia: incluso solucionar una o dos de las causas principales puede mejorar drásticamente su puntuación INP. Repasemos las soluciones. Para obtener más información sobre cómo se relacionan estos problemas con la velocidad general de la tienda, consulte nuestra guía completa de optimización de velocidad de Shopify.

Solución n.º 1: dividir tareas largas de JavaScript

El hilo principal del navegador es de un solo hilo: solo puede hacer una cosa a la vez. Cuando JavaScript se ejecuta durante más de 50 ms sin ceder, se convierte en un "tarea larga" que bloquea las interacciones del usuario. Si un usuario hace clic mientras se ejecuta una tarea larga, el navegador no puede responder hasta que finalice la tarea, lo que aumenta directamente el retraso de entrada.

Utilice Scheduler.yield() (Recomendado)

La forma moderna de dividir tareas largas es programador.rendimiento(). Pausa su código, permite que el navegador maneje las interacciones pendientes y la representación, luego reanuda:

// Before: One long task blocking the main thread
async function processProducts(products) {
  for (const product of products) {
    updateProductCard(product);  // DOM updates
    calculatePricing(product);   // Heavy computation
    renderReviews(product);      // More DOM work
  }
}

// After: Yields between iterations so browser stays responsive
async function processProducts(products) {
  for (const product of products) {
    updateProductCard(product);
    calculatePricing(product);
    renderReviews(product);

    // Yield to the browser between each product
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    }
  }
}

Alternativa: patrón setTimeout

Para navegadores que no son compatibles programador.rendimiento() todavía, usa el establecerTiempo de espera(0) Patrón :

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function processProducts(products) {
  for (let i = 0; i < products.length; i++) {
    updateProductCard(products[i]);

    // Yield every 5 iterations to balance throughput and responsiveness
    if (i % 5 === 0) {
      await yieldToMain();
    }
  }
}

Utilice requestAnimationFrame para actualizaciones visuales

Cuando su controlador de eventos necesite actualizar la interfaz de usuario, incluya los cambios visuales en solicitarAnimationFrame para agruparlos con el ciclo de renderizado del navegador:

// Bad: DOM updates interleaved with logic
button.addEventListener('click', () => {
  const data = computeExpensiveData();
  element.style.height = data.height + 'px';  // Forces layout
  element.textContent = data.label;
  element.classList.add('active');
});

// Good: Separate computation from rendering
button.addEventListener('click', () => {
  const data = computeExpensiveData();
  requestAnimationFrame(() => {
    element.style.height = data.height + 'px';
    element.textContent = data.label;
    element.classList.add('active');
  });
});

Solución n.º 2: optimizar los controladores de eventos

Cada controlador de eventos que se ejecuta durante la interacción del usuario se suma a la fase de tiempo de procesamiento de INP. El objetivo: hacer que sus manejadores sean lo más rápidos posible y posponer cualquier cosa que no sea inmediatamente visible.

Eventos de disparo rápido antirrebote

Eventos como desplazamiento, cambio de tamaño y entrada se activan muchas veces por segundo. Sin rebote, cada evento ejecuta su controlador, creando una acumulación de tareas largas:

// Bad: Fires on every keystroke in search
searchInput.addEventListener('input', (e) => {
  fetchSearchResults(e.target.value);  // API call on every keypress!
  renderSuggestions();
});

// Good: Debounce to max once per 300ms
let debounceTimer;
searchInput.addEventListener('input', (e) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    fetchSearchResults(e.target.value);
    renderSuggestions();
  }, 300);
});

Aplazar el trabajo no visual

Cuando un usuario hace clic en "Agregar al carrito", debe ver comentarios de inmediato, pero el seguimiento analítico, las comprobaciones de inventario y las actualizaciones de recomendaciones pueden ocurrir después de la actualización visual:

addToCartButton.addEventListener('click', async () => {
  // 1. Visual feedback FIRST (what the user needs to see)
  showCartAnimation();
  updateCartCount();

  // 2. Defer non-visual work
  requestIdleCallback(() => {
    trackAnalyticsEvent('add_to_cart');
    updateRecommendations();
    syncInventory();
  });
});

Usar delegación de eventos

En lugar de adjuntar controladores de clics individuales a docenas de tarjetas de productos, utilice la delegación de eventos con un único controlador en el contenedor principal:

// Bad: 50 individual handlers on a collection page
document.querySelectorAll('.product-card').forEach(card => {
  card.addEventListener('click', handleProductClick);
});

// Good: One handler via event delegation
document.querySelector('.product-grid').addEventListener('click', (e) => {
  const card = e.target.closest('.product-card');
  if (card) handleProductClick(card);
});

Solución n.º 3: reducir el tamaño del DOM

Cada elemento en su DOM hace que los recálculos del diseño sean más lentos. Cuando el navegador necesita actualizar la pantalla después de una interacción (la fase de retraso de la presentación), debe recalcular los estilos y el diseño de potencialmente miles de elementos. Google recomienda mantener su DOM bajo 1.400 elementos : muchas tiendas Shopify tienen más de 3000.

Audite su tamaño DOM

Verifique su tamaño DOM actual en la consola Chrome DevTools:

console.log('DOM elements:', document.querySelectorAll('*').length);
console.log('Max depth:', document.querySelector('[data-max-depth]')?.dataset.maxDepth);

// Find the heaviest sections
document.querySelectorAll('section, div[class]').forEach(el => {
  const count = el.querySelectorAll('*').length;
  if (count > 100) console.log(count, el.className || el.tagName);
});

Fuentes comunes de hinchazón de DOM en Shopify

• Mega menús : a menudo muestra todo el contenido desplegable incluso cuando está oculto. Utilice renderizado diferido o visibilidad del contenido: automático para secciones fuera de pantalla.
• Selectores de variantes de producto : las tiendas con más de 50 variantes pueden mostrar elementos de opciones ocultos para cada una. Cargue variantes bajo demanda.
• Listas de enlaces de pie de página : los megaenlaces de pie de página con docenas de columnas agregan cientos de elementos DOM debajo de la página.
• Duplicados ocultos en dispositivos móviles/escritorios : los temas que representan la navegación móvil y de escritorio (ocultando uno con CSS) duplican los elementos DOM.

Usar visibilidad de contenido para contenido fuera de la pantalla

/* Skip rendering for sections below the fold */
.product-recommendations,
.footer-mega-links,
.recently-viewed {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimated height */
}

Esta propiedad CSS le indica al navegador que omita el trabajo de renderizado de elementos fuera de la pantalla. Cuando el usuario se desplaza cerca de ellos, el navegador los muestra justo a tiempo. Esto mejora directamente la fase de retraso de presentación de INP porque hay menos elementos para recalcular durante las interacciones. Para más información sobre la reducción problemas relacionados con el diseño, consulta nuestra guía CLS.

Solución n.º 4: eliminar la destrucción del diseño

La alteración del diseño ocurre cuando JavaScript alterna entre leer y escribir propiedades de diseño DOM en un bucle. Cada lectura obliga al navegador a recalcular el diseño de forma sincrónica y, si escribe inmediatamente después, la siguiente lectura fuerza otro recálculo.

// Bad: Layout thrashing — forces layout recalc on EVERY iteration
function resizeCards() {
  const cards = document.querySelectorAll('.product-card');
  cards.forEach(card => {
    const height = card.offsetHeight;      // READ (forces layout)
    card.style.minHeight = height + 'px';  // WRITE (invalidates layout)
    // Next iteration's read forces ANOTHER layout recalculation
  });
}

// Good: Batch reads, then batch writes
function resizeCards() {
  const cards = document.querySelectorAll('.product-card');

  // Phase 1: Read all values
  const heights = Array.from(cards).map(card => card.offsetHeight);

  // Phase 2: Write all values (only one layout recalc)
  cards.forEach((card, i) => {
    card.style.minHeight = heights[i] + 'px';
  });
}

Propiedades que activan el diseño forzado: altura de compensación, ancho de desplazamiento, getBoundingClientRect(), desplazarsearriba, altura del cliente, y obtenerEstiloComputado(). Cuando cualquiera de estos se lee después de una escritura DOM, el navegador debe volver a calcular el diseño de forma sincrónica.

Audite el JavaScript de su tema para detectar estos patrones; son especialmente comunes en diseños de cuadrícula de productos, encabezados fijos e implementaciones de desplazamiento infinito.

Solución n.º 5: domesticar scripts de terceros

Los scripts de terceros son los asesinos silenciosos de INP en las tiendas Shopify. Cada aplicación que instale puede agregar JavaScript que se ejecuta en cada carga de página y, lo que es más importante, en cada interacción del usuario. Los scripts de análisis que rastrean los clics, los widgets de revisión que se procesan al pasar el mouse y los widgets de chat que interceptan eventos compiten por el hilo principal.

Audite el impacto de su script de terceros

In Chrome DevTools, record a Performance trace while interacting with your page. In the Main thread flame chart, look for long tasks from third-party domains. You can also use the Panel de red → filtrar por "JS" → ordenar por tamaño para ver qué scripts se están cargando:

• Análisis : Google Analytics, Meta Pixel y TikTok Pixel suelen añadir oyentes de eventos
• Reseñas — Yotpo, Judge.me y Loox pueden procesar eventos de desplazamiento y clic
• Charla : Tidio, Zendesk y Gorgias interceptan eventos de clic en toda la página
• Upsell/Cross-sell — Las aplicaciones ReConvert, Bold a menudo agregan controladores a las interacciones del carrito

Enfoque manual: Aplazar con activación de interacción

Cargue scripts de terceros no críticos solo después de la primera interacción del usuario, cuando la página ya responde:

<script>
  // Load non-critical scripts after first user interaction
  const loadDeferredScripts = () => {
    // Analytics
    const ga = document.createElement('script');
    ga.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX';
    ga.async = true;
    document.head.appendChild(ga);

    // Chat widget
    const chat = document.createElement('script');
    chat.src = 'https://cdn.chatwidget.com/widget.js';
    chat.async = true;
    document.head.appendChild(chat);

    // Remove listeners after loading
    ['click', 'scroll', 'keydown', 'touchstart'].forEach(event =>
      document.removeEventListener(event, loadDeferredScripts)
    );
  };

  ['click', 'scroll', 'keydown', 'touchstart'].forEach(event =>
    document.addEventListener(event, loadDeferredScripts, { once: false, passive: true })
  );
</script>

Este patrón funciona pero es frágil: debe mantener la lista de scripts manualmente, manejar las dependencias entre scripts y asegurarse de que nada se rompa cuando los scripts se cargan fuera de orden. Esto es exactamente lo que Thunder automatiza: identifica qué scripts es seguro posponer, administra sus dependencias y los carga en el orden óptimo. Leer más sobre administrar scripts de terceros en Shopify.

Avanzado: trabajadores web y división de código

Para tiendas con funcionalidades personalizadas complejas (configuradores de productos avanzados, cálculos de precios en tiempo real o búsqueda del lado del cliente), estas técnicas avanzadas pueden reducir drásticamente el tiempo de procesamiento.

Trasladar la informática pesada a los trabajadores web

Web Workers ejecuta JavaScript en un hilo separado, completamente independiente del hilo principal. Esto significa que la computación intensa no bloqueará las interacciones del usuario:

// pricing-worker.js — runs on a separate thread
self.addEventListener('message', (e) => {
  const { products, discountRules } = e.data;
  const calculated = products.map(p => ({
    ...p,
    finalPrice: applyDiscountRules(p, discountRules),
    savings: calculateSavings(p, discountRules),
  }));
  self.postMessage(calculated);
});

// main.js — keeps the main thread free
const pricingWorker = new Worker('/pricing-worker.js');

variantSelector.addEventListener('change', () => {
  // Show loading state immediately (fast — on main thread)
  showPriceLoading();

  // Offload heavy calculation to worker (won't block interactions)
  pricingWorker.postMessage({
    products: getSelectedProducts(),
    discountRules: window.discountRules,
  });
});

pricingWorker.addEventListener('message', (e) => {
  // Update UI with results (fast — just DOM updates)
  updatePriceDisplay(e.data);
});

División de código para tema JavaScript

No cargue todo JavaScript por adelantado. Código dividido para que cada página solo cargue lo que necesita:

// Instead of loading everything in theme.js:
// import './product-zoom.js';
// import './cart-drawer.js';
// import './mega-menu.js';
// import './search-autocomplete.js';

// Load only when needed:
if (document.querySelector('.product-media')) {
  import('./product-zoom.js');
}
if (document.querySelector('.cart-drawer')) {
  import('./cart-drawer.js');
}

// Or load on first interaction:
document.querySelector('.search-input')?.addEventListener('focus', () => {
  import('./search-autocomplete.js').then(mod => mod.init());
}, { once: true });

Las importaciones dinámicas reducen la carga útil inicial de JavaScript, lo que significa menos bloqueo del hilo principal durante los primeros momentos críticos cuando es más probable que los usuarios interactúen. Esto también reduce el impacto de recursos de bloqueo de renderizado en tu tienda.

Correcciones manuales de INP frente a Thunder: comparación lado a lado

Así es como se compara el enfoque manual con permitir que Thunder maneje la optimización INP automáticamente:

Las correcciones manuales le brindan un control granular, pero exigen una gran experiencia en JavaScript y un mantenimiento continuo. Thunder maneja las optimizaciones más impactantes, en particular el aplazamiento de secuencias de comandos y la administración de terceros, de forma automática. Muchos desarrolladores combinan ambos: instalan Thunder para el trabajo pesado y luego aplican correcciones manuales para los cuellos de botella del código personalizado. Ver planes de precios de Thunder.

Preguntas frecuentes