Loop Earplugs: INP no telemóvel cerca de 800 ms mais rápido, conversão no checkout +7%
Uma loja Shopify onde cada clique no telemóvel esperava pelo template, pelas apps e pelas tags. Os developers deles corrigiram o problema; eu mostrei onde procurar.
Loop Earplugs, um tema Shopify com apps por cima
A Loop vende tampões para os ouvidos online. No telemóvel, adicionar ao carrinho e abrir o cart drawer demorava demasiado a mostrar o que quer que fosse, a caminho do checkout.
Adicionar ao carrinho no telemóvel: código do tema, apps, tags e o cart drawer
Lemos os traces de INP em conjunto. Os cliques lentos estavam distribuídos pelo tema, pelas apps e pelas tags, sem que nenhum fosse o único culpado. Os developers deles criaram os fixes; onde foi preciso, dei-lhes formação para lerem os traces.
O Nathan e eu falámos pela primeira vez em fevereiro de 2023. O INP no telemóvel andava à volta de um segundo, e em março chegou aos 1350 ms. Lemos os traces em conjunto e as apps estavam nos cliques. O ShopMessage saiu em março. O Lucky Orange, um gravador de sessões que escuta cada clique e scroll, saiu a 12 de maio 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 ao Shopify para renderizar três secções de novo, no mesmo clique do cart drawer. Os developers deles removeram essas linhas a 20 de novembro de 2023 e, em fevereiro de 2024, o snippet da Klaviyo que envolvia cada fetch request 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 descida no CrUX dá-se na primavera: o INP no telemóvel passou de 1350 ms em março de 2023 para 475 em junho, perto dos 800 ms referidos pelo Nathan. No outono voltou a subir para 550. Depois dos fixes no tema, baixou para 375 em fevereiro de 2024 e por lá ficou. O LCP também desceu: de 4,3 segundos em setembro de 2022 para 1,9 em outubro de 2023.
"No telemóvel ficou cerca de 800 ms mais rápido e a conversão no checkout subiu 7%. Pagou-se praticamente de imediato."
Nathan Ziarczyk, Engineering Lead, Loop
Cada app da Shopify acrescenta um pouco a cada clique
Instala-se uma app por causa de uma funcionalidade, e o script carrega em páginas e cliques que nada têm a ver com isso. Sozinha, custa pouco. Acumulada na página de produto com o tema e as tags, passa a fazer parte do clique lento.
O INP corrige-se no template
As definições das apps raramente mudam o que corre num clique. É o código do tema que decide isso: o que faz o adicionar ao carrinho, quando o cart drawer renderiza e que scripts de apps carregam.
Cliques mais rápidos a caminho do checkout compensam
Não posso prometer 7%. Essa foi a medição da própria Loop, na loja deles.
Cliques lentos na sua loja Shopify no telemóvel?
De um a três dias por semana, sprint a sprint, a trabalhar com os seus developers.
Mais resultados na página de clientes.
