Macht eine Angebots-App einen Shopify-Shop langsamer? Was läuft, gemessen

Eine Angebots-App betreibt in einer Shopify-Storefront drei Dinge: ein App-Embed, das sein Skript und seine Styles auf jeder Seite lädt, App-Blöcke auf den Seiten, auf denen der Button oder die Preisanzeige sitzt, und Anfragen an den eigenen Server über den App-Proxy. Ob das einen Shop langsamer macht, hängt weniger von der Größe der App ab als von vier Verhaltensweisen: ob etwas das Rendern blockiert, wie viel Arbeit sie im Main Thread verrichtet, ob sie Daten abruft, bevor die Seite benutzbar ist, und ob ihr Button das Layout verschiebt, wenn er erscheint.

Wir haben eine App gemessen – QuotWay – so, wie Shopify Apps für sein Built-for-Shopify-Programm misst: mobiles Lighthouse auf Start-, Produkt- und Kollektionsseite, gewichtet mit 17 %, 40 % und 43 %, mit ein- und ausgeschalteter App. Über 42 Läufe lag der gewichtete Median mit App bei 82,0 und ohne App bei 80,7 – ein Unterschied kleiner als das Rauschen zwischen den Läufen, das zwischen zwei Läufen derselben Seite 17 Punkte erreichte. Das Skript der App kostete 28 bis 63 ms Main-Thread-Zeit pro Seite und etwa 37 KB pro Seitenaufruf mit leerem Cache. Der vollständige Datensatz ist mit diesem Beitrag veröffentlicht.

Diese Seite zeigt, was läuft, wie Shopify es misst, was wir wie gemessen haben, welche Muster die Kosten niedrig hielten, und ein Rezept, um jede App selbst zu messen. Methode und Checkliste sind anbieterneutral; die Messung betrifft unsere eigene App und ist als solche gekennzeichnet.

Alles über Shopify unten wurde am 28. September 2026 gegen Shopifys eigene Seiten geprüft; die Quellen stehen am Ende.

Was eine Angebots-App in einer Storefront betreibt

Theme App Extensions sind der aktuelle Weg, all das hinzuzufügen. Built for Shopify verlangt sie für Apps, die den Onlineshop berühren, und sie bringen eine Garantie mit, die für die Performance noch lange nach dem Entfernen einer App zählt: „Wenn Händler Apps deinstallieren, werden die mit den Apps verbundenen Blöcke automatisch und vollständig aus den Onlineshop-Themes entfernt.“ Code, den eine ältere App in Theme-Dateien eingefügt hat, bleibt, bis jemand ihn löscht.

Shopify setzt diesen Extensions auch Größengrenzen. Die durchgesetzten sind großzügig – 10 MB für die ganze Extension, 100 KB Liquid –, zwei sind aber nur empfohlen: 10 KB komprimiertes JavaScript und 100 KB komprimiertes CSS. Merken Sie sich das Wort „empfohlen“; es taucht in der Messung wieder auf.

Wie Shopify den Einfluss einer App misst

Für den Status Built for Shopify gilt: „Ihre App darf den Lighthouse-Performance-Score der Storefront um nicht mehr als zehn Punkte senken.“ Shopifys Methode, laut seiner Seite zur Storefront-Performance:

• Lighthouse mobil, auf einem sauberen Theme wie Horizon.
• Vor und nach der Installation und Konfiguration der App.
• Drei Seiten, gewichtet danach, wie viel sie für den Umsatz bedeuten: Startseite 17 %, Produkt 40 %, Kollektion 43 %.
• Shopifys eigener Vorbehalt: „Lighthouse-Scores können zwischen Läufen schwanken“, also mitteln Sie mehrere.

Diese Gewichtung ist der Grund, warum ein Button auf der Produktseite mehr zählt als ein Banner auf der Startseite: Produkt- und Kollektionsseite machen 83 % des Scores aus.

