フルスクラッチECの基盤であるNuxt 2を3に移行し、開発の効率性とパフォーマンスを高める

Nuxt 2を3に移行し、開発の効率性(DDD, Four Keys)やWebCoreVitalsを計測。
結果すべての項目においてスコアUPの結果と何を施したのかを説明。

また、プロダクトであるECの事業的数値も上がったことを示す。

Transcript

1. フルスクラッチECの基盤であるNuxt2を3に移行し 開発の効率性とパフォーマンスを高める 株式会社TENTIAL テクノロジー本部 プラットフォーム部長 湧川仁貴
2. 自己紹介 株式会社TENTIAL • 所属 テクノロジー本部 プラットフォーム部 部長 • 　フルスクラッチECを立ち上げ。決済・物流基盤を構築 • 現在 ◦ マネジメントしチームの成果を上げています ◦ コードもガシガシ書いてEC運営 • 言語 ◦ Vue.js / Nodejsの生粋のJSエンジニア • 志向性 ◦ プロダクトに本質な機能を取捨選択しながらつくることが好き Wakugawa Hitoki (@_wakkn)
3. TENTIALの紹介 株式会社TENTIAL ウェルネスブランドTENTIALを運営し、一般医療機器である 疲労回復 ウェアのBAKUNEをはじめとした、身体を充電するツールを開発展開 しています。
4. 目次 １．ECの概要 ２．購買体験上の課題 ３．Nuxt3の移行・気をつけるべきポイント ４．各種計測結果 ５．まとめ
5. ECの紹介 公式オンラインストア https://tential.jp 主にNuxt.jsとNode.jsでフルスクラッチでECを開発。 お客様にとって細部までストレスのない UXと多機能CMSや データ基盤としても活用。 クイックな施策の実現 、徹底的なお客様理解のためのデータ 分析など、事業の要として機能。
6. EC ECが認知〜購入までの体験をテックで加速させる・より良くする → オンライン上の購買体験のパフォーマンスを上げる必要がある。
7. Nuxt2時代のEC課題 改善スピードの低下 - devサーバーが立ち上がるまでが遅く、開発がしにく い - 反映も1時間以上かかっていてデプロイ容易性が下 がっている - 細かい修正するにも時間がかかり、事業スピードに 直結する パフォーマンスの低下 - 動作に影響はないがコストパフォーマンスが悪い - 初回レンダリングに若干時間を要す - なんか遷移がもっさりしている・・・
8. Nuxt3にバージョンアップすれば ビルドは高速に、ページ速度も上がり お客様にとって価値しかないのでは？
9. 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を選択
10. Nuxt3化で工夫したこと • routeRulesの設定 • useAsyncDataの適切な設定で 二重に取得を避ける • LAZY Loading • compressPublicAssets • NODE_OPTIONS=--max_old_s pace_size=2048
11. Nuxt3にした結果
12. 結果
13. ビルド時間 Before client: 1.5685Minute, server: 1.04Minute After client: 27s, server: 34s 開発時 Before 30Minutes After 10Minutes 本番時 Codebuild
14. 反映数、本番変更リードタイム 1時間 30分以下 本番反映数(月)、リードタイム 反映までのリードタイム 28PR 46PR 本番反映数 DDDだと、0.26
15. パフォーマンス - 内部的観測 - LighthouseによるWeb Core Vitals - パフォーマンス計測（DevTools） - 遷移感 - インスタンスあたりのCPU→コスト - 外部的観測 - 実際の声（VOC） - CVR ４G、下り20Mbpsにて計測 ページスピードのみならず、事業的価値も計測
16. Web Core Vitals（Lighthouse） SSR主導でデータフェッチすることで、LCPとTBTが大幅に更新。
17. Web Core Vitals（パフォーマンス分析情報） app.jsはSSR時に取得することで最初にレンダリ ングブロックが走ることで、 FCPとLCPが等しくなっ ている。そのかわりに CSRで取得するnuxt/app.js などを取得せず、TBT向上につながっている。 また、初期レンダリング移行のフェッチする jsのサ イズが小さいために、最後の DOMがロードされる までの時間を大幅に削減。 FCPも削減。 DOMの最終ロードも高速化。
18. スクリプトサイズ 使用するjsファイルも約５分の１に
19. CVR/売上寄与 単純なCVRにはそこまで影響はなかったが、回遊をした時のカート投入率、購入率ともに上昇。 回遊が重要視される施策においては、ページ遷移時のスピードが起因する。 カート投入率 2%up 購入率 7%up
20. 社内の声 エンジニアからの声 ビルド速度を上げることにより、デプロイ頻度が上がり、 事業の施策をECに反映できることが多くなった。事業を 前に進める速度が上がった！
21. お客様の声 反映前 - 欲しい商品にたどり着くまでのアクセスが悪い - 他のECと比較すると、反応が鈍い特定の画面 で画面が切り替わるのが遅くて不安になりまし た... 反映後 - サイトの動作・動きの遅さに対してのネガな 意見がほぼなくなった。 - 途中まで注文が何度かありましたが、今日は一番はじ めに注文できました。 - サイトが軽すぎて、逆に不便。
22. まとめ
23. まとめ ぜひ今すぐNuxt3へ移行しましょう！ パフォーマンス指標に使われる WebCoreVitalsの数値も全体的に上がり、特に 初期レ ンダリング時のDOM展開が高速化された。 お客様からの不満な声も払拭 でき、ECにかかせないカート投入率や購入率CVRも上 昇。お客様の購買体験と売上寄与どちらにも貢献ができた。
24. 計測方法や、具体的なNuxt3移行など 話しきれてないところあるので ぜひ声かけてください！