Loop Earplugs: INP op mobiel zo'n 800 ms sneller, checkout-conversie +7%
Een Shopify-webshop waar elke klik op mobiel wachtte op het template, de apps en de tags. Hun developers losten het op, en ik liet ze zien waar ze moesten kijken.
Loop Earplugs, een Shopify-theme met apps erbovenop
Loop verkoopt oordoppen online. Op mobiel duurde toevoegen aan de cart en het openen van de cart drawer te lang voor er iets te zien was, op weg naar de checkout.
Add to cart op mobiel: theme-code, apps, tags en de cart drawer
We lazen samen de INP-traces. De trage klikken zaten verspreid over het theme, de apps en de tags; geen daarvan was in z'n eentje de oorzaak. Hun developers bouwden de fixes; waar nodig trainde ik ze in het lezen van de traces.
Nathan en ik spraken elkaar voor het eerst in februari 2023. De INP op mobiel lag rond een seconde, en tegen maart op 1.350 ms. We lazen samen de traces: de apps zaten in de klikken. ShopMessage ging er in maart uit. Lucky Orange, een session-recorder die luistert naar elke klik en scroll, verdween op 12 mei, samen met de tracking van Builder.io.
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.jspc-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.jsDaarna het theme. Elke klik op Add to cart vroeg Shopify om drie secties opnieuw te renderen, in dezelfde klik als de cart drawer. Hun developers haalden die regels er op 20 november 2023 uit, en tegen februari 2024 was ook het Klaviyo-snippet verdwenen dat om elk fetch-request heen zat.
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);}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();In het voorjaar zie je de grote daling in CrUX: de INP op mobiel ging van 1.350 ms in maart 2023 naar 475 in juni, dicht bij de 800 ms uit de quote van Nathan. Die herfst kroop hij weer op naar 550. Na de theme-fixes was het in februari 2024 375, en daar bleef het. Ook de LCP daalde, van 4,3 seconden in september 2022 naar 1,9 in oktober 2023.
"Mobiel werd zo'n 800 ms sneller en de checkout-conversie steeg met 7%. Het verdiende zichzelf vrijwel direct terug."
Nathan Ziarczyk, Engineering Lead, Loop
Elke Shopify-app voegt iets toe aan elke klik
Je installeert een app voor één feature, en dat script laadt op pagina's en bij klikken die niets met die feature te maken hebben. Op zichzelf kost het weinig. Gestapeld op een productpagina met het theme en de tags is het onderdeel van de trage klik.
INP los je op in het template
App-instellingen veranderen zelden wat er in een klik draait. De theme-code bepaalt dat: wat add to cart doet, wanneer de cart drawer rendert, welke app-scripts laden.
Snellere klikken op weg naar de checkout betalen zich uit
Ik kan je geen 7% beloven. Dat was de eigen meting van Loop, in hun webshop.
Trage klikken in je Shopify-webshop op mobiel?
Eén tot drie dagen per week, sprint voor sprint, samen met je developers.
Meer resultaten op mijn klantenpagina.
