Comment réparer les applications de recommandation de produits qui ralentissent Shopify (2026)

Solution rapide avec Thunder

Pourquoi les widgets de recommandation ralentissent les pages de produits

Un widget de recommandation se résume rarement à une rangée de produits. Les applications de style Rebuy, Nosto, LimeSpot, Wiser et Also Bought chargent souvent un runtime de personnalisation, identifient le visiteur, récupèrent des règles ou une sortie de modèle, demandent des données sur les produits, restituent des fiches produits en JavaScript, téléchargent plusieurs images supplémentaires et envoient des analyses d'impression. Ce travail peut être utile une fois que l’acheteur a vu le produit. C’est nuisible avant que la page produit ne soit utilisable.

Les symptômes habituels de PageSpeed ​​sont un temps de blocage total plus élevé, une pire interaction avec Next Paint sur mobile et une image LCP qui démarre tardivement car le navigateur est occupé à analyser la recommandation JavaScript. Google guidage pour les tâches longues explique pourquoi ces tâches d'application sont importantes, et celles de Shopify Aide sur les performances Web recommande de réduire le code de l'application qui se charge avant qu'il ne soit nécessaire.

Le correctif est le séquençage. L'image du héros, le prix, les variantes, le bouton d'ajout au panier et les détails du produit viennent en premier. Les lignes de recommandation peuvent attendre que l'acheteur fasse défiler.

Étape 1 : Auditer le runtime de la recommandation

Testez une page produit avec l'application activée, puis désactivez l'application de recommandation intégrée dans un thème en double et testez à nouveau la même page. Comparez le transfert JavaScript, les tâches longues, l'heure de démarrage du LCP, le transfert d'images et l'INP. L'extrait ci-dessous capture les durées d'exécution des recommandations courantes et indique leur taille.

// 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);

Recoupez le résultat avec le test de vitesse Shopify gratuit et PageSpeed ​​Insights. Si le widget ajoute 200 Ko de JavaScript et huit vignettes de produit avant que l'image principale du produit ne soit installée, il appartient plus tard dans l'ordre de chargement.

Étape 2 : déplacer les recommandations sous le parcours d'achat

Les lignes de recommandation ne doivent pas apparaître au-dessus du formulaire de produit. Au-dessus de la ligne de flottaison, les acheteurs ont besoin de supports produits, de prix, de variantes, de disponibilité, de résumé des avis, de promesse de livraison et d'ajout au panier. Une ligne « Vous aimerez peut-être aussi » avant ces éléments crée un bruit visuel et oblige le navigateur à charger plus d'images que ce dont il a besoin pour la décision d'achat.

• Pages produits : placez les recommandations après la section principale du produit et les détails principaux.
• Tiroirs du chariot : limitez les ventes incitatives et chargez-les après l'ouverture du tiroir, pas pendant le chargement de la page.
• Pages d'accueil : évitez les lignes de produits personnalisées dans la première fenêtre, à moins que la boutique ne soit construite autour d'elles.
• Collections : gardez les widgets de recommandation en dehors de la première grille de produits ; utilisez d'abord les fiches produits natives.

Pour la raison LCP derrière cela, utilisez le Guide d'optimisation Shopify LCP. La première image du produit et le média héros doivent être la priorité du navigateur, et non un carrousel personnalisé en dessous.

Étape 3 : Chargement paresseux des applications de recommandation de produits

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 votre application expose un chargement paresseux, utilisez d'abord le paramètre de l'application. Si l'application ne vous donne qu'une balise de script globale, déplacez la balise derrière un chargeur comme celui-ci dans un thème en double. Le Guide de chargement paresseux de Shopify et Guide LCP de chargement paresseux couvre les cas extrêmes.

Étape 4 : utilisez les recommandations natives de Shopify lorsque cela est possible

