Hohen INP bei Shopify beheben: 7 bewährte Lösungen, um unter 200 ms zu kommen (2026)

Was ist INP und warum hat es FID ersetzt?

Interaction to Next Paint (INP) ist eine von Googles drei Core Web Vitals – die Metriken, die Ihr Suchranking direkt beeinflussen und die tatsächliche Benutzererfahrung messen. INP-Maßnahmen wie schnell Ihre Seite auf Benutzerinteraktionen reagiert – jeder Klick, jedes Tippen und jeder Tastendruck während des gesamten Seitenbesuchs.

Im März 2024, INP offiziell ersetzt First Input Delay (FID) als Core Web Vital. Warum? FID hat nur die Verzögerung vor dem Browser gemessen gestartet Verarbeitung der allerersten Interaktion. Es wurden zwei kritische Probleme übersehen: langsame Verarbeitungszeit (die eigentliche Arbeit, die der Browser verrichtet) und Präsentationsverzögerung (Zeit zum Zeichnen des Ergebnisses). Außerdem wurde jede Interaktion nach der ersten ignoriert.

INP behebt all das. Es verfolgt jede Interaktion and measures the full round trip — from the moment a user clicks to the moment the screen updates. Each interaction has three phases:

INP meldet das schlimmste Interaktion (technisch gesehen das 98. Perzentil) über den gesamten Seitenbesuch. Das bedeutet, dass selbst eine langsame Interaktion – wie eine träge Schaltfläche „In den Warenkorb“ oder ein verzögertes Filter-Dropdown – Ihren INP-Score nicht erreichen kann.

Warum INP für Ihren Shopify-Shop wichtig ist: Ein langsam reagierender Shop fühlt sich kaputt an. Wenn ein Kunde auf „In den Warenkorb“ tippt und 400 ms lang nichts passiert, tippt er noch einmal – und landet manchmal bei zwei Artikeln oder navigiert ganz weg. Schlechter INP beeinträchtigt sowohl Ihr SEO-Ranking als auch Ihre Conversion-Rate. Möchten Sie sehen, wo Ihr Geschäft steht? Führen Sie einen kostenlosen Geschwindigkeitstest durch.

Die einfache Lösung: Automatische INP-Optimierung

Bevor wir uns mit der manuellen JavaScript-Optimierung befassen, gibt es einen schnelleren Ansatz. Thunder Page Speed Optimizer behebt automatisch mehrere der häufigsten Ursachen für einen hohen INP in Shopify-Shops.

So messen Sie den INP in Ihrem Shopify-Shop

Bevor Sie INP beheben, müssen Sie ermitteln, welche Interaktionen langsam sind und warum. Hier sind die besten Tools:

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

Häufige Ursachen für einen hohen INP bei Shopify

Bevor Sie mit der Fehlerbehebung beginnen, sollten Sie verstehen, was den hohen INP in Ihrem Shop verursacht. Hier sind die häufigsten Übeltäter, sortiert nach der Häufigkeit, mit der sie Shopify-Shops betreffen:

Die meisten Shopify-Shops haben eine Kombination dieser Probleme. Die gute Nachricht: Selbst die Behebung einer oder zwei der Hauptursachen kann Ihren INP-Score erheblich verbessern. Gehen wir die Korrekturen durch. Weitere Hintergrundinformationen dazu, wie sich diese Probleme auf die Gesamtgeschwindigkeit des Geschäfts auswirken, finden Sie in unserem Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Fix Nr. 1: Lange JavaScript-Aufgaben aufteilen

Der Hauptthread des Browsers ist Single-Threaded – er kann jeweils nur eine Sache ausführen. Wenn JavaScript länger als 50 ms ohne Nachgeben ausgeführt wird, wird es zu einem „lange Aufgabe“ , das Benutzerinteraktionen blockiert. Wenn ein Benutzer klickt, während eine lange Aufgabe ausgeführt wird, kann der Browser erst reagieren, wenn die Aufgabe abgeschlossen ist – was die Eingabeverzögerung direkt erhöht.

Verwenden Sie Scheduler.yield() (empfohlen)

Die moderne Art, lange Aufgaben aufzuteilen, ist Scheduler.yield(). Es hält Ihren Code an, lässt den Browser ausstehende Interaktionen und das Rendern verarbeiten und fährt dann fort:

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

Fallback: setTimeout-Muster

Für Browser, die dies nicht unterstützen Scheduler.yield() verwenden Sie noch das setTimeout(0) Muster:

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

Verwenden Sie requestAnimationFrame für visuelle Updates

Wenn Ihr Event-Handler die Benutzeroberfläche aktualisieren muss, schließen Sie visuelle Änderungen ein requestAnimationFrame , um sie mit dem Rendering-Zyklus des Browsers zu stapeln:

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

Fix Nr. 2: Event-Handler optimieren

Jeder Event-Handler, der während einer Benutzerinteraktion ausgeführt wird, verlängert die Verarbeitungszeitphase von INP. Das Ziel: Machen Sie Ihre Handler so schnell wie möglich und verschieben Sie alles, was nicht sofort sichtbar ist.

Schnellfeuer-Ereignisse abprallen lassen

Ereignisse wie Scrollen, Größenänderung und Eingabe werden mehrmals pro Sekunde ausgelöst. Ohne Entprellen führt jedes Ereignis Ihren Handler aus, wodurch ein Rückstand an langen Aufgaben entsteht:

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

Nicht-visuelle Arbeit aufschieben

Wenn ein Benutzer auf „In den Warenkorb“ klickt, muss er dies tun siehe Feedback sofort – aber Analyseverfolgung, Bestandsprüfungen und Empfehlungsaktualisierungen können nach der visuellen Aktualisierung erfolgen:

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

Verwenden Sie die Ereignisdelegation

Anstatt einzelne Klick-Handler an Dutzende von Produktkarten anzuhängen, verwenden Sie die Ereignisdelegierung mit einem einzigen Handler im übergeordneten Container:

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

Fix Nr. 3: DOM-Größe reduzieren

Jedes Element in Ihrem DOM verlangsamt die Neuberechnung des Layouts. Wenn der Browser den Bildschirm nach einer Interaktion aktualisieren muss (die Phase der Präsentationsverzögerung), muss er Stile und Layout für möglicherweise Tausende von Elementen neu berechnen. Google empfiehlt, Ihr DOM unter zu belassen 1.400 Elemente – viele Shopify-Shops haben mehr als 3.000.

Überprüfen Sie Ihre DOM-Größe

Überprüfen Sie Ihre aktuelle DOM-Größe in der Chrome DevTools-Konsole:

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

Häufige DOM-Bloat-Quellen auf Shopify

• Mega-Menüs – Rendern Sie häufig den gesamten Dropdown-Inhalt, auch wenn er ausgeblendet ist. Verwenden Sie Lazy Rendering oder Inhaltssichtbarkeit: automatisch für Abschnitte außerhalb des Bildschirms.
• Produktvariantenauswahl – Geschäfte mit mehr als 50 Varianten können für jede einzelne ausgeblendete Optionselemente darstellen. Laden Sie Varianten nach Bedarf.
• Footer-Linklisten – Fußzeilen-Megalinks mit Dutzenden von Spalten fügen Hunderte von DOM-Elementen unterhalb der Falte hinzu.
• Versteckte Mobil-/Desktop-Duplikate – Themes, die sowohl die mobile als auch die Desktop-Navigation rendern (eines davon mit CSS ausblenden), verdoppeln die DOM-Elemente.

Nutzen Sie die Sichtbarkeit von Inhalten für Off-Screen-Inhalte

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

Diese CSS-Eigenschaft weist den Browser an, die Renderarbeit für Elemente außerhalb des Bildschirms zu überspringen. Wenn der Benutzer in der Nähe davon scrollt, rendert der Browser sie gerade noch rechtzeitig. Dies verbessert direkt die Präsentationsverzögerungsphase von INP, da bei Interaktionen weniger Elemente neu berechnet werden müssen. Weitere Informationen zum Reduzieren Layoutbezogene Probleme, siehe unseren CLS-Leitfaden.

Fix Nr. 4: Beseitigen Sie Layout-Thrashing

Layout-Thrashing tritt auf, wenn JavaScript in einer Schleife zwischen dem Lesen und Schreiben von DOM-Layout-Eigenschaften wechselt. Bei jedem Lesevorgang muss der Browser das Layout synchron neu berechnen – und wenn Sie unmittelbar danach schreiben, wird dies beim nächsten Lesevorgang erzwungen ein anderer Neuberechnung.

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

Eigenschaften, die ein erzwungenes Layout auslösen: offsetHeight, offsetWidth, getBoundingClientRect(), scrollTop, clientHeight, und getComputedStyle(). Wenn eines davon nach einem DOM-Schreibvorgang gelesen wird, muss der Browser das Layout synchron neu berechnen.

Überprüfen Sie das JavaScript Ihres Themes auf diese Muster – sie kommen besonders häufig in Produktrasterlayouts, Sticky-Headern und Infinite-Scroll-Implementierungen vor.

Fix Nr. 5: Zähmen Sie Skripte von Drittanbietern

Skripte von Drittanbietern sind die stillen INP-Killer in Shopify-Shops. Jede von Ihnen installierte App kann JavaScript hinzufügen, das bei jedem Seitenaufruf und – was noch wichtiger ist – bei jeder Benutzerinteraktion ausgeführt wird. Analyseskripte, die Klicks verfolgen, Überprüfungs-Widgets, die beim Hover verarbeitet werden, und Chat-Widgets, die Ereignisse abfangen, konkurrieren alle um den Haupt-Thread.

Überprüfen Sie die Auswirkungen Ihres Skripts von Drittanbietern

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 Netzwerkpanel → nach „JS“ filtern → nach Größe sortieren, um zu sehen, welche Skripte geladen werden:

• Analytik – Google Analytics, Meta Pixel und TikTok Pixel fügen häufig Ereignis-Listener hinzu
• Bewertungen – Yotpo, Judge.me, Loox können Scroll- und Klickereignisse verarbeiten
• Chat – Tidio, Zendesk, Gorgias fangen Klickereignisse seitenweit ab
• Upselling/Cross-Selling – ReConvert, Bold-Apps fügen häufig Handler zu Warenkorbinteraktionen hinzu

Manueller Ansatz: Aufschieben mit Interaktionsauslöser

Laden Sie unkritische Skripte von Drittanbietern erst nach der ersten Benutzerinteraktion, wenn die Seite bereits reagiert:

<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>

Dieses Muster funktioniert, ist aber fragil – Sie müssen die Skriptliste manuell verwalten, Abhängigkeiten zwischen Skripten verwalten und sicherstellen, dass nichts kaputt geht, wenn Skripte nicht in der richtigen Reihenfolge geladen werden. Genau das automatisiert Thunder: Es identifiziert, welche Skripte sicher zurückgestellt werden können, verwaltet ihre Abhängigkeiten und lädt sie in der optimalen Reihenfolge. Lesen Sie mehr über Verwalten von Skripten von Drittanbietern auf Shopify.

Fortgeschritten: Web Worker und Code-Splitting

Für Geschäfte mit komplexen benutzerdefinierten Funktionen – erweiterte Produktkonfiguratoren, Preisberechnungen in Echtzeit oder kundenseitige Suche – können diese fortschrittlichen Techniken die Bearbeitungszeit drastisch verkürzen.

Verlagern Sie umfangreiche Rechenaufgaben auf Web Worker

Web Worker führen JavaScript in einem separaten Thread aus, völlig unabhängig vom Haupt-Thread. Dies bedeutet, dass Benutzerinteraktionen durch umfangreiche Berechnungen nicht blockiert werden:

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

Codeaufteilung für Theme-JavaScript

Laden Sie nicht das gesamte JavaScript im Voraus. Teilen Sie den Code auf, sodass jede Seite nur das lädt, was sie benötigt:

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

Dynamische Importe reduzieren die anfängliche JavaScript-Nutzlast, was zu einer geringeren Blockierung des Hauptthreads in den kritischen frühen Momenten führt, in denen Benutzer am wahrscheinlichsten interagieren. Dies reduziert auch die Auswirkungen von renderblockierende Ressourcen in Ihrem Shop.

Manuelle INP-Korrekturen vs. Thunder: Direkter Vergleich

Hier ist der Vergleich zwischen dem manuellen Ansatz und der automatischen INP-Optimierung durch Thunder:

Manuelle Korrekturen geben Ihnen eine detaillierte Kontrolle, erfordern jedoch erhebliche JavaScript-Kenntnisse und laufende Wartung. Thunder führt die wirkungsvollsten Optimierungen – insbesondere Skriptverzögerung und Drittanbieterverwaltung – automatisch durch. Viele Entwickler kombinieren beides: Installieren Sie Thunder für die schwere Arbeit und wenden Sie dann manuelle Korrekturen für benutzerdefinierte Code-Engpässe an. Siehe Thunder-Preispläne.

Häufig gestellte Fragen