Loop Earplugs : l'INP mobile réduit d'environ 800 ms, conversion au checkout +7 %
Une boutique Shopify où chaque clic sur mobile attendait le template, les apps et les tags. Leurs développeurs ont corrigé le problème ; je leur ai montré où regarder.
Loop Earplugs, un thème Shopify avec des apps par-dessus
Loop vend des bouchons d'oreille en ligne. Sur mobile, l'ajout au panier et l'ouverture du tiroir panier mettaient trop de temps à afficher quoi que ce soit, sur le chemin vers le checkout.
Ajout au panier sur mobile : code du thème, apps, tags et tiroir panier
Nous avons analysé les traces INP ensemble. La lenteur des clics se répartissait entre le thème, les apps et les tags, sans coupable unique. Leurs développeurs ont codé les correctifs ; au besoin, je les ai formés à la lecture des traces.
Nathan et moi avons commencé à échanger en février 2023. L'INP sur mobile tournait autour d'une seconde, et atteignait 1 350 ms en mars. Nous avons analysé les traces ensemble : les apps s'exécutaient sur les clics. ShopMessage a été retiré en mars. Lucky Orange, un enregistreur de sessions qui écoute chaque clic et chaque scroll, a été supprimé le 12 mai avec le 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.jsEnsuite, le thème. Chaque clic sur « Ajouter au panier » demandait à Shopify de re-rendre trois sections, sur le même clic que le tiroir panier. Leurs développeurs ont retiré ces lignes le 20 novembre 2023, et en février 2024, le snippet Klaviyo qui wrappait chaque requête fetch avait lui aussi disparu.
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();C'est au printemps qu'apparaît la grosse baisse dans CrUX : l'INP sur mobile est passé de 1 350 ms en mars 2023 à 475 en juin, tout près des 800 ms citées par Nathan. Il est remonté à 550 à l'automne. Après les correctifs sur le thème, il est descendu à 375 en février 2024, et y est resté. Le LCP a baissé lui aussi, passant de 4,3 secondes en septembre 2022 à 1,9 en octobre 2023.
« Sur mobile, on a gagné environ 800 ms et la conversion au checkout a augmenté de 7 %. Ça a été rentabilisé quasiment tout de suite. »
Nathan Ziarczyk, Engineering Lead, Loop
Chaque app Shopify alourdit un peu chaque clic
Vous installez une app pour une fonctionnalité, et son script se charge sur des pages et des clics qui n'ont rien à voir avec elle. Seule, elle coûte un peu. Cumulée sur une page produit avec le thème et les tags, elle contribue à la lenteur du clic.
L'INP se corrige dans le template
Les réglages des apps changent rarement ce qui s'exécute lors d'un clic. C'est le code du thème qui décide : ce que fait l'ajout au panier, quand le tiroir panier fait son rendu, et quels scripts d'apps se chargent.
Des clics plus rapides vers le checkout sont payants
Je ne peux pas vous promettre 7 %. C'était la propre mesure de Loop, sur leur boutique.
Des clics lents sur votre boutique Shopify sur mobile ?
Un à trois jours par semaine, sprint après sprint, aux côtés de vos développeurs.
D'autres résultats sur ma page clients.
