はじめまして、フロントエンドエンジニアの白浜です。
私が所属する令和トラベルでは旅行アプリ『NEWT（ニュート）』を提供しており、この3年弱で様々な新機能をリリースしてきました。
パフォーマンス面の改善は後回しになりがちだったのですが、2024年11月にChromeに搭載されたパフォーマンスのAIアシスタントを試してみたところ、想像以上に手軽にパフォーマンスを改善できたので、今回はその取り組みをご紹介します。
2024/11にリリースされたパフォーマンスAIアシスタント
Lighthouseで改善点の洗い出し
まずはChromeのDevToolsからLighthouseでNEWTの改善点を洗い出します。
普段使っているChromeを使うとFireabse認証やChrome拡張機能によって影響を受けるため、作成したばかりのChromeプロファイルを使うことをおすすめします[1]。
こちらがLighthouseによるnewt.netの診断結果になります。
Lighthouseでnewt.netのspページを監査した結果
ページ下部のDIAGNOSTICSセクションを見ると、JavaScriptの実行時間が長いこと、メインスレッドを逼迫していることを指摘されていました。
Reduce JavaScript execution timeの項目を開くと、下記2つのチャンクファイルの実行に時間かかっているようです。
https://newt.net/_next/static/chunks/framework-xxxxxxxx.js
こちらはReact/Next.jsのベースコードが書かれたアプリ全体で共有するframeworkチャンクになります。
https://newt.net/_next/static/chunks/pages/_app-xxxxxxxxx.js
このページチャンクと呼ばれるファイルはページごとに分割・最適化されたファイルで、一般的にビジネスロジックの負債や設計の変更によって大幅な改善が見込めます。
今回はこちらを改善していきます🙌🏻
パフォーマンス計測とAIアシスタントによる分析
実際に、https://newt.net/_next/static/chunks/pages/_app-xxxxxxxxx.js がどのように悪影響を及ぼしているか、今度は同じくDevToolsのパフォーマンスタブでパフォーマンスの計測を行います。
左下に「Next.js-before-hydration」とあり、hydration前にEvaluate scriptが続き、処理も重そうです。こちらが問題の_next/static/chunks/pages/_app-xxxxxxxxx.js でした。
ここでパフォーマンスAIアシスタントの出番です。
この「Evaluate script」を右クリックすると「Ask AI」という選択肢が出てくるので、押すと、AI assistanceタブを開くことができます。
このパフォーマンスのAIアシスタントはスクリプトごとの改善点を探ってくれます。
早速聞いてみます：
「このスクリプトを改善する方法を教えて」
回答：
エラー監視ツールのSentryは様々な機能を持っていますが、その中のReplay機能（エラー時のカスタマーの挙動を匿名化して動画にする機能）がボトルネックになっている、とのことでした。
実際 “Evaluate script” の処理の内訳を見てみると (anonymous) の処理に時間がかかっており、AIアシスタントによるとこの中身がSentryのReplayのようです。
質問：
(anonymous)はどんな処理をしていますか？
回答：
チャンクファイルは @next/bundle-analyzer 等で構成を分析することができますが、どの部分の処理がボトルネックになっているかまでは知ることができません。パフォーマンスのAIアシスタントは詳細を深ぼっていくことで、実際にかかった時間や改善の優先順位を教えてくれることがわかりました💡
指摘されたSentryのReplay機能は社内で十分に活用できておらず、今回は取り除くことにしました。AIアシスタントに聞かなければ気づかなかったボトルネックなので、とても貴重な気づきとなりました。
Replay機能をオフにした結果
既存実装だと545msかかっていたscript evalutationを、半分の279msにすることができました。
まとめ
今回の記事では、2024年11月にリリースされたChromeのパフォーマンスAIアシアスタントを実際に活用し、これまで把握しづらかったチャンクファイルの処理のボトルネックを詳細に解析してみました。
その結果、社内であまり活用できていなかったSentryのReplay機能が原因となっていることが判明し、これを除外したところスクリプトの評価時間を50％削減できるという大きな成果を得られました。
今後はChatGPTなどのAIも使い、パフォーマンス計測時のスクリーンショットを解説・分析等をしてもらいながら、さらなる改善に取り組んでいきます。
ChatGPT o1 proに聞いてみた様子。気づかなかった・知らなかった観点が多くあり、学びになります。
弊社ではGitHub Copilotはもちろん、ChatGPTやDevin等、様々なAIツールを取り入れて、実装開発を進めています。興味がある方はぜひカジュアル面談しましょう🙆🏻♂️
最後に宣伝です。
2月の「NEWT Tech Talk vol.14」は、『NEWT（ニュート）』のプロダクト開発を牽引するデザインチームよりDesigner兼PM 金浜、同じくDesigner兼PM 島田、Designer 戸井の3名が、"プロダクトデザイナーが語るPMスキルを融合させた実務アプローチ" と題して、LT形式で発表を行います。日にちは2/25(火) 19時半からで、会場は渋谷の弊社オフィスになります。
ぜひご参加ください。お待ちしております🚶🏻➡️
-
AIアシスタントはGoogleアカウントにログインしないと使えませんが、AIアシスタントを使う予定が無い場合はシークレットモードでLighthouseは実施することを推奨します ↩︎
令和トラベルのTech Blogです。 「あたらしい旅行を、デザインする。」をミッションに、海外旅行におけるあたらしい体験や、あたらしい社会価値の提供を目指すデジタルトラベルエージェンシーです。海外ツアー・ホテル予約アプリ「NEWT（ニュート）」を提供しています。（NEWT：newt.net/）
Discussion