Loop Earplugs：Shopifyテーマにアプリを重ねた構成
Loopは耳栓をオンラインで販売しています。モバイルでは、チェックアウトへ進む過程で、カートへの追加やカートドロワーを開く操作をしても、画面に表示が出るまでに時間がかかりすぎていました。
モバイルでのカート追加：テーマコード、アプリ、タグ、カートドロワー
INPのトレースをチームと一緒に分析しました。クリック時の遅延はテーマ、アプリ、タグの全体に分散しており、単一の原因によるものではありませんでした。改修は同社のエンジニアが実装し、私は必要に応じてトレースの読み解き方をトレーニングしました。
Nathanと初めて話したのは2023年2月でした。当時モバイルのINPは約1秒で、3月には1,350msになっていました。トレースを一緒に確認したところ、クリック時の処理にアプリが入り込んでいました。3月にはShopMessageを削除しました。すべてのクリックやスクロールをリッスンしていたセッションレコーダーのLucky Orangeも、Builder.ioのトラッキングとともに5月12日に削除しました。
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.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,350msから6月には475msとなり、Nathanの言葉にある「約800ms短縮」とほぼ一致します。その秋には550msまで微増しました。テーマの改修後は2024年2月までに375msへと改善し、その後もその数値を維持しています。LCPも同様に改善し、2022年9月の4.3秒から2023年10月には1.9秒まで短縮されました。
「モバイルは約800ms速くなり、チェックアウトのコンバージョン率が7%向上しました。費用はほぼ即座に回収できました。」
Nathan Ziarczyk、エンジニアリングリード（Loop）
Shopifyアプリは、クリックのたびに少しずつ負荷を上乗せします
ある機能のためにアプリを1つ導入しただけでも、そのスクリプトは関係のないページや無関係なクリック時にも読み込まれます。アプリ単体での負荷はわずかです。しかし商品ページ上でテーマやタグと一緒に積み重なると、クリック時の遅延を引き起こす一因になります。
INPの改善はテンプレートで行う
アプリの設定を変更しても、クリック時に何が実行されるかはほとんど変わりません。それを決めているのはテーマのコードです。「カートに追加」の動作、カートドロワーがレンダリングされるタイミング、どのアプリスクリプトを読み込むかを制御しているのはテーマです。
チェックアウトに進むクリックの高速化は成果につながる
7%の向上を約束できるわけではありません。これはLoopが自社ストアで独自に計測した数値です。
Shopifyストアで、モバイルのクリックが遅くなっていませんか？
開発チームと連携しながら、週1〜3日、スプリント単位で進めます。
その他の改善実績はクライアント実績ページをご覧ください。