Si la ligne contient simplement « Produits associés » ou « Vous pourriez également aimer », les recommandations natives de Shopify suffisent généralement. Commencez par Shopify Search & Discovery pour définir manuellement des produits complémentaires sur les meilleures ventes, puis affichez ces recommandations via le thème avant d'ajouter une application contextuelle ou de personnalisation. Ils évitent un SDK de personnalisation et peuvent conserver les images de produits sur le CDN de Shopify. Enregistrez les recommandations basées sur l'application pour les cas où l'application gagne son JavaScript : offres groupées de paniers, classement IA, logique post-achat ou règles de marchandisage que vous ne pouvez pas exprimer de manière native.

{%- 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 documente le et assistants d'image Liquid. Les mêmes principes de dimensionnement des images apparaissent dans notre Guide d'optimisation des images Shopify et guide des images correctement dimensionnées.

Étape 5 : Cartes de plafond, images et suivi

Les lignes de recommandation deviennent lentes car elles essaient d'en faire trop. Huit cartes, supports de survol, badges, comparaisons de prix, étoiles d'évaluation, échantillons, ajout rapide et balises de suivi transforment une simple vente incitative en une deuxième grille de produits. Couvrez la rangée et maintenez-la stable.

/* 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;
  }
}

• Utilisez 4 cartes sur ordinateur et 2 à 4 sur mobile.
• Désactivez les vidéos de survol et les aperçus de la deuxième image dans les lignes de recommandation.
• Supprimez les étoiles d'avis en double si votre application d'avis se charge déjà ailleurs.
• Analysez les impressions par lots après l'inactivité au lieu de déclencher une balise par carte lors de la première peinture.
• Utilisez des largeurs d'image d'environ 360 à 480 px pour les cartes, et non pour les images de produits originaux.

Étape 6 : Portée des widgets par modèle

Les applications de recommandation se chargent souvent dans tout le magasin, car l'intégration de l'application est globale. C'est rarement nécessaire. Une application de recommandation de produits appartient normalement aux surfaces des produits et des paniers. Il n'est pas nécessaire de le charger sur les articles de blog, les pages de politique, les pages de mot de passe ou la plupart des pages de destination.

{%- 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 Aide sur les blocs d'applications thématiques explique comment les blocs d'applications s'attachent aux types de pages. Utilisez d'abord le ciblage par application, puis Liquid Guards uniquement lorsque l'application ne vous donne aucun contrôle de ciblage propre.

Étape 7 : Protéger l'INP mobile

L'INP mobile s'aggrave lorsqu'un carrousel de recommandations exécute de longues tâches JavaScript pendant que l'acheteur appuie sur la taille, la couleur, la quantité ou l'ajout au panier. Gardez le widget inactif jusqu'à ce que la page soit réglée. Évitez les bibliothèques de carrousel qui attachent des gestionnaires tactiles lourds. Utilisez des auditeurs passifs lorsque cela est possible et testez sur un profil Android bas de gamme, pas seulement sur un ordinateur portable de bureau.

Lire le Guide de correction de Shopify INP Guide des auditeurs d'événements passifs, , et Guide du temps de blocage total si PageSpeed signale toujours les tâches longues après un chargement paresseux du widget.

Correction manuelle vs Thunder Fix

Réparez le widget sans tuer AOV

Les applications de recommandation peuvent gagner leur place. L’erreur est de les laisser fonctionner avant que l’acheteur puisse évaluer le produit. Conservez la ligne en dessous du parcours d'achat, chargez paresseusement le runtime, limitez la taille des cartes et des images, préférez les recommandations natives pour les lignes simples, différez les analyses et testez le thème en double avant d'en faire la promotion.

Pour la feuille de route plus large, utilisez le guide complet d'optimisation de la vitesse Shopify, le Guide de révision de la vitesse de l'application meilleur guide des applications rapides Shopify, et le . C'est le moyen pratique de corriger l'application de recommandation de produits qui ralentit Shopify sans renoncer à l'ascenseur AOV.

FAQ