Beratung · Loop Earplugs

Loop Earplugs: mobiler INP rund 800 ms schneller, Checkout-Conversion +7 %

Ein Shopify-Store, bei dem mobil jeder Klick auf das Template, die Apps und die Tags wartete. Die Entwickler haben es behoben – ich habe ihnen gezeigt, wo sie ansetzen müssen.

~800 msweniger INP mobil
+7%Checkout-Conversion, eigene Angabe
KundeLoop Earplugs
PlattformShopify
LeistungBeratung, mit Schulung, wo nötig
Der Kunde

Loop Earplugs, ein Shopify-Theme mit Apps obendrauf

Loop verkauft Gehörschutz online. Auf dem Weg zum Checkout dauerte es mobil zu lange, bis nach dem Hinzufügen zum Warenkorb und beim Öffnen des Cart Drawers überhaupt etwas zu sehen war.

Loop Earplugs homepage
Was wir fanden, was wir getan haben

„In den Warenkorb“ mobil: Theme-Code, Apps, Tags und der Cart Drawer

Wir haben die INP-Traces gemeinsam analysiert. Die langsamen Klicks verteilten sich auf das Theme, die Apps und die Tags – keine Komponente war die alleinige Ursache. Die Entwickler bauten die Fixes; wo nötig, habe ich sie darin geschult, die Traces zu lesen.

Was das Problem war
Was wir getan haben
INP
Komponenten im Theme erledigten bei einem Klick viel mehr Arbeit, als für die Anzeige nötig war.
Die Entwickler reduzierten die Arbeit pro Klick. Die Komponenten aktualisieren zuerst den Bildschirm und erledigen den Rest danach.
INP
Das JavaScript für „In den Warenkorb“ und der Cart Drawer liefen beide im selben Klick – und der Drawer renderte sich komplett neu.
Der Drawer rendert nur noch das, was sich geändert hat.
INP
Apps auf der Seite brachten zusätzliche Arbeit in dieselben Klicks.
Apps, die zu viel kosteten, wurden entfernt oder ersetzt.
Frühjahr 2023

Nathan und ich haben im Februar 2023 das erste Mal gesprochen. Der mobile INP lag bei rund einer Sekunde, im März bei 1.350 ms. Wir haben die Traces gemeinsam analysiert: Die Apps steckten mitten in den Klicks. ShopMessage flog im März raus. Lucky Orange, ein Session-Recorder, der auf jeden Klick und jedes Scrollen lauscht, folgte am 12. Mai zusammen mit dem Tracking von Builder.io.

VorherStartseite, 25. Februar 2023: 12 App-Skripte
pc-quiz.s3.us-east-2.amazonaws.com/…/quiz-loader.min.jsd38xvr37kwwhcm.cloudfront.net/…/grin-sdk.jscdn.shopmsg.me/…/shopmessage_platform.jsd275fvz7g8rvo.cloudfront.net/…/online_store_script.jslive-video-shopping-e4078.web.app/…/shows.jslive-video-shopping-e4078.web.app/…/integration.jsvision.duel.me/duel-analytics.jscdn.nfcube.com/97f451076844edac4b1d04779bdb9668.jsintg.snapchat.com/…/shopify-scevent-init.jsapp.backinstock.org/…/31939_1675166049.jscdn.builder.io/…/track.jstools.luckyorange.com/…/lo.js
Nachher18. Mai 2023: 9
pc-quiz.s3.us-east-2.amazonaws.com/…/quiz-loader.min.jsd38xvr37kwwhcm.cloudfront.net/…/grin-sdk.jsd275fvz7g8rvo.cloudfront.net/…/online_store_script.jslive-video-shopping-e4078.web.app/…/shows.jslive-video-shopping-e4078.web.app/…/integration.jsvision.duel.me/duel-analytics.jscdn.nfcube.com/97f451076844edac4b1d04779bdb9668.jsintg.snapchat.com/…/shopify-scevent-init.jsapp.backinstock.org/…/31939_1675166049.js
Die App-Skripte in der Ladeliste von Shopify auf Loops Startseite, aus dem Internet Archive. Lucky Orange und das Tracking von Builder.io wurden zwischen dem 10. und 12. Mai 2023 entfernt, ShopMessage im März.
November 2023

