Loop Earplugs: el INP en móvil unos 800 ms más rápido, conversión en el checkout +7%
Una tienda Shopify donde cada clic en móvil esperaba a la plantilla, las apps y los tags. Sus desarrolladores lo solucionaron y yo les mostré dónde mirar.
Loop Earplugs, un theme de Shopify con apps por encima
Loop vende tapones para los oídos online. En móvil, añadir al carrito y abrir el cart drawer tardaban demasiado en mostrar algo de camino al checkout.
Añadir al carrito en móvil: código del theme, apps, tags y el cart drawer
Revisamos juntos los traces de INP. Los clics lentos se repartían entre el theme, las apps y los tags, y ninguno era la causa por sí solo. Sus desarrolladores implementaron los fixes; donde lo necesitaron, les enseñé a leer los traces.
Hablé con Nathan por primera vez en febrero de 2023. El INP en móvil rondaba el segundo, y para marzo estaba en 1350 ms. Revisamos juntos los traces: las apps estaban metidas en los clics. ShopMessage se eliminó en marzo. Lucky Orange, un grabador de sesiones que escucha cada clic y scroll, se eliminó el 12 de mayo junto con el tracking de 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.jsLuego, el theme. Cada clic en Añadir al carrito le pedía a Shopify volver a renderizar tres secciones, en el mismo clic que el cart drawer. Sus desarrolladores quitaron esas líneas el 20 de noviembre de 2023, y para febrero de 2024 el snippet de Klaviyo que envolvía cada fetch request también había desaparecido.
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();En primavera se ve la gran caída en CrUX: el INP en móvil pasó de 1350 ms en marzo de 2023 a 475 en junio, cerca de los 800 ms que menciona Nathan. Ese otoño repuntó a 550. Tras los fixes del theme estaba en 375 para febrero de 2024, y ahí se mantuvo. El LCP también cayó: de 4,3 segundos en septiembre de 2022 a 1,9 en octubre de 2023.
"En móvil fue unos 800 ms más rápido y la conversión en el checkout subió un 7%. Se amortizó prácticamente de inmediato."
Nathan Ziarczyk, Engineering Lead, Loop
Cada app de Shopify suma un poco a cada clic
Instalas una app para una sola funcionalidad, y su script se carga en páginas y clics que no tienen nada que ver con ella. Por sí sola cuesta poco. Pero acumulada en una página de producto junto con el theme y los tags, forma parte del clic lento.
El INP se corrige en la plantilla
La configuración de las apps rara vez cambia lo que se ejecuta en un clic. Eso lo decide el código del theme: qué hace añadir al carrito, cuándo se renderiza el cart drawer y qué scripts de apps se cargan.
Los clics más rápidos de camino al checkout dan resultado
No puedo prometerte un 7%. Esa fue una medición propia de Loop, en su tienda.
¿Clics lentos en tu tienda Shopify en móvil?
De uno a tres días por semana, sprint a sprint, trabajando con tus desarrolladores.
Más resultados en mi página de clientes.
