Nuxt 2を3に移行し、開発の効率性(DDD, Four Keys)やWebCoreVitalsを計測。 結果すべての項目においてスコアUPの結果と何を施したのかを説明。
また、プロダクトであるECの事業的数値も上がったことを示す。
フルスクラッチECの基盤であるNuxt2を3に移行し開発の効率性とパフォーマンスを高める株式会社TENTIAL テクノロジー本部プラットフォーム部長湧川仁貴
View Slide
自己紹介株式会社TENTIAL● 所属 テクノロジー本部 プラットフォーム部 部長● フルスクラッチECを立ち上げ。決済・物流基盤を構築● 現在○ マネジメントしチームの成果を上げています○ コードもガシガシ書いてEC運営● 言語○ Vue.js / Nodejsの生粋のJSエンジニア● 志向性○ プロダクトに本質な機能を取捨選択しながらつくることが好きWakugawa Hitoki (@_wakkn)
TENTIALの紹介株式会社TENTIALウェルネスブランドTENTIALを運営し、一般医療機器である 疲労回復ウェアのBAKUNEをはじめとした、身体を充電するツールを開発展開しています。
目次1.ECの概要2.購買体験上の課題3.Nuxt3の移行・気をつけるべきポイント4.各種計測結果5.まとめ
ECの紹介公式オンラインストア https://tential.jp主にNuxt.jsとNode.jsでフルスクラッチでECを開発。お客様にとって細部までストレスのない UXと多機能CMSやデータ基盤としても活用。クイックな施策の実現 、徹底的なお客様理解のためのデータ分析など、事業の要として機能。
ECECが認知〜購入までの体験をテックで加速させる・より良くする→ オンライン上の購買体験のパフォーマンスを上げる必要がある。
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_space_size=2048
Nuxt3にした結果
結果
ビルド時間Beforeclient: 1.5685Minute, server: 1.04MinuteAfterclient: 27s, server: 34s開発時Before30MinutesAfter10Minutes本番時 Codebuild
反映数、本番変更リードタイム1時間30分以下本番反映数(月)、リードタイム反映までのリードタイム28PR46PR本番反映数DDDだと、0.26
パフォーマンス- 内部的観測- LighthouseによるWeb Core Vitals- パフォーマンス計測(DevTools)- 遷移感- インスタンスあたりのCPU→コスト- 外部的観測- 実際の声(VOC)- CVR4G、下り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ファイルも約5分の1に
CVR/売上寄与単純なCVRにはそこまで影響はなかったが、回遊をした時のカート投入率、購入率ともに上昇。回遊が重要視される施策においては、ページ遷移時のスピードが起因する。カート投入率2%up 購入率7%up
社内の声エンジニアからの声ビルド速度を上げることにより、デプロイ頻度が上がり、事業の施策をECに反映できることが多くなった。事業を前に進める速度が上がった!
お客様の声反映前- 欲しい商品にたどり着くまでのアクセスが悪い- 他のECと比較すると、反応が鈍い特定の画面で画面が切り替わるのが遅くて不安になりました...反映後- サイトの動作・動きの遅さに対してのネガな意見がほぼなくなった。- 途中まで注文が何度かありましたが、今日は一番はじめに注文できました。- サイトが軽すぎて、逆に不便。
まとめ
まとめぜひ今すぐNuxt3へ移行しましょう!パフォーマンス指標に使われる WebCoreVitalsの数値も全体的に上がり、特に 初期レンダリング時のDOM展開が高速化された。お客様からの不満な声も払拭 でき、ECにかかせないカート投入率や購入率CVRも上昇。お客様の購買体験と売上寄与どちらにも貢献ができた。
計測方法や、具体的なNuxt3移行など話しきれてないところあるのでぜひ声かけてください!