2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する

一般的に、サービスが成長するとWebパフォーマンスは劣化します。時間のない中で手軽に改善するために、ツールやAIを駆使する方法についてまとめました。2025年3月18日に令和トラベルで行われた NEWT Teck Talk vol.15の内容です。

Transcript

1. CONFIDENTIAL
 サービスの成⻑で⽣じる幅広いパフォーマンスの問題を、 AIで⼿軽に解決する 2025.3.18 NEWT Tech Talk vol.15
2. © 2025 Reiwa Travel, Inc.
 パフォーマンス改善、してますか？👀
3. © 2025 Reiwa Travel, Inc.
 パフォーマンスの改善はサービス成⻑をすると必然的に求められる • パフォーマンスはサービスが成⻑すると優先順位があがる ◦ 0→1：基本機能を揃えることがメイン ◦ 1→10：成⻑が落ち着き、UXやCVRがよりシビアになる • ⼀⽅で、サービスが成⻑するとパフォーマンスは(⼀般に)劣化する ◦ 機能要件が複雑化 ◦ マーケティングツールの導⼊ ◦ プロダクトの細部に⽬が⾏き届かなくなる🫠 3

4. © 2025 Reiwa Travel, Inc.
 4
 かしこい、おトク、旅⾏アプリ「NEWT（ニュート）」 • 弊社もサービスが⼤きくなり、パフォーマンスが課題に
5. © 2025 Reiwa Travel, Inc.
 お⼿軽にパフォーマンス改善したい！ • サービスが成⻑してきてパフォーマンスが⼤事になってきた！ • でも、新機能開発で忙しい！企画や分析もあり、やることたくさん！          ...AIも活⽤してサクッとパフォーマンス改善したい！ 5

6. AGENDA
 © 2025 Reiwa Travel, Inc.
 6
 1. 改善対象を絞る 2. 問題を⼿軽に特定する a. Lighthouse b. DevTools Performance 3. ⼿軽に改善するポイント ⽬次
7. © 2025 Reiwa Travel, Inc.
 1. 改善対象を絞る
8. © 2025 Reiwa Travel, Inc.
 全てのページをのパフォーマンス改善をすることはできない • なぜなら我々は忙しいから（？） • 効果的にパフォーマンス改善したい！！ “効果的”ってなんだ...？ 8

9. © 2025 Reiwa Travel, Inc.
 Sentryのパフォーマンスモニタリング機能 9

10. © 2025 Reiwa Travel, Inc.
 Sentryのパフォーマンスモニタリング機能 10

11. © 2025 Reiwa Travel, Inc.
 効果的に改善する = アクセス数が多いページから • 例えば、利⽤規約やプライバシーポリシーよりも、リストページや詳細ページを 少しでも改善したほうがより多くの⼈に良いUXを届けられる • “効果的”に改善するために、アクセス数が多いページから取り掛かる • コンバージョンまでのパスならなお良い ◦ 今回は アクセス数が多い、appから開くツアー詳細ページを改善対象に 11

12. © 2025 Reiwa Travel, Inc.
 2. 問題を⼿軽に特定する with Lighthouse
13. © 2025 Reiwa Travel, Inc.
 Lighthouseで問題を特定をする 13
 とても悪い .....😇
14. © 2025 Reiwa Travel, Inc.
 Lighthouseで問題を特定をする 14
 • FCP (First Contentful Paint) ◦ 最初のコンテンツが表⽰されるまでの時間 • LCP (Large Contentful Paint) ◦ 最も⼤きなコンテンツが表⽰されるまでの時間 • SI (Speed Index) ◦ 画⾯内が視覚的に整うまでの時間 ...その他にも⾊々な指標があります
15. © 2025 Reiwa Travel, Inc.
 改善するには？ • Lighthouseページの下部に診断結果が表⽰される • Lighthouseだけでも⼿軽に直せるポイントが結構ある！ 15

16. © 2025 Reiwa Travel, Inc.
 ⼿軽に直せる改善ポイントの例 • ⼀番⼤きい画像がlazy loadに なっていた UIライブラリのカルーセルのデフォルトがlazy loadになっていることに気づかず実装 16
 • webview (app) では必要のないサポートチャッ ト⽤ライブラリを読み込んでいた sp/pcと共通のコンポーネントを使っているために最適化され ていなかった サービスが成⻑してパフォーマンスが悪くなっていた
