Loop Earplugs: 모바일 INP 약 800 ms 단축, 체크아웃 전환율 +7%

2023년 2월에 Nathan과 처음 이야기를 나눴습니다. 당시 모바일 INP는 약 1초였고, 3월에는 1,350 ms에 달했습니다. 함께 트레이스를 확인해 보니 앱들이 클릭에 끼어들고 있었습니다. 3월에 ShopMessage를 제거했습니다. 모든 클릭과 스크롤을 감지하는 세션 레코더인 Lucky Orange는 5월 12일에 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.js

pc-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.js

그다음은 테마였습니다. 장바구니 담기를 클릭할 때마다 카트 드로어가 동작하는 동일한 클릭에서 Shopify에 섹션 3개를 다시 렌더링하도록 요청하고 있었습니다. 개발팀은 2023년 11월 20일에 해당 코드 라인을 삭제했습니다. 2024년 2월에는 모든 fetch 요청을 감싸고 있던 Klaviyo 스니펫도 제거했습니다.

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();

봄에 CrUX 수치가 크게 떨어졌습니다. 모바일 INP는 2023년 3월 1,350 ms에서 6월 475 ms로 떨어지며 Nathan이 언급한 약 800 ms 단축에 근접했습니다. 그해 가을에는 550 ms로 다소 올랐습니다. 테마를 수정한 후 2024년 2월에는 375 ms까지 떨어졌으며, 이후 안정적으로 유지되었습니다. LCP 역시 2022년 9월 4.3초에서 2023년 10월 1.9초로 줄었습니다.