Der Laborwert ist nicht die ganze Geschichte. Shopifys Web-Performance-Dashboard zeigt Core Web Vitals aus echten Besuchen am 75. Perzentil – gut ist LCP bis 2.500 ms, INP bis 200 ms und CLS bis 0,1 – mit bis zu 36 Stunden Verzögerung. Ein Labortest sagt Ihnen, was eine App unter kontrollierten Bedingungen kostet; das Dashboard sagt Ihnen, was Käufer tatsächlich erlebt haben.

Was wir gemessen haben

QuotWay-Beobachtung, 28. September 2026. Lighthouse 13.5.0, mobil, simulierte Drosselung (150 ms Round Trip, 1,6 Mbit/s, 4-fache CPU-Verlangsamung), Browser-Cache vor jedem Lauf geleert. Ein Shopify-Entwicklungsshop mit dem Theme Savor und weiteren installierten Apps – also kein sauberer Shop, aber der Vergleich isoliert die App: Die „Aus“-Läufe laden dasselbe HTML, nur mit blockierten drei Asset-Dateien der App und blockiertem App-Proxy-Pfad, der einzige Unterschied zwischen an und aus ist also der Code der App. Sieben Runden, an und aus abwechselnd, mit wechselnder Reihenfolge.

<rect x="70" y="180" width="70" height="120" fill="#0f766e"/><line x1="105" y1="144" x2="105" y2="234" stroke="#1a1a2e" stroke-width="2"/><line x1="97" y1="144" x2="113" y2="144" stroke="#1a1a2e" stroke-width="2"/><line x1="97" y1="234" x2="113" y2="234" stroke="#1a1a2e" stroke-width="2"/><text x="105" y="288" text-anchor="middle" fill="#ffffff" font-weight="700">80</text>
<rect x="160" y="168" width="70" height="132" fill="#94a3b8"/><line x1="195" y1="162" x2="195" y2="210" stroke="#1a1a2e" stroke-width="2"/><line x1="187" y1="162" x2="203" y2="162" stroke="#1a1a2e" stroke-width="2"/><line x1="187" y1="210" x2="203" y2="210" stroke="#1a1a2e" stroke-width="2"/><text x="195" y="288" text-anchor="middle" fill="#1a1a2e" font-weight="700">82</text>
<text x="150" y="324" text-anchor="middle" font-weight="700" fill="#1b3a5c">Startseite (17 %)</text>

<rect x="340" y="150" width="70" height="150" fill="#0f766e"/><line x1="375" y1="126" x2="375" y2="204" stroke="#1a1a2e" stroke-width="2"/><line x1="367" y1="126" x2="383" y2="126" stroke="#1a1a2e" stroke-width="2"/><line x1="367" y1="204" x2="383" y2="204" stroke="#1a1a2e" stroke-width="2"/><text x="375" y="288" text-anchor="middle" fill="#ffffff" font-weight="700">85</text>
<rect x="430" y="168" width="70" height="132" fill="#94a3b8"/><line x1="465" y1="150" x2="465" y2="228" stroke="#1a1a2e" stroke-width="2"/><line x1="457" y1="150" x2="473" y2="150" stroke="#1a1a2e" stroke-width="2"/><line x1="457" y1="228" x2="473" y2="228" stroke="#1a1a2e" stroke-width="2"/><text x="465" y="288" text-anchor="middle" fill="#1a1a2e" font-weight="700">82</text>
<text x="420" y="324" text-anchor="middle" font-weight="700" fill="#1b3a5c">Produkt (40 %)</text>

<rect x="610" y="180" width="70" height="120" fill="#0f766e"/><line x1="645" y1="156" x2="645" y2="216" stroke="#1a1a2e" stroke-width="2"/><line x1="637" y1="156" x2="653" y2="156" stroke="#1a1a2e" stroke-width="2"/><line x1="637" y1="216" x2="653" y2="216" stroke="#1a1a2e" stroke-width="2"/><text x="645" y="288" text-anchor="middle" fill="#ffffff" font-weight="700">80</text>
<rect x="700" y="186" width="70" height="114" fill="#94a3b8"/><line x1="735" y1="168" x2="735" y2="216" stroke="#1a1a2e" stroke-width="2"/><line x1="727" y1="168" x2="743" y2="168" stroke="#1a1a2e" stroke-width="2"/><line x1="727" y1="216" x2="743" y2="216" stroke="#1a1a2e" stroke-width="2"/><text x="735" y="288" text-anchor="middle" fill="#1a1a2e" font-weight="700">79</text>
<text x="690" y="324" text-anchor="middle" font-weight="700" fill="#1b3a5c">Kollektion (43 %)</text>