17. © 2025 Reiwa Travel, Inc.
 ⼿軽に直せる改善ポイントの例 • ⼀番⼤きい画像がlazy loadに なっていた UIライブラリのカルーセルのデフォルトがlazy loadになっていることに気づかず実装 17
 • webview (app) では必要のないサポートチャッ ト⽤ライブラリを読み込んでいた sp/pcと共通のコンポーネントを使っているために最適化され ていなかった サービスが成⻑してパフォーマンスが悪くなっていた 🎉
18. © 2025 Reiwa Travel, Inc.
 2.問題を⼿軽に特定する with DevTools Performance
19. © 2025 Reiwa Travel, Inc.
 ChromeのDevToolsにあるPerformance：リソースの読み込み状況が可視化 19

20. © 2025 Reiwa Travel, Inc.
 ChromeのDevToolsにあるPerformance：リソースの読み込み状況が可視化 20
 なるほどわからん 🫠
21. © 2025 Reiwa Travel, Inc.
 21

22. © 2025 Reiwa Travel, Inc.
 22
 便利〜🥳 AIに頼る：ChatGPTにスクショを雑に渡すだけでも答えてくれる
23. © 2025 Reiwa Travel, Inc.
 ChatGPTさんに指摘されたこと① 23

24. © 2025 Reiwa Travel, Inc.
 ChatGPTさんに指摘されたこと① 24
 Facebook Yahoo X(Twitter) 自社のAPI 分析ツールの読み込みタイミングが早く、⾃社のAPIが後回しになっていた サービスが成⻑し、マーケツールの導⼊がすすみ、パフォーマンスが悪化していた
25. © 2025 Reiwa Travel, Inc.
 ChatGPTさんに指摘されたこと① 25
 Facebook Yahoo X(Twitter) 自社のAPI 分析ツールの読み込みタイミングをDOM readyに変えるだけで変わる ※ツールの特性によって使い分けましょう
26. © 2025 Reiwa Travel, Inc.
 ChatGPTさんに指摘されたこと② 26

27. © 2025 Reiwa Travel, Inc.
 27
 たしかに処理が積み重なって重そう でもよくわからん 🫠
28. © 2025 Reiwa Travel, Inc.
 AIに頼る：DevToolsのAI アシスタント • 2024/10からChrome Devtoolsに導⼊ された • スクリプトを右クリックすると、 「Ask AI」ボタンが現れ、その中⾝を 評価することができる • 前提として、chunkファイルはビルド 時に最適化されていて複数のモジュー ルが圧縮‧難読化されているため、解 析しづらい 28

29. © 2025 Reiwa Travel, Inc.
 AIに頼る：DevToolsのAI アシスタント 29

30. © 2025 Reiwa Travel, Inc.
 AIに頼る：DevToolsのAI アシスタント 30
 便利〜🥳
31. © 2025 Reiwa Travel, Inc.
 AIに頼る：DevToolsのAI アシスタント 31
 • SentryのReplay機能は社内で⼗分に活⽤できておらず、取り除いてみると スクリプトの解析時間が半減👀 詳しくはこちら https://zenn.dev/reiwatravel/articles/031f88f4639b99
32. © 2025 Reiwa Travel, Inc.
 3.⼿軽に改善するポイント（まとめ）
33. © 2025 Reiwa Travel, Inc.
 ⼿軽にパフォーマンスを改善するポイント（まとめ） 33
 • サービスが成⻑するとパフォーマンスは気づいたら劣化している！ • 継続モニタリングして改善対象を絞ると、⼿軽に(=要領よく)改善できる ◦ コンバージョンパス上にあるアクセス数が多いページにする • Lighthouseも使いつつ、DevToolsやAIも駆使しよう ◦ ⼿軽に(=効率的に)問題が特定できます • 幅広い観点を持つと、⼿軽に(=多⾯的に)改善できる ◦ リソース観点（appに不要なチャットライブラリなど）だけでなく ◦ 読み込みタイミング（例：分析ツールが早く読み込まれていた）や ◦ 処理のボトルネックも気にしよう
34. © 2025 Reiwa Travel, Inc.
 34
 パフォーマンス改善は⼿軽にできます！ サービス成⻑してきたら気軽に、取り組んでみてください󰢍