Loop Earplugs: INP su mobile circa 800 ms più veloce, conversione al checkout +7%
Uno store Shopify dove ogni click su mobile aspettava il template, le app e i tag. I loro sviluppatori hanno sistemato il codice; io ho mostrato dove guardare.
Loop Earplugs, un tema Shopify con varie app sopra
Loop vende tappi per le orecchie online. Su mobile, prima del checkout, aggiungere al carrello e aprire il cart drawer ci metteva troppo a mostrare qualcosa.
Aggiunta al carrello su mobile: codice del tema, app, tag e cart drawer
Abbiamo analizzato insieme i trace dell'INP. I click lenti erano distribuiti tra tema, app e tag: la causa non era una sola. I loro sviluppatori hanno implementato i fix; dove serviva, ho insegnato loro a leggere i trace.
Nathan e io ci siamo sentiti per la prima volta a febbraio 2023. L'INP su mobile era di circa un secondo, ed è arrivato a 1.350 ms a marzo. Abbiamo analizzato i trace insieme: le app erano dentro i click. ShopMessage è stato eliminato a marzo. Il 12 maggio è toccato a Lucky Orange, un session recorder che ascolta ogni click e scroll, insieme al tracking di 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.jsPoi il tema. A ogni click su Aggiungi al carrello, il codice chiedeva a Shopify di renderizzare di nuovo tre sezioni, nello stesso click del cart drawer. I loro sviluppatori hanno rimosso quelle righe il 20 novembre 2023; a febbraio 2024 è sparito anche lo snippet di Klaviyo che faceva il wrap di ogni fetch request.
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 primavera si vede il calo più netto su CrUX: l'INP su mobile è passato da 1.350 ms a marzo 2023 a 475 a giugno, vicino agli 800 ms citati da Nathan. In autunno è risalito a 550. Dopo i fix al tema è sceso a 375 a febbraio 2024, e lì è rimasto. Anche il LCP è calato, da 4,3 secondi a settembre 2022 a 1,9 a ottobre 2023.
"Su mobile siamo circa 800 ms più veloci e la conversione al checkout è salita del 7%. Si è ripagato praticamente subito."
Nathan Ziarczyk, Engineering Lead, Loop
Ogni app Shopify aggiunge qualcosa a ogni click
Installi un'app per una singola funzionalità, e il suo script si carica su pagine e click che non c'entrano nulla con quella funzione. Da solo costa poco. Ma sommato al tema e ai tag su una pagina prodotto, diventa parte del click lento.
L'INP si risolve nel template
Le impostazioni delle app cambiano raramente ciò che gira in un click. È il codice del tema a deciderlo: cosa fa l'aggiunta al carrello, quando renderizzare il cart drawer, quali script delle app caricare.
I click più veloci verso il checkout ripagano
Non posso prometterti il 7%. Quella è la misurazione interna di Loop, sul loro store.
Click lenti su mobile nel tuo store Shopify?
Da uno a tre giorni a settimana, sprint dopo sprint, al fianco dei tuoi sviluppatori.
Altri risultati nella pagina clienti.