Danach das Theme. Jeder Klick auf „In den Warenkorb“ forderte Shopify auf, drei Sections neu zu rendern – im selben Klick wie der Cart Drawer. Die Entwickler bauten diese Zeilen am 20. November 2023 aus. Bis Februar 2024 war auch das Klaviyo-Snippet verschwunden, das jeden Fetch-Request wrappte.

Vorherproduct-form.js
const formData = new FormData(this.form);if (this.dataset.cartType != 'page') {  formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id));  formData.append('sections_url', window.location.pathname);  this.cart.setActiveElement(document.activeElement);}
Vorhercart-notification.js, im selben Klick
renderContents(parsedState) {    this.cartItemKey = parsedState.key;    this.getSectionsToRender().forEach((section => {      document.getElementById(section.id).innerHTML =        this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);    }));    if (this.header) this.header.reveal();    this.open();
Aus Loops Theme, archiviert. Jeder Klick auf „In den Warenkorb“ forderte drei gerenderte Sections bei Shopify an, und cart-notification.js tauschte jede davon in der Seite aus. In derselben Woche flog auch jQuery raus, und auf der Startseite sank die Zahl der Theme-Skripte von 7 auf 5.
In CrUX

Im Frühjahr zeigt sich der deutliche Rückgang in CrUX: Der mobile INP sank von 1.350 ms im März 2023 auf 475 im Juni – nah an den 800 ms aus Nathans Zitat. Im Herbst kletterte er wieder auf 550 hoch. Nach den Theme-Fixes lag er bis Februar 2024 bei 375 und blieb dort. Auch der LCP sank: von 4,3 Sekunden im September 2022 auf 1,9 im Oktober 2023.

200 ms500 msAug 2022Okt1450 msJan 20231350 msApr475 msJulOktJan 2024Apr375 msJulINP mobil, p75
2,5 s4,0 sAug 20224,3 sOktJan 2023AprJul1,9 sOktJan 2024Apr2,2 sJulLCP mobil, p75
loopearplugs.com in CrUX, Smartphone, August 2022 bis Juli 2024. Ein Balken pro Monat, p75, aus Googles CrUX-Daten in BigQuery. Grün ist gut, Orange braucht Verbesserung, Rot ist schlecht.
„Mobil wurde es rund 800 ms schneller und die Checkout-Conversion stieg um 7 %. Das hat sich praktisch sofort bezahlt gemacht.“

Nathan Ziarczyk, Engineering Lead, Loop

Was wir gelernt haben

Jede Shopify-App packt bei jedem Klick etwas obendrauf

Du installierst eine App für eine Funktion – und ihr Skript lädt auf Seiten und bei Klicks, die mit dieser Funktion gar nichts zu tun haben. Für sich genommen kostet das wenig. Zusammen mit dem Theme und den Tags auf einer Produktseite ist es Teil des langsamen Klicks.

Den INP behebst du im Template

App-Einstellungen ändern selten etwas daran, was bei einem Klick abläuft. Das entscheidet der Theme-Code: was beim Klick auf „In den Warenkorb“ passiert, wann der Cart Drawer rendert, welche App-Skripte laden.

Schnellere Klicks auf dem Weg zum Checkout zahlen sich aus

7 % kann ich dir nicht versprechen. Das war Loops eigene Messung in ihrem Store.

Arjen Karel

Langsame Klicks in deinem mobilen Shopify-Store?

Ein bis drei Tage pro Woche, Sprint für Sprint, gemeinsam mit deinen Entwicklern.

So läuft die Beratung ab

Mehr Ergebnisse auf meiner Kundenseite.

Loop Earplugs: mobiler INP rund 800 ms schneller, Checkout-Conversion +7 % Core Web Vitals Loop Earplugs: mobiler INP rund 800 ms schneller, Checkout-Conversion +7 %