フルスクラッチECの基盤であるNuxt2を3に移行し 開発の効率性とパフォーマンスを高める 株式会社TENTIAL テクノロジー本部 プラットフォーム部長 湧川仁貴

自己紹介 株式会社TENTIAL ● 所属 テクノロジー本部 プラットフォーム部 部長 ● 　フルスクラッチECを立ち上げ。決済・物流基盤を構築 ● 現在 ○ マネジメントしチームの成果を上げています ○ コードもガシガシ書いてEC運営 ● 言語 ○ Vue.js / Nodejsの生粋のJSエンジニア ● 志向性 ○ プロダクトに本質な機能を取捨選択しながらつくることが好き Wakugawa Hitoki (@_wakkn)

TENTIALの紹介 株式会社TENTIAL ウェルネスブランドTENTIALを運営し、一般医療機器である 疲労回復 ウェアのBAKUNEをはじめとした、身体を充電するツールを開発展開 しています。

目次 １．ECの概要 ２．購買体験上の課題 ３．Nuxt3の移行・気をつけるべきポイント ４．各種計測結果 ５．まとめ

ECの紹介 公式オンラインストア https://tential.jp 主にNuxt.jsとNode.jsでフルスクラッチでECを開発。 お客様にとって細部までストレスのない UXと多機能CMSや データ基盤としても活用。 クイックな施策の実現 、徹底的なお客様理解のためのデータ 分析など、事業の要として機能。

EC ECが認知〜購入までの体験をテックで加速させる・より良くする → オンライン上の購買体験のパフォーマンスを上げる必要がある。

Nuxt2時代のEC課題 改善スピードの低下 - devサーバーが立ち上がるまでが遅く、開発がしにく い - 反映も1時間以上かかっていてデプロイ容易性が下 がっている - 細かい修正するにも時間がかかり、事業スピードに 直結する パフォーマンスの低下 - 動作に影響はないがコストパフォーマンスが悪い - 初回レンダリングに若干時間を要す - なんか遷移がもっさりしている・・・

Nuxt3にバージョンアップすれば ビルドは高速に、ページ速度も上がり お客様にとって価値しかないのでは？

Nuxt3リライト 3ヶ月かけて実施。ほぼリファクタというよりリライト （GraphQL Clientやyarn workspace化も） Vue CompositionAPIを使用していたため、Nuxt3で新しく追加された部分のみ移植 1. co/boそれぞれで共通コンポーネントの洗い出し 2. 1で分けた環境ごとにコンポーネントを Vue3化 (Composition APIからの移行) 3. Nuxt3特有のfetchやUrqlのfetchに変更 4. ページごとにSSR/CSRを選択

Nuxt3化で工夫したこと ● routeRulesの設定 ● useAsyncDataの適切な設定で 二重に取得を避ける ● LAZY Loading ● compressPublicAssets ● NODE_OPTIONS=--max_old_s pace_size=2048

Nuxt3にした結果

結果

ビルド時間 Before client: 1.5685Minute, server: 1.04Minute After client: 27s, server: 34s 開発時 Before 30Minutes After 10Minutes 本番時 Codebuild

反映数、本番変更リードタイム 1時間 30分以下 本番反映数(月)、リードタイム 反映までのリードタイム 28PR 46PR 本番反映数 DDDだと、0.26

パフォーマンス - 内部的観測 - LighthouseによるWeb Core Vitals - パフォーマンス計測（DevTools） - 遷移感 - インスタンスあたりのCPU→コスト - 外部的観測 - 実際の声（VOC） - CVR ４G、下り20Mbpsにて計測 ページスピードのみならず、事業的価値も計測

Web Core Vitals（Lighthouse） SSR主導でデータフェッチすることで、LCPとTBTが大幅に更新。

Web Core Vitals（パフォーマンス分析情報） app.jsはSSR時に取得することで最初にレンダリ ングブロックが走ることで、 FCPとLCPが等しくなっ ている。そのかわりに CSRで取得するnuxt/app.js などを取得せず、TBT向上につながっている。 また、初期レンダリング移行のフェッチする jsのサ イズが小さいために、最後の DOMがロードされる までの時間を大幅に削減。 FCPも削減。 DOMの最終ロードも高速化。

スクリプトサイズ 使用するjsファイルも約５分の１に

CVR/売上寄与 単純なCVRにはそこまで影響はなかったが、回遊をした時のカート投入率、購入率ともに上昇。 回遊が重要視される施策においては、ページ遷移時のスピードが起因する。 カート投入率 2%up 購入率 7%up

社内の声 エンジニアからの声 ビルド速度を上げることにより、デプロイ頻度が上がり、 事業の施策をECに反映できることが多くなった。事業を 前に進める速度が上がった！

お客様の声 反映前 - 欲しい商品にたどり着くまでのアクセスが悪い - 他のECと比較すると、反応が鈍い特定の画面 で画面が切り替わるのが遅くて不安になりまし た... 反映後 - サイトの動作・動きの遅さに対してのネガな 意見がほぼなくなった。 - 途中まで注文が何度かありましたが、今日は一番はじ めに注文できました。 - サイトが軽すぎて、逆に不便。

まとめ

まとめ ぜひ今すぐNuxt3へ移行しましょう！ パフォーマンス指標に使われる WebCoreVitalsの数値も全体的に上がり、特に 初期レ ンダリング時のDOM展開が高速化された。 お客様からの不満な声も払拭 でき、ECにかかせないカート投入率や購入率CVRも上 昇。お客様の購買体験と売上寄与どちらにも貢献ができた。

計測方法や、具体的なNuxt3移行など 話しきれてないところあるので ぜひ声かけてください！