<rect x="250" y="350" width="14" height="14" fill="#0f766e"/><text x="270" y="361">App an</text>
<rect x="340" y="350" width="14" height="14" fill="#94a3b8"/><text x="360" y="361">App aus (HTML gleich, Dateien gesperrt)</text>
<text x="640" y="361">Linien: Min. und Max. aus 7 Läufen</text>

So lesen Sie das. Der gewichtete Unterschied beträgt 1,3 Punkte zugunsten der App, und er bedeutet nichts: Innerhalb einer einzigen Runde reichte die Differenz an minus aus auf einer Seite von −11 bis +17. Die ehrliche Lesart ist kein messbarer Effekt auf den Lighthouse-Score in diesem Aufbau – nicht, dass die App einen Shop schneller macht. Die Zehn-Punkte-Schwelle von Built for Shopify liegt weit außerhalb dessen, was die Daten auflösen können.

Was die App tatsächlich kostete, aus denselben Läufen:

Die Zahl, die wir lieber nicht drucken würden. Das Skript hat komprimiert etwa 31 KB – dreimal so viel wie Shopifys empfohlene 10 KB für JavaScript in Theme App Extensions. Es ist eine Empfehlung, keine durchgesetzte Grenze, und in diesen Läufen hat es den Score nicht bewegt, weil es ohne Blockieren lädt und wenig tut, bis ein Käufer das Angebotsformular öffnet. Es bleibt das offensichtliche Ziel für eine Verkleinerung, und der Build erzwingt ein Größenbudget, damit es nicht unbemerkt wächst.

Die Rohdaten – alle 42 Läufe, mit Einstellungen – sind als storefront-lighthouse-2026-09-28.json veröffentlicht.

Was die Kosten niedrig hielt

Fünf Muster erklären das Ergebnis, und jede Storefront-App lässt sich an ihnen messen.

1. Nichts auf dem kritischen Pfad. Das Skript ist async, und das Drawer-Stylesheet wird als nicht blockierender Link eingefügt. Ein Render-blockierendes Skript oder Stylesheet ist das eine, was zuverlässig auf jeder Seite Punkte kostet – deshalb sagt Shopifys Theme-Leitfaden, man solle „Render-blockierende Apps entfernen“.
2. Konfiguration im HTML, nicht abgerufen. Die Einstellungen der App und die Texte für Käufer werden von Liquid als JSON in die Seite gerendert, sodass das Skript sie liest, statt einen Server zu fragen. Bei 150 ms Round Trip ist jede vermiedene Anfrage Zeit, die ein Käufer nicht wartet.
3. Arbeit erst bei Interaktion. Die Konfiguration des Angebotsformulars lädt erst, wenn ein Käufer es zum ersten Mal öffnet. Shopifys Leitfaden sagt dasselbe: „JavaScript bei Nutzerinteraktion laden.“
4. Serverseitig gerenderte Daten entfernen die letzte Anfrage. Auf der Kollektionsseite rendert ein Block die Eignungsdaten jeder Produktkarte ins HTML, und die Anfrage verschwindet; auf Start- und Produktseite, deren Karten keinen solchen Block hatten, stellt das Skript eine Anfrage und speichert die Antwort fünf Minuten zwischen. Die Messung zeigt den Unterschied direkt.
5. Der Button existiert, bevor das Skript läuft. Der Angebots-Button wird in Liquid gerendert und von einem kleinen Stylesheet gestaltet, das Skript verdrahtet ihn nur – er springt also nicht nachträglich ins Bild und schiebt die Seite nach unten. Der kleine CLS auf der Produktseite (0,039, deutlich unter der 0,1-Grenze für „gut“) ist die Stelle, an der als Nächstes zu suchen ist.

