Webフロントエンドのパフォーマンス改善事例
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
ニコニコ生放送(以下「生放送」)で行った事例
ウェブアプリケーション自体が継続的に開発されている場合、パフォーマンス改善も基本的におわりはありません。 このハンドブックが解決方法ではなく問題の見つけ方を重視しているのは、パフォーマンスは継続的に改善して続ける必要があるためです
このハンドブックでは大きく分けて次の2種類について扱っています。
視聴中のパフォーマンス改善(ランタイム)
ランタイムとはページ上のUIの反応速度や画面の更新などウェブページの実行時の動作のことをいいます。
ページロードのパフォーマンス改善(ロードタイム)
ページロードに関してはすでにさまざまな解説や書籍が存在するので、その中のファイルサイズについてを中心に扱っています。
計測ツール
https://dwango-js.github.io/performance-handbook/startup/stats/
リファレンスも紹介されている
Webパフォーマンス虎の巻 - Qiita
調査方法
Chrome dev tools
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
WebPagetest
Webフロントエンド表示速度、最速化手法まとめ
/pastak-pub/パフォーマンスチューニング、ちょっとその前に
60点を目指すためのやっていきリスト
2020/4/8 Performance Bootcamp - Speaker Deck by 古川陽介
リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します!(2020年度版) | リクルート メンバーズブログ
Reactのパフォーマンスチューニング
書籍
超速! Webページ速度改善ガイド ──使いやすさは「速さ」から始まる:書籍案内|技術評論社
#Web_frontend
#performance