【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話

こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp

[mizdra]

丁寧で良い。appendChildなるほど。

[potato4d]

計測の仕方や requestIdleCallback を Progressive Enhancement 的に適用するために polyfill の挙動をしっかり追っておく様とか、全体的に丁寧ですごく良い👀

[tossy_yukky]

CLSからやらんとなー…

[kenzy_n]

より早く

[living]

requestIdleCallback、Safariだとpolyfillになるので、Real Userでの改善効果がどの程度か気になるところ