JSやブラウザのパフォーマンス向上のTIPSを集めたリポジトリ github.com かなり多くのパフォーマンスに関するブログやISSUEへのリンクが貼られていて、知らないことがたくさんあった コンテンツは以下 JavaScript キャッシュ / 作業量の削減 データ構造 未分…

Webアプリのパフォーマンス改善で不要なJavaScriptの除去を検討する その際にwebpack-bundle-analyzerを使ったので導入メモ github.com 導入すると以下のようにwebpackでバンドルしているファイルに占めるモジュールの割合が可視化される 導入は簡単で、webp…

LightHouseでページのパフォーマンスを計測すると、改善提案のところに"Avoid serving legacy JavaScript to modern browsers"とあり、@babel/plugin-transform-classesが挙げられていた 自分では導入していないライブラリだったので調べてみた babeljs.io …

ヤフーのWebパフォーマンス改善の記事を読んだ techblog.yahoo.co.jp どんなことを行ったか サービスのCore Web Vitalsスコアの可視化 ナレッジの横展開 各サービスへの改善依頼 共通プラットフォームへの改善依頼 特に気になったのは最初の可視化の部分 ラ…

タッチイベントやホイールイベントのリスナーはページのスクロールを遅らせ可能性がある スクロールした際のパフォーマンスが悪い場合passive:trueをつけると良いことを知った developer.chrome.com ブラウザーはイベントリスナーがスクロールを妨げるかどう…

Speed Insightで自サイトを計測したときにLCP（Largest Contentful Paint）で改善できる項目としてLargest Contentful Paint の画像のプリロードが挙げられていた web.dev プリロードは特定のリソースに優先順位を付けてダウンロードする必要があることがわ…

Lighthouseのバージョン8.0がリリースされ、PageSpeed InsightsやChrome Canaryで利用できるらしい このバージョンではJavaScriptの分析ができるようになっていて、視覚的にJavaScript の容量とかカバレッジを確認できるとのこと そして、モジュールサイズと…