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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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を選択
   

   View Slide

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

    View Slide

11. Nuxt3にした結果
    

    View Slide

12. 結果
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. まとめ
    

    View Slide

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

    View Slide

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

    View Slide