DevToolsに搭載されたパフォーマンスAIアシスタントをNEWTに使ってみる

BRANK

はじめまして、フロントエンドエンジニアの白浜です。私が所属する令和トラベルでは旅行アプリ『NEWT（ニュート）』を提供しており、この3年弱で様々な新機能をリリースしてきました。パフォーマンス面の改善は後回しになりがちだったのですが、2024年11月にChromeに搭載されたパフォーマンスのAIアシスタントを試してみたところ、想像以上に手軽にパフォーマンスを改善できたので、今回はその取り組みをご紹介します。2024/11にリリースされたパフォーマンスAIアシスタントLighthouseで改善点の洗い出しまずはChromeのDevToolsからLighthouseでNEWTの改善点を洗い出します。普段使っているChromeを使うとFireabse認証やChrome拡張機能によって影響を受けるため、作成したばかりのChromeプロファイルを使うことをおすすめします。こちらがLighthouseによるnewt.netの診断結果になります。Lighthouseでnewt.netのspページを監査した結果 ページ下部のDIAGNOSTICSセクションを見ると、JavaScriptの実行時間が長いこと、メインスレッドを逼迫していることを指摘されていました。 Reduce JavaScript execution timeの項目を開くと、下記2つのチャンクファイルの実行に時間かかっ…