$30 off During Our Annual Pro Sale. View Details »

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

wakkn
October 28, 2023

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

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

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

wakkn

October 28, 2023
Tweet

More Decks by wakkn

Other Decks in Technology

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. 目次
    1.ECの概要
    2.購買体験上の課題
    3.Nuxt3の移行・気をつけるべきポイント
    4.各種計測結果
    5.まとめ

    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
    4G、下り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ファイルも約5分の1に

    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