Come risolvere il rallentamento delle app di raccomandazione dei prodotti Shopify (2026)

Correzione rapida con Thunder

Perché i widget dei suggerimenti rallentano le pagine dei prodotti

Un widget di consigli raramente è solo una riga di prodotti. Le app in stile Rebuy, Nosto, LimeSpot, Wiser e Also Bought spesso caricano un runtime di personalizzazione, identificano il visitatore, recuperano regole o output del modello, richiedono dati di prodotto, eseguono il rendering delle schede prodotto in JavaScript, scaricano diverse immagini extra e inviano analisi delle impressioni. Questo lavoro può essere utile dopo che l'acquirente ha visto il prodotto. È dannoso prima che la pagina del prodotto sia utilizzabile.

I soliti sintomi di PageSpeed ​​sono un tempo di blocco totale più elevato, un'interazione peggiore con Next Paint su dispositivi mobili e un'immagine LCP che si avvia in ritardo perché il browser è impegnato nell'analisi del JavaScript dei consigli. Quello di Google Guida alle attività lunghe spiega perché queste attività dell'app sono importanti e quelle di Shopify guida alle prestazioni web consiglia di ridurre il codice dell'app che viene caricato prima che sia necessario.

La soluzione è il sequenziamento. L'immagine hero, il prezzo, le varianti, il pulsante Aggiungi al carrello e i dettagli del prodotto vengono prima di tutto. Le righe dei consigli possono attendere finché l'acquirente non scorre.

Passaggio 1: controllare il runtime delle raccomandazioni

Testare una pagina di prodotto con l'app abilitata, quindi disabilitare l'app consigliata incorporata in un tema duplicato e testare nuovamente la stessa pagina. Confronta trasferimento JavaScript, attività lunghe, ora di inizio LCP, trasferimento immagini e INP. Lo snippet seguente rileva i tempi di esecuzione dei consigli comuni e ne segnala le dimensioni.

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

Controlla il risultato con il Test di velocità Shopify gratuito e PageSpeed ​​Insights. Se il widget aggiunge 200KB di JavaScript e otto miniature del prodotto prima che l'immagine principale del prodotto venga completata, verrà inserito successivamente nell'ordine di caricamento.

Passaggio 2: sposta i consigli sotto il percorso di acquisto

Le righe delle raccomandazioni non devono apparire sopra il modulo del prodotto. Above the fold, gli acquirenti hanno bisogno di media del prodotto, prezzo, varianti, disponibilità, riepilogo delle recensioni, promessa di consegna e aggiunta al carrello. Una riga "Potrebbe piacerti anche" prima di questi elementi crea rumore visivo e fa sì che il browser carichi più immagini di quelle necessarie per la decisione di acquisto.

• Pagine dei prodotti: posiziona i consigli dopo la sezione principale del prodotto e i dettagli principali.
• Cassetti del carrello: mantieni gli upsell piccoli e caricali dopo l'apertura del cassetto, non durante il caricamento della pagina.
• Homepage: evita righe di prodotti personalizzate nella prima finestra a meno che il negozio non sia costruito attorno ad esse.
• Collezioni: mantieni i widget dei consigli fuori dalla prima griglia di prodotti; utilizzare prima le schede prodotto native.

Per il motivo LCP alla base di ciò, utilizzare il file Guida all'ottimizzazione di Shopify LCP. La prima immagine del prodotto e il supporto multimediale dovrebbero essere la priorità del browser, non un carosello personalizzato sotto di esso.

Passaggio 3: app di suggerimento prodotto con caricamento lento

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

Se la tua app espone il caricamento lento, utilizza prima l'impostazione dell'app. Se l'app ti fornisce solo un tag di script globale, sposta il tag dietro un caricatore come questo all'interno di un tema duplicato. Il Guida al caricamento lento di Shopify e guida LCP a caricamento lento copre i bordi.

Passaggio 4: utilizza i consigli nativi di Shopify ove possibile

