UX品質を数値化するWeb Vitalsと メディアアプリを用いた分析事例のご紹介/Introducing analysis examples using Web Vitals and media apps to quantify UX quality

ソフトウェアエンジニアの吉田が「ユーザーファーストを実現するフロントエンドの最前線」で発表した際の資料となります。

イベントURL：
https://onecareer.connpass.com/event/339385/

Transcript

1. UX品質を数値化するWeb Vitalsと メディアアプリを用いた分析事例のご紹介 2025/01/27　株式会社ワンキャリア 吉田 泰生
2. ONE CAREER Inc . Copyright © ONE CAREER Inc. All Rights Reserved. 自己紹介 Career 趣味 ひとこと 2 吉田 泰生 動画・共通基盤チーム 2022年4月 人材系会社 → 2024年8月 ワンキャリア ゲーム、ラーメン、野球観戦 今年の抱負 　→ 肉体とエンジニアとしての筋力を鍛える
3. Copyright © ONE CAREER Inc. 人の数だけ、 キャリアをつくる。 MISSION
4. Copyright © ONE CAREER Inc. All Rights Reserved. これまで可視化されていなかった「キャリアデータ」を活用し 就職・採用の意思決定をサポート 4 5 サービス一覧 1. キャリアデータとは、求職者の活動データ、企業の採用データの総称。 2. 日本の人事部「HRアワード2020」にてプロフェッショナル部門（人材採用・雇用部門）で最優秀賞を受賞。 3. NewsPicks発表「【図解】20サービスを徹底比較。本当に役立つ「就活サイト」一覧より。 4. ProFuture株式会社/HR総研「HR総研×就活会議：2025年新卒学生の就職活動動向調査（6月）【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=386）より。 5. 2023年12月時点の実測値。
5. Copyright © ONE CAREER Inc. All Rights Reserved. 目次 5 • Core Web Vitalsについて • 調査〜課題発見 • まとめ
6. Copyright © ONE CAREER Inc. All Rights Reserved. 前置き 6 今回話すこと 話すこと • Core Web Vitals を測定することで、ユーザー体験を数字で可視化できる • DevTools を使用した調査・問題点の絞り込み 話さないこと • ソースコードを使用した問題の特定方法 • 問題点の解決方法（簡単ではあるがappendixに記載）
7. Copyright © ONE CAREER Inc. All Rights Reserved. 7 Core Web Vitalsを知っていますか？
8. Copyright © ONE CAREER Inc. All Rights Reserved. Core Web Vitalsについて 8 Core Web Vitalsとは ユーザー体験（UX）をより良くするためGoogleで提唱された以下3つの指標。 当社では、重要画面の描画速度を測定するにあたってこの指標を参考にしている。 最大コンテンツの表示時間 ユーザーアクション後の表示速度 操作時の表示ズレ度合い 画像参照元 ：https://www.debugbear.com/blog/hardest-core-web-vitals-metric
9. Copyright © ONE CAREER Inc. All Rights Reserved. Core Web Vitalsを測定するツール Core Web Vitalsについて 9 Lighthouse：以下5つの指標から Core Web Vitals を測定できるオープンソースのツール いくつか存在するが、今回は「Lighthouse」を用いて測定。 最大コンテンツの表示時間 操作時の表示ズレ度合い ユーザー操作にページが応答できない時間の合計 ブラウザが最初のDOMコンテンツ描画にかかる時間 ページの読み込み中にコンテンツが視覚的に表示される時間 LCP（Largest Contentful Paint） CLS（Cumulative Layout Shift） TBT（Total Blocking Time） FCP（First Contentful Paint） SI （Speed Index）
10. Copyright © ONE CAREER Inc. All Rights Reserved. 調査〜課題発見 10 今回の調査対象 ITエンジニア就活特化の就活サイト「ONE CAREER for Engineer」（OCE）を対象に実施。 サイトでは、選考内容や インターンシップ等の就活情報を公開。 ☞ 今回は一覧で就活情報を表示・検索できる 「選考体験談一覧」ページの調査を進める 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
11. Copyright © ONE CAREER Inc. All Rights Reserved. Frontend Backend 調査〜課題発見 11 技術スタック 画像参照元：https://icons8.com/
12. Copyright © ONE CAREER Inc. All Rights Reserved. Lighthouseによる測定結果（左:Web 右:Mobile） 調査方法と課題発見 12 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
13. Copyright © ONE CAREER Inc. All Rights Reserved. 指標からみて分かること 調査〜課題発見 13 LCP（最大コンテンツの表示時間）が遅い 2.5s以下で良判定だが、現在は5.3s 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
14. Copyright © ONE CAREER Inc. All Rights Reserved. 指標からみて分かること 調査〜課題発見 14 TBT（メインスレッドがブロックされる時間）が長い 200ms以下で良判定だが、現在は640ms JSのバンドル処理 / APIに問題がある可能性 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
15. Copyright © ONE CAREER Inc. All Rights Reserved. LCP（最大コンテンツの表示時間）における課題①：不要な遅延読み込み 調査〜課題発見 15 • 特集バナー部分が最も大きいコンテンツ • Load Delayの時間が長い = ページの読み込みが開始されてから、LCP リソースの読み込みを開始するまでが遅い状 態 ☞ LCPリソースの読み込み優先度が低い状態 と仮定できる 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
16. Copyright © ONE CAREER Inc. All Rights Reserved. LCP（最大コンテンツの表示時間）における課題①：不要な遅延読み込み 調査〜課題発見 16 • 特集バナーが遅延読み込みされている状態 で、読み込みの優先順位が低くなっていた ☞ 遅延読み込みの設定を解除し、取得優先 度を高める設定を加える必要がある 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
17. Copyright © ONE CAREER Inc. All Rights Reserved. LCP（最大コンテンツの表示時間）における課題②：不要なJavaScript読み込み 調査〜課題発見 17 • 不要なJavaScriptを読み込んでいる可能性がある ◦ 399.1KBのコードが 読み込まれているが使用されていない ☞ バンドルサイズを削減できるか調査する必要あり 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
18. Copyright © ONE CAREER Inc. All Rights Reserved. TBT（メインスレッドがブロックされる時間）における課題：JSの実行時間 調査〜課題発見 18 • JSの実行時間に2秒かかっている ◦ DevToolsの performance > Mainから 実行のどの箇所に時間が掛かっているかを確認 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
19. Copyright © ONE CAREER Inc. All Rights Reserved. TBTにおける課題：どの箇所で時間が掛かっているかを推測 調査〜課題発見 19 Mainタブから Long Taskの内訳を確認 画像の例だと chakra-uiの読み込みに時 間が掛かっている ※Source Mapを有効化することで匿名 化されている関数の中身を見ることも可 能 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
20. Copyright © ONE CAREER Inc. All Rights Reserved. TBTにおける課題：どの箇所で時間が掛かっているかを推測 調査〜課題発見 20 Devtoolsの Network タブも有用 SizeとTimeでソートすることで重い処理を見つけ、Performanceタブで実行タイミングが適切か確 認していく 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
21. Copyright © ONE CAREER Inc. All Rights Reserved. 調査まとめ（不良判定の指標における課題） 調査〜課題発見 21 • 最大のコンテンツであるバナーが遅延読み込みされている • JSのバンドルサイズが大きく、初期読み込みに時間が掛かっている • JSの実行時間が長くメインスレッドがブロックされている ◦ バンドルサイズが大きい影響で初期読み込みに時間がかかっている ◦ Networkタブで重い処理を見つけ実行タイミングの適切さを確認していく 最大コンテンツの表示時間 LCP メインスレッドがブロックされる時間 TBT 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
22. Copyright © ONE CAREER Inc. All Rights Reserved. 目次 22 • Core Web Vitalsについて • 調査〜課題発見 • まとめ
23. Copyright © ONE CAREER Inc. All Rights Reserved. 今日話したことのまとめ まとめ 23 1. Core Web Vitals の指標を測定することで、現在のユーザー体験を数字で可視化できる ◦ DevTools の LightHouse を使用することで簡単に測定できる ◦ lighthouse-ci 等で定期的に測定できるような仕組みを作れるとベスト 2. DevTool を使うことで現在発生している問題点の絞り込みができる ◦ 特に Performance / Network はパフォーマンスチューニングにおいてかなり有用 ◦ chrome for developer で新機能がまとめられているので定期的に確認すると良いかも
24. Copyright © ONE CAREER Inc. All Rights Reserved. 24 パフォーマンス上げていきましょう！
25. Copyright © ONE CAREER Inc. All Rights Reserved. Appendix 25
26. Copyright © ONE CAREER Inc. All Rights Reserved. 実行時間の長いAPIの発見 調査〜課題発見 26 APIの実行に2秒程度かかっている user-content が2度実行されているのも気になる... 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
27. Copyright © ONE CAREER Inc. All Rights Reserved. user-content APIをもう少し見てみる 調査〜課題発見 27 Network タブから クエリパラメーターとレスポンスを確認 • 以下の点から累計のみを取得していると推 測できる ◦ &isTotalOnly=true が付与されている ◦ レスポンスのみをtotalで返している 　☞ 1つのAPI実行で完結できそう 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
28. Copyright © ONE CAREER Inc. All Rights Reserved. 　> You should use the priority property on any image detected as the Largest Contentful 　　Paint (LCP) element. It may be appropriate to have multiple priority images, 　　as different images may be the LCP element for different viewport sizes. 引用元：https://nextjs.org/docs/pages/api-reference/components/image#priority LCP 課題の改善方法：遅延読み込みの解除 改善方法 28 Next/Image はデフォルトで画像の遅延読み込みを行う ☞ priority オプションを trueにすることで preloadを行う Next.jsの公式ドキュメントにも「LCPに該当する画像ならtrueにしようね！」という記述が存在
29. Copyright © ONE CAREER Inc. All Rights Reserved. （local環境で実行した場合）priorityオプションをtrueにしたことでLCPが4秒改善した LCP 課題の改善方法：遅延読み込みの解除 改善方法 29 画像参照元：https://onecareer.jp/engineer/contents/experiences?page=1
30. Copyright © ONE CAREER Inc. All Rights Reserved. @next/bundle-analyzer で確認したところ Chakra UI V2 のサイズが大きいことが分かった。 特にChakra UI V2 と依存している Framer Motionの バンドルサイズが大きい。 • Chara UI + Framer Motionで 合計90KB LCP・TBT 課題の改善方法：バンドルサイズの削減 改善方法 30 画像参照元：@next/bundle-analyzer の結果から参照
31. Copyright © ONE CAREER Inc. All Rights Reserved. LCP・TBT 課題の改善方法：バンドルサイズの削減 改善方法 31 なぜ大きいのか？ • ChakraProvider が全コンポーネントのテーマを含んでおり、プロダクトで使用していない テーマを読み込んでいる。 • Chakra UIが依存するアニメーションライブラリ Frame Motion のバンドルサイズが大きい。 ◦ Modal、Toast、Tooltipなど
32. Copyright © ONE CAREER Inc. All Rights Reserved. LCP・TBT 課題の改善方法：バンドルサイズの削減 改善方法 32 なぜ大きいのか？ • ChakraProvider が全コンポーネントのテーマを含んでおり、プロダクトで使用していない テーマを読み込んでいる。 • Chakra UIが依存するアニメーションライブラリ Frame Motion のバンドルサイズが大きい。 ◦ Modal、Toast、Tooltipなど ☞ どのように解決する？ • コンポーネントのテーマを含まない ChakraBaseProvider を用いて 必要コンポーネントの テーマのみインストールする。 • dynamic importによる動的読み込みを行う
33. Copyright © ONE CAREER Inc. All Rights Reserved. 課題の改善方法：APIがボトルネックになっているかの確認 改善方法 33 APMから user-content API内で実行しているSQLのコストが莫大であることが分かった またSQLが原因で、検索条件によってはデータの取得にMax2秒かかることも発覚 画像参照元：Redashから参照
34. Copyright © ONE CAREER Inc. All Rights Reserved. 課題の改善方法：APIがボトルネックになっているかの確認 改善方法 34 APMから user-content API内で実行しているSQLのコストが莫大であることが分かった またSQLが原因で、検索条件によってはレスポンス取得にMax2秒かかることも発覚 ☞ どのように解決する？ 　以下の対応でAPIの速度改善行い、TBTの改善を実施中。 • 1日1回リフレッシュを行うマテビューを作成する • SQLのクエリチューニング 　また、レスポンスの結果とAPIの仕様からAPI実行も一つに改善出来ることを確認した。
35. Copyright © ONE CAREER Inc. All Rights Reserved. 改善方法まとめ 35 1. 最大コンテンツの読み込み方法を適切に ◦ ViewPort 外に表示されるものや優先度が高くないものに遅延読み込みを設定する 2. 使用しているライブラリで不要なメソッド・スタイル等を含めimportしていないか確認 ◦ 特に _app.tsx に設定するライブラリは、全てのページで first load js になるため注意 ◦ モジュールの遅延読み込みや動的読み込みも検討する。 3. JSの実行時間に問題がある場合は performance > Network/Main から推測する ◦ APIの実行時間と効率的にAPIからレスポンスを取得できているかチェックする ▪ 例：ViewPort外の要素を表示するためのAPIの読み込みに時間をかけていないか？ 改善方法まとめ
36. Copyright © ONE CAREER Inc. All Rights Reserved. Lighthouseで測定する際の注意点 測定の注意点 36 • Chromeの拡張機能をOFFにしておく ◦ React Dev toolやAdblockをいれている場合、測定に影響を及ぼす可能性あり • 認証が必須のページはプライベートブラウザで調査しない ◦ ローカルストレージ等が存在しない影響で、測定結果が異なる可能性あり