Messen Sie jede App selbst

Das Rezept oben funktioniert für jede App, auch die eines Wettbewerbers, und braucht keinen Zugriff auf den Code der App.

1. Nehmen Sie Shopifys drei Seiten in dem Shop, in dem die App konfiguriert ist: die Startseite, eine Produktseite, auf der die App aktiv ist, und eine Kollektionsseite.
2. Finden Sie die URLs der App im Netzwerk-Panel des Browsers – ihre Assets auf Shopifys CDN (der Ordner assets/ der Extension) und ihren App-Proxy-Pfad unter der Domain des Shops.
3. Führen Sie Lighthouse mobil zweimal pro Runde aus: einmal normal, einmal mit blockierten URLs (--blocked-url-patterns in der Lighthouse CLI, einmal pro Muster). Dasselbe HTML, derselbe Shop, dieselbe Minute.
4. Machen Sie mindestens fünf Runden, abwechselnd, und vergleichen Sie Mediane; gewichten Sie die Seiten mit 17/40/43. Ein einzelnes Vorher-nachher-Paar ist kein Beleg – unsere eigenen Läufe schwankten auf derselben Seite um bis zu 17 Punkte.
5. Lesen Sie die Diagnosen, nicht nur den Score: Render-blockierende Ressourcen, die Zeile der App unter „JavaScript-Ausführungszeit“, Anfragen vor der Interaktion und Layoutverschiebungen in der Nähe der Elemente der App.
6. Prüfen Sie dann die Felddaten in Shopifys Web-Performance-Dashboard einige Tage nach einer Änderung, denn Laborwerte enthalten keine echten Geräte und keine echten Käufer.

Für einen schnellen Blick auf eine Seite nutzt PageSpeed Insights dieselbe Lighthouse-Engine; für einen passwortgeschützten Entwicklungsshop führen Sie die Lighthouse CLI in einem Browser aus, in dem das Storefront-Passwort bereits eingegeben wurde.

Eine Checkliste für den Storefront-Fußabdruck

• Nutzt die App eine Theme App Extension (App-Embed und Blöcke) statt Script-Tags oder bearbeiteter Theme-Dateien?
• Ist ihr Skript async oder defer, und blockiert ein Stylesheet das Rendern?
• Wie viele KB fügt sie pro Seite hinzu, komprimiert, gemessen an Shopifys empfohlenen 10 KB für JavaScript?
• Welche Anfragen gehen raus, bevor der Käufer interagiert, und ließen sich diese Daten stattdessen in die Seite rendern?
• Wird ihr sichtbares Element in Liquid gerendert oder nach dem Laden per Skript eingefügt?
• Lädt sie auf jeder Seite oder nur dort, wo sie genutzt wird?
• Was hinterlässt sie bei der Deinstallation? Bei Theme App Extensions werden die Blöcke automatisch entfernt.
• Wurde sie so gemessen, wie Shopify misst – und veröffentlicht der Anbieter die Zahlen?

Der Rest einer App-Bewertung – Umgang mit Daten, API-Versionen, Durchsetzung – steht in wie Sie eine Shopify-B2B-App bewerten, und die Sicherheitsprüfung auf Seiten des Shops in der Checkliste zur B2B-Sicherheitsprüfung.

Wo QuotWay passt

Die Messung oben betrifft die Storefront-Extension von QuotWay: ein App-Embed auf jeder Seite, dazu die Blöcke für den Angebots-Button und den Warenkorb-Button, die der Händler platziert, und optionale Blöcke für die Preisanzeige. Sie läuft in jedem Tarif, auch im kostenlosen Lite-Tarif – die Tarifzeilen stehen auf der Preisseite, und was QuotWay kann und was nicht listet die Storefront-Optionen Tarif für Tarif auf. Wie Storefront, Angebotsschicht und Shopify sich die Arbeit teilen, steht in was in Shopify liegt und was in die Angebotsschicht gehört.