Se la riga contiene solo "prodotti correlati" o "potrebbero piacerti anche", in genere sono sufficienti i consigli nativi di Shopify. Inizia con Shopify Search & Discovery per impostare prodotti complementari manuali sui best seller, quindi visualizza tali consigli attraverso il tema prima di aggiungere un popup o un'app di personalizzazione. Evitano un SDK di personalizzazione e possono mantenere le immagini dei prodotti sulla CDN di Shopify. Salva i consigli forniti dall'app per i casi in cui l'app guadagna il suo JavaScript: pacchetti di carrelli, classificazione AI, logica post-acquisto o regole di merchandising che non puoi esprimere in modo nativo.

{%- 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 il Endpoint dei consigli sui prodotti e aiutanti dell'immagine liquida. Gli stessi principi di dimensionamento delle immagini compaiono nel nostro Guida all'ottimizzazione delle immagini di Shopify e guida alle immagini dimensionate correttamente.

Passo 5: Limita carte, immagini e tracciamento

Le righe dei consigli diventano lente perché cercano di fare troppo. Otto carte, supporti al passaggio del mouse, badge, confronto dei prezzi, stelle di revisione, campioni, aggiunta rapida e beacon di tracciamento trasformano un semplice upsell in una seconda griglia di prodotti. Chiudi la fila e mantienila stabile.

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

• Usa 4 carte su desktop e 2-4 su cellulare.
• Disabilita i video al passaggio del mouse e le anteprime della seconda immagine all'interno delle righe dei consigli.
• Rimuovi le stelle delle recensioni duplicate se l'app delle recensioni viene già caricata altrove.
• Analisi delle impressioni in batch dopo l'inattività invece di attivare un segnalatore per carta alla prima verniciatura.
• Utilizza larghezze di immagine intorno a 360-480 px per le carte, non immagini di prodotto originali.

Passaggio 6: widget di ambito per modello

Le app di consigli spesso vengono caricate in tutto il negozio perché l'incorporamento dell'app è globale. Ciò è raramente necessario. Un'app per consigliare prodotti normalmente appartiene alle superfici del prodotto e del carrello. Non è necessario che venga caricato su post di blog, pagine di policy, pagine di password o sulla maggior parte delle pagine di destinazione.

{%- 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 Aiuto per i blocchi dell'app tematica spiega come i blocchi delle app si collegano ai tipi di pagina. Utilizza prima il targeting per app, quindi le protezioni Liquid solo quando l'app non ti offre un controllo preciso del targeting.

Passaggio 7: Proteggi Mobile INP

L'INP mobile peggiora quando un carosello di consigli esegue lunghe attività JavaScript mentre l'acquirente tocca taglia, colore, quantità o aggiungi al carrello. Mantieni il widget inattivo finché la pagina non si è stabilizzata. Evita le librerie carosello che collegano gestori di tocco pesante. Utilizza ascoltatori passivi ove possibile ed esegui il test su un profilo Android di fascia bassa, non solo su un laptop desktop.

Leggi il Guida alla correzione di Shopify INP, Guida agli ascoltatori di eventi passivie Guida al tempo di blocco totale se PageSpeed contrassegna ancora le attività lunghe dopo il caricamento lento del widget.

Correzione manuale vs. Correzione Thunder

Correggi il widget senza uccidere AOV

Le app di consigli possono guadagnarsi il loro posto. L'errore è lasciarli correre prima che l'acquirente possa valutare il prodotto. Mantieni la riga sotto il percorso di acquisto, carica lentamente il runtime, limita le schede e le dimensioni delle immagini, preferisci i consigli nativi per righe semplici, rinvia l'analisi e testa il tema duplicato prima di promuoverlo.

Per una roadmap più ampia, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify, il migliore guida alle app veloci di Shopifye il Guida alla revisione della velocità dell'app. Questo è il modo pratico per correggere l'app di raccomandazione dei prodotti che rallenta Shopify senza rinunciare all'aumento AOV.

FAQ