Loop Earplugs: INP no celular cerca de 800 ms mais rápido, conversão do checkout +7%
Uma loja Shopify onde cada clique no celular esperava o template, os apps e as tags. Os desenvolvedores deles corrigiram o problema, e eu mostrei onde olhar.
Loop Earplugs, um tema Shopify com apps por cima
A Loop vende protetores auriculares online. No celular, adicionar ao carrinho e abrir o cart drawer demorava demais para mostrar qualquer coisa no caminho até o checkout.
Adicionar ao carrinho no celular: código do tema, apps, tags e o cart drawer
Analisamos os traces de INP juntos. Os cliques lentos estavam divididos entre o tema, os apps e as tags, e nenhum deles era a única causa. Os desenvolvedores deles implementaram as correções; onde precisaram, ensinei a equipe a ler os traces.
Conversei com o Nathan pela primeira vez em fevereiro de 2023. O INP no celular ficava em torno de um segundo e bateu 1.350 ms em março. Analisamos os traces juntos, e os apps estavam no meio dos cliques. O ShopMessage saiu em março. O Lucky Orange, um gravador de sessão que escuta cada clique e rolagem, saiu em 12 de maio junto com o tracking da 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.jsDepois, o tema. Cada clique em Adicionar ao carrinho pedia à Shopify para renderizar três seções de novo, no mesmo clique do cart drawer. Os desenvolvedores removeram essas linhas em 20 de novembro de 2023 e, em fevereiro de 2024, o snippet da Klaviyo que envelopava cada requisição fetch também tinha saído.
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();A grande queda no CrUX aconteceu na primavera: o INP no celular foi de 1.350 ms em março de 2023 para 475 em junho, perto dos 800 ms citados pelo Nathan. Ele subiu aos poucos para 550 no outono. Depois das correções no tema, chegou a 375 em fevereiro de 2024 e continuou lá. O LCP também caiu: de 4,3 segundos em setembro de 2022 para 1,9 em outubro de 2023.
"No celular, ficou cerca de 800 ms mais rápido e a conversão do checkout subiu 7%. O investimento se pagou praticamente na hora."
Nathan Ziarczyk, Engineering Lead, Loop
Cada app da Shopify pesa um pouco a cada clique
Você instala um app por causa de um recurso, e o script dele carrega em páginas e cliques que não têm nada a ver com isso. Sozinho, ele pesa pouco. Acumulado na página de produto com o tema e as tags, vira parte do clique lento.
O INP é corrigido no template
As configurações dos apps raramente mudam o que roda em um clique. É o código do tema que decide isso: o que o adicionar ao carrinho faz, quando o cart drawer renderiza, quais scripts de apps carregam.
Cliques mais rápidos até o checkout trazem retorno
Não posso prometer 7% para você. Essa foi uma medição da própria Loop, na loja deles.
Cliques lentos na sua loja Shopify no celular?
De um a três dias por semana, sprint a sprint, trabalhando com seus desenvolvedores.
Mais resultados na minha página de clientes.