Häufige Fragen

Machen Angebots-Apps einen Shopify-Shop langsamer?

Das können sie, aber die Größe der App zählt weniger als die Art, wie sie lädt. Ein Render-blockierendes Skript oder Stylesheet kostet auf jeder Seite Punkte; ein async-Skript, das wenig tut, bis ein Käufer interagiert, kostet womöglich nichts Messbares. In unserem Test mit 42 Läufen war der Effekt einer Angebots-App auf den gewichteten mobilen Lighthouse-Score kleiner als die Schwankung zwischen zwei Läufen derselben Seite.

Wie misst Shopify den Einfluss einer App auf die Geschwindigkeit des Shops?

Shopify führt Lighthouse mobil vor und nach der Installation und Konfiguration der App aus, auf einem sauberen Theme, über Start-, Produkt- und Kollektionsseite, gewichtet mit 17 %, 40 % und 43 %. Für den Status Built for Shopify darf die App diesen Score um nicht mehr als zehn Punkte senken.

Wie prüfe ich die Geschwindigkeit meines Shopify-Shops?

Auf zwei Wegen, für zwei Fragen. PageSpeed Insights (oder die Lighthouse CLI) liefert einen Laborwert für eine Seite unter festen Bedingungen – nutzen Sie ihn, um vor und nach einer Änderung zu vergleichen. Shopifys Web-Performance-Dashboard zeigt Core Web Vitals aus echten Besuchen am 75. Perzentil, mit bis zu 36 Stunden Verzögerung – nutzen Sie es, um zu sehen, was Käufer tatsächlich erlebt haben.

Was ist der Unterschied zwischen Script-Tags und App-Embeds?

Script-Tags fügen entferntes JavaScript in jede Seite ein und können laut Shopify „nur mit Vintage-Themes verwendet werden“; App-Store-Apps, die sich in ein Theme einbinden, müssen stattdessen Theme App Extensions nutzen. Ein App-Embed ist Teil einer Theme App Extension: Der Händler kann es im Theme-Editor ein- oder ausschalten, und es wird automatisch entfernt, wenn die App deinstalliert wird.

Entfernt die Deinstallation einer App ihren Code aus meinem Theme?

Bei Apps, die mit Theme App Extensions gebaut sind, ja – Shopify schreibt, dass die Blöcke der App „automatisch und vollständig aus den Onlineshop-Themes entfernt“ werden. Code, den eine ältere App direkt in Theme-Dateien eingefügt hat, wird nicht entfernt und muss von Hand gefunden und gelöscht werden.

Wie groß sollte das Storefront-JavaScript einer App sein?

Shopify empfiehlt 10 KB komprimiert für das JavaScript einer Theme App Extension. Das ist eine Empfehlung, keine durchgesetzte Grenze, und die Ladestrategie zählt mehr als die Größe: In unserem Test hat ein komprimiert 31 KB großes async-Skript den Score nicht messbar verändert. Behandeln Sie die Empfehlung als anzustrebendes Budget und die Messung als den eigentlichen Test.

Quellen

Shopify-Seiten, gelesen am 28. September 2026:

• Anforderungen für Built for Shopify – die Zehn-Punkte-Regel, Theme App Extensions, Entfernen bei Deinstallation
• Storefront-Performance für Apps – die Vorher-nachher-Methode, mobil, die Gewichtung 17/40/43
• Konfiguration von Theme App Extensions – durchgesetzte und empfohlene Größengrenzen
• ScriptTag – nur Vintage-Themes
• Performance-Best-Practices für Themes – async und defer, Render-blockierende Apps, JavaScript bei Interaktion
• Web-Performance-Dashboard – Core Web Vitals aus dem Feld und Schwellenwerte

Unsere Messung: 42 Lighthouse-Läufe am 28. September 2026, Datensatz und Einstellungen in storefront-lighthouse-2026-09-28.json. Das Ladeverhalten von QuotWay ist anhand des Quellcodes seiner Extension beschrieben.