So beheben Sie, dass Produktempfehlungs-Apps Shopify verlangsamen (2026)

Schnelle Lösung mit Thunder

Warum Empfehlungs-Widgets Produktseiten verlangsamen

Ein Empfehlungs-Widget besteht selten nur aus einer Reihe von Produkten. Rebuy-, Nosto-, LimeSpot-, Wiser- und auch Bought-Style-Apps laden häufig eine Personalisierungslaufzeit, identifizieren den Besucher, rufen Regeln oder Modellausgaben ab, fordern Produktdaten an, rendern Produktkarten in JavaScript, laden mehrere zusätzliche Bilder herunter und senden Impressionsanalysen. Diese Arbeit kann nützlich sein, nachdem der Käufer das Produkt gesehen hat. Es ist schädlich, bevor die Produktseite nutzbar ist.

Die üblichen PageSpeed-Symptome sind eine höhere Gesamtblockierungszeit, eine schlechtere Interaktion mit Next Paint auf Mobilgeräten und ein LCP-Bild, das spät startet, weil der Browser mit dem Parsen von Empfehlungs-JavaScript beschäftigt ist. Googles Anleitung für lange Aufgaben erklärt, warum diese App-Aufgaben und die von Shopify wichtig sind Hilfe zur Webleistung empfiehlt, den App-Code zu reduzieren, der geladen wird, bevor er benötigt wird.

Die Lösung ist die Sequenzierung. Das Heldenbild, der Preis, die Varianten, die Schaltfläche „In den Warenkorb“ und die Produktdetails stehen an erster Stelle. Empfehlungszeilen können warten, bis der Käufer scrollt.

Schritt 1: Prüfen Sie die Empfehlungslaufzeit

Testen Sie eine Produktseite mit aktivierter App, deaktivieren Sie dann die Einbettung der Empfehlungs-App in ein doppeltes Design und testen Sie dieselbe Seite erneut. Vergleichen Sie JavaScript-Übertragung, lange Aufgaben, LCP-Startzeit, Bildübertragung und INP. Das folgende Snippet erfasst die gängigen Empfehlungslaufzeiten und gibt deren Größe an.

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

Vergleichen Sie das Ergebnis mit dem kostenloser Shopify-Geschwindigkeitstest und PageSpeed ​​Insights. Wenn das Widget 200 KB JavaScript und acht Produktminiaturansichten hinzufügt, bevor das Hauptproduktbild festgelegt wird, gehört es später in die Ladereihenfolge.

Schritt 2: Empfehlungen unter den Kaufpfad verschieben

Empfehlungszeilen sollten nicht über dem Produktformular erscheinen. „Above the Fold“ benötigen Käufer Produktmedien, Preis, Varianten, Verfügbarkeit, Zusammenfassung der Bewertungen, Lieferversprechen und Add-to-Cart. Eine „Das könnte Ihnen auch gefallen“-Zeile vor diesen Elementen führt zu visuellem Rauschen und führt dazu, dass der Browser mehr Bilder lädt, als er für die Kaufentscheidung benötigt.

• Produktseiten: Platzieren Sie Empfehlungen nach dem Hauptproduktabschnitt und den Kerndetails.
• Einkaufswagen-Schubladen: Halten Sie die Upsells klein und laden Sie sie, nachdem sich die Schublade öffnet, nicht während des Ladens der Seite.
• Homepages: Vermeiden Sie personalisierte Produktzeilen im ersten Ansichtsfenster, es sei denn, der Shop ist um sie herum aufgebaut.
• Sammlungen: Empfehlungs-Widgets aus dem ersten Produktraster fernhalten; Verwenden Sie zunächst native Produktkarten.

Verwenden Sie aus dem LCP-Grund dafür das Shopify LCP-Optimierungsleitfaden. Das erste Produktbild und die wichtigsten Medien sollten die Priorität des Browsers sein, nicht ein personalisiertes Karussell darunter.

Schritt 3: Lazy Load Produktempfehlungs-Apps

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

Wenn Ihre App Lazy Loading ermöglicht, verwenden Sie zuerst die App-Einstellung. Wenn die App Ihnen nur ein globales Skript-Tag zur Verfügung stellt, verschieben Sie das Tag hinter einen Loader wie diesen innerhalb eines duplizierten Themes. Die Shopify Lazy Loading-Anleitung und Lazy Loading LCP-Anleitung decken die Randgehäuse ab.

Schritt 4: Verwenden Sie nach Möglichkeit native Shopify-Empfehlungen

Wenn die Zeile nur „Ähnliche Produkte“ oder „Das könnte Ihnen auch gefallen“ enthält, reichen in der Regel native Shopify-Empfehlungen aus. Beginnen Sie mit Shopify Search & Discovery, um manuelle Ergänzungsprodukte zu Bestsellern festzulegen, und rendern Sie diese Empfehlungen dann über das Theme, bevor Sie ein Popup oder eine Personalisierungs-App hinzufügen. Sie vermeiden ein Personalisierungs-SDK und können Produktbilder im CDN von Shopify speichern. Speichern Sie App-basierte Empfehlungen für Fälle, in denen die App ihr JavaScript verdient: Warenkorbpakete, KI-Ranking, Logik nach dem Kauf oder Merchandising-Regeln, die Sie nicht nativ ausdrücken können.

{%- 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 dokumentiert die Produktempfehlungsendpunkt und Liquid-Bildhelfer. Die gleichen Bildgrößenprinzipien finden sich auch in unserem Leitfaden zur Shopify-Bildoptimierung und Leitfaden für die richtige Bildgröße.

Schritt 5: Karten, Bilder und Nachverfolgung begrenzen

Empfehlungszeilen werden langsam, weil sie versuchen, zu viel zu tun. Acht Karten, Hover-Medien, Abzeichen, Vergleichspreise, Bewertungssterne, Farbmuster, schnelles Hinzufügen und Tracking-Beacons verwandeln einen einfachen Upsell in ein zweites Produktraster. Bedecken Sie die Reihe und halten Sie sie stabil.

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

• Verwenden Sie 4 Karten auf dem Desktop und 2-4 auf Mobilgeräten.
• Deaktivieren Sie Hover-Videos und Zweitbildvorschauen in Empfehlungszeilen.
• Entfernen Sie doppelte Bewertungssterne, wenn Ihre Bewertungs-App bereits an anderer Stelle geladen wird.
• Batch-Impressionsanalyse nach Leerlauf, anstatt beim ersten Lackieren einen Beacon pro Karte auszulösen.
• Verwenden Sie für Karten Bildbreiten von etwa 360–480 Pixel, keine Originalproduktbilder.

Schritt 6: Widgets nach Vorlage einordnen

Empfehlungs-Apps werden oft im gesamten Store geladen, da die App-Einbettung global ist. Das ist selten nötig. Eine Produktempfehlungs-App gehört normalerweise auf Produkt- und Warenkorboberflächen. Es muss nicht auf Blogbeiträgen, Richtlinienseiten, Passwortseiten oder den meisten Zielseiten geladen werden.

{%- 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's Theme-App blockiert Hilfe erklärt, wie App-Blöcke an Seitentypen angehängt werden. Verwenden Sie zuerst das App-Targeting und dann Liquid Guards nur, wenn die App Ihnen keine saubere Targeting-Kontrolle bietet.

Schritt 7: Mobile INP schützen

Mobile INP wird schlechter, wenn ein Empfehlungskarussell lange JavaScript-Aufgaben ausführt, während der Käufer auf Größe, Farbe, Menge oder „In den Warenkorb“ tippt. Lassen Sie das Widget inaktiv, bis sich die Seite beruhigt hat. Vermeiden Sie Karussellbibliotheken, die schwere Touch-Handler enthalten. Verwenden Sie nach Möglichkeit passive Zuhörer und testen Sie auf einem Low-End-Android-Profil, nicht nur auf einem Desktop-Laptop.

Lesen Sie die Shopify INP-Fix-Anleitung, Leitfaden für passive Event-Listener, und Anleitung zur Gesamtblockierungszeit wenn PageSpeed nach dem verzögerten Laden des Widgets immer noch lange Aufgaben markiert.

Manueller Fix vs. Thunder Fix

Reparieren Sie das Widget, ohne AOV zu zerstören

Empfehlungs-Apps können sich ihren Platz verdienen. Der Fehler besteht darin, sie laufen zu lassen, bevor der Käufer das Produkt bewerten kann. Behalten Sie die Zeile unterhalb des Kaufpfads, laden Sie die Laufzeit verzögert, begrenzen Sie Karten- und Bildgrößen, bevorzugen Sie native Empfehlungen für einfache Zeilen, verschieben Sie Analysen und testen Sie das duplizierte Theme, bevor Sie es bewerben.

Für die umfassendere Roadmap verwenden Sie die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, das Bester Leitfaden für Shopify-Speed-Appsund die Leitfaden zur Überprüfung der App-Geschwindigkeit. Dies ist die praktische Möglichkeit, die Verlangsamung von Shopify durch die Produktempfehlungs-App zu beheben, ohne auf die AOV-Steigerung verzichten zu müssen.

FAQ