Cómo arreglar las aplicaciones de recomendación de productos que ralentizan Shopify (2026)

Solución rápida con Thunder

Por qué los widgets de recomendación ralentizan las páginas de productos

Un widget de recomendación rara vez es solo una fila de productos. Las aplicaciones de estilo Rebuy, Nosto, LimeSpot, Wiser y Also Bought a menudo cargan un tiempo de ejecución de personalización, identifican al visitante, obtienen reglas o resultados del modelo, solicitan datos de productos, representan tarjetas de productos en JavaScript, descargan varias imágenes adicionales y envían análisis de impresiones. Ese trabajo puede resultar útil una vez que el comprador ve el producto. Es perjudicial antes de que la página del producto sea utilizable.

Los síntomas habituales de PageSpeed ​​son un mayor tiempo total de bloqueo, una peor interacción con Next Paint en dispositivos móviles y una imagen LCP que se inicia tarde porque el navegador está ocupado analizando la recomendación JavaScript. de google guía de tareas largas explica por qué son importantes estas tareas de aplicaciones y Shopify ayuda sobre rendimiento web recomienda reducir el código de la aplicación que se carga antes de que sea necesario.

La solución es la secuenciación. La imagen principal, el precio, las variantes, el botón de agregar al carrito y los detalles del producto son lo primero. Las filas de recomendaciones pueden esperar hasta que el comprador se desplace.

Paso 1: Auditar el tiempo de ejecución de la recomendación

Pruebe una página de producto con la aplicación habilitada, luego deshabilite la aplicación de recomendación incrustada en un tema duplicado y pruebe la misma página nuevamente. Compare la transferencia de JavaScript, las tareas largas, la hora de inicio de LCP, la transferencia de imágenes y el INP. El siguiente fragmento captura los tiempos de ejecución de recomendaciones comunes e informa su tamaño.

// Run in DevTools Console on a product page with recommendations enabled.
performance.getEntriesByType('resource')
  .filter((entry) => /rebuy|nosto|limespot|wiser|recommend|also-bought|personalization/i.test(entry.name))
  .map((entry) => ({
    url: entry.name,
    kb: Math.round((entry.transferSize || 0) / 1024),
    ms: Math.round(entry.duration),
    type: entry.initiatorType,
  }))
  .sort((a, b) => b.kb - a.kb)
  .forEach((entry) => console.log(entry));

console.log('Recommendation cards:', document.querySelectorAll('[class*="recommend"] article, [data-recommendations] article').length);

Verifique el resultado con el prueba de velocidad gratuita de Shopify y PageSpeed ​​Insights. Si el widget agrega 200 KB de JavaScript y ocho miniaturas de productos antes de que se establezca la imagen principal del producto, pertenece más adelante en el orden de carga.

Paso 2: Mover las recomendaciones debajo de la ruta de compra

Las filas de recomendaciones no deben aparecer encima del formulario del producto. En la mitad superior de la página, los compradores necesitan medios del producto, precio, variantes, disponibilidad, resumen de reseñas, promesa de entrega y complementos al carrito. Una fila "También te puede gustar" antes de esos elementos crea ruido visual y hace que el navegador cargue más imágenes de las que necesita para la decisión de compra.

• Páginas de productos: coloque recomendaciones después de la sección principal del producto y los detalles principales.
• Cajones del carrito: mantenga pequeñas las ventas adicionales y cárguelas después de que se abra el cajón, no durante la carga de la página.
• Páginas de inicio: evite filas de productos personalizados en la primera ventana gráfica a menos que la tienda esté construida alrededor de ellas.
• Colecciones: mantenga los widgets de recomendación fuera de la primera cuadrícula de productos; Utilice primero tarjetas de productos nativos.

Por la razón LCP detrás de esto, use el Guía de optimización de Shopify LCP. La primera imagen del producto y el contenido principal deben ser la prioridad del navegador, no un carrusel personalizado debajo.

Paso 3: Carga diferida de aplicaciones de recomendación de productos

Once the widget is below the fold, load it when the row is close to the viewport. IntersectionObserver avoids loading the app for visitors who bounce from the first screen. requestIdleCallback keeps the script from running during a tap or scroll if the browser is busy.

// Load the recommendation app only when the widget is close to view.
// Use this for below-the-fold "You may also like" and cart upsell blocks.
const widget = document.querySelector('[data-recommendation-widget]');

if (widget && 'IntersectionObserver' in window) {
  const loadWidget = () => {
    const src = widget.dataset.recommendationSrc;
    if (!src || widget.dataset.loaded === 'true') return;

    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
    widget.dataset.loaded = 'true';
  };

  const io = new IntersectionObserver((entries, observer) => {
    if (!entries.some((entry) => entry.isIntersecting)) return;
    if ('requestIdleCallback' in window) {
      requestIdleCallback(loadWidget, { timeout: 1200 });
    } else {
      setTimeout(loadWidget, 250);
    }
    observer.disconnect();
  }, { rootMargin: '500px 0px' });

  io.observe(widget);
}

Si su aplicación presenta una carga diferida, use primero la configuración de la aplicación. Si la aplicación solo le proporciona una etiqueta de secuencia de comandos global, mueva la etiqueta detrás de un cargador como este dentro de un tema duplicado. el Guía de carga diferida de Shopify y guía LCP de carga diferida cubre los casos extremos.

Paso 4: Utilice recomendaciones nativas de Shopify siempre que sea posible

Si la fila es solo "productos relacionados" o "también te pueden gustar", las recomendaciones nativas de Shopify suelen ser suficientes. Comience con Shopify Search & Discovery para configurar productos complementarios manuales en los más vendidos, luego presente esas recomendaciones a través del tema antes de agregar una ventana emergente o una aplicación de personalización. Evitan un SDK de personalización y pueden mantener imágenes de productos en el CDN de Shopify. Guarde recomendaciones impulsadas por la aplicación para los casos en los que la aplicación obtiene su JavaScript: paquetes de carritos, clasificación de IA, lógica posterior a la compra o reglas de comercialización que no puede expresar de forma nativa.

{%- comment -%}
  Native Shopify recommendations fallback. It avoids a personalization SDK
  for simple "related products" rows and keeps images on Shopify's CDN.
{%- endcomment -%}

<product-recommendations
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4"
  data-product-id="{{ product.id }}"
>
  {%- if recommendations.performed and recommendations.products_count > 0 -%}
    <ul class="recommendations-grid">
      {%- for product in recommendations.products limit: 4 -%}
        <li>
          <a href="{{ product.url }}">
            {{ product.featured_image | image_url: width: 480 | image_tag: loading: 'lazy', widths: '240,360,480', sizes: '(min-width: 990px) 25vw, 50vw' }}
            <span>{{ product.title }}</span>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
</product-recommendations>

Shopify documenta el punto final de recomendaciones de productos y ayudantes de imágenes líquidas. Los mismos principios de tamaño de imagen aparecen en nuestra Guía de optimización de imágenes de Shopify y guía de imágenes del tamaño adecuado.

Paso 5: tarjetas de límite, imágenes y seguimiento

Las filas de recomendaciones se vuelven lentas porque intentan hacer demasiado. Ocho tarjetas, medios flotantes, insignias, precios de comparación, estrellas de revisión, muestras, adición rápida y balizas de seguimiento convierten una simple venta adicional en una segunda cuadrícula de productos. Tapa la fila y mantenla estable.

/* Recommendation rows should be stable, small, and below the buying path. */
.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  min-height: 320px;
  contain: layout paint;
}

.recommendations-grid img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .recommendations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 520px;
  }

  .recommendations-grid li:nth-child(n + 5) {
    display: none;
  }
}

• Utilice 4 tarjetas en el escritorio y entre 2 y 4 en el móvil.
• Deshabilite los videos flotantes y las vistas previas de segundas imágenes dentro de las filas de recomendaciones.
• Elimina las estrellas de reseñas duplicadas si tu aplicación de reseñas ya se carga en otro lugar.
• Análisis de impresiones por lotes después del estado inactivo en lugar de activar una baliza por tarjeta en la primera pintura.
• Utilice anchos de imagen de alrededor de 360-480 px para tarjetas, no imágenes de productos originales.

Paso 6: Alcance de los widgets por plantilla

Las aplicaciones de recomendación a menudo se cargan en toda la tienda porque la inserción de la aplicación es global. Esto rara vez es necesario. Una aplicación de recomendación de productos normalmente pertenece a las superficies del producto y del carrito. No es necesario cargarlo en publicaciones de blogs, páginas de políticas, páginas de contraseñas ni en la mayoría de las páginas de destino.

{%- assign load_recommendations = false -%}

{%- if template.name == 'product' or template.name == 'cart' -%}
  {%- assign load_recommendations = true -%}
{%- endif -%}

{%- if template.name == 'index' or template.name == 'collection' or template.name == 'page' -%}
  {%- assign load_recommendations = false -%}
{%- endif -%}

{%- if load_recommendations -%}
  <!-- Product recommendation app embed or native recommendations section goes here. -->
{%- endif -%}

Shopify ayuda con bloques de aplicaciones temáticas explica cómo se adjuntan los bloques de aplicaciones a los tipos de páginas. Utilice primero la orientación de la aplicación y luego los guardias líquidos solo cuando la aplicación no le proporcione un control claro de la orientación.

Paso 7: Proteger el INP móvil

El INP móvil empeora cuando un carrusel de recomendaciones ejecuta largas tareas de JavaScript mientras el comprador toca tamaño, color, cantidad o agregar al carrito. Mantenga el widget inactivo hasta que la página se haya asentado. Evite las bibliotecas de carrusel que adjuntan controladores táctiles pesados. Utilice oyentes pasivos siempre que sea posible y pruebe en un perfil de Android de gama baja, no solo en una computadora portátil de escritorio.

Leer el Guía de reparación de INP de Shopify, guía para oyentes pasivos de eventos, y Guía de tiempo total de bloqueo si PageSpeed todavía marca tareas largas después de cargar el widget de forma diferida.

Solución manual frente a solución Thunder

Arreglar el widget sin matar AOV

Las aplicaciones de recomendación pueden ganarse su lugar. El error es dejarlos funcionar antes de que el comprador pueda evaluar el producto. Mantenga la fila debajo de la ruta de compra, cargue de forma diferida el tiempo de ejecución, las tarjetas límite y los tamaños de imagen, prefiera recomendaciones nativas para filas simples, posponga los análisis y pruebe el tema duplicado antes de promocionarlo.

Para obtener una hoja de ruta más amplia, utilice el guía completa de optimización de velocidad de Shopify, el la mejor guía de aplicaciones de velocidad de Shopify, y el guía de revisión de velocidad de la aplicación. Esa es la forma práctica de arreglar la aplicación de recomendación de productos que ralentiza Shopify sin renunciar al aumento de AOV.

FAQ