Webフロントエンド パフォーマンス改善ハンドブック
このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。
ダウンロード版
埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。
目的
このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。
また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。
具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間に書かれたものが混在しています。
このハンドブックではどのようにして問題を発見して、何をすれば解決するのかを見つけるという点を重視しています。 紹介している解決方法はただの一例でしかないため、別の解決方法も存在します。 たとえば、今回の事例ではできるだけ元の機能を維持して修正していますが、デザインを変更して根本的に変えてしまうことも正しいはずです。
機能とパフォーマンスに相関がある場合もあります。その場合、そこにはトレードオフの関係があります。 そのようなトレードオフについての考え方の一例として軽量化のトレードオフの検証などもハンドブックに含まれています。
読み方
このハンドブックでは大きく分けて次の2種類について扱っています。
視聴中のパフォーマンス改善
視聴中のパフォーマンス改善はランタイムにおけるパフォーマンス改善について書いたものです。 ランタイムとはページ上のUIの反応速度や画面の更新などウェブページの実行時の動作のことをいいます。
ランタイムのパフォーマンスは操作したときにスムーズに動くかなど操作感に影響を与えます。 また、動画再生やゲームなどはユーザーが何も操作していないも常に描画を更新しています。 そのため、ランタイムのパフォーマンスが安定して良くないと映像がカクカクしたように見えるなどフレームレート（FPS）の低下を引き起こします。
またアプリケーションによってランタイムの性質は大きく異なります。 このハンドブックではReactを使って開発されているニコニコ生放送の視聴ページを例に、ランタイムのパフォーマンス計測や改善について扱っています。
ページロードのパフォーマンス改善
ページロードのパフォーマンス改善はURLにアクセスしてページが表示されるまでのパフォーマンス改善について書かれたものです。 ページロードに関してはすでにさまざまな解説や書籍が存在するので、その中のファイルサイズについてを中心に扱っています。
ウェブアプリケーションを開発していると、動作自体には影響がないためJavaScriptやCSSなどのファイルサイズを見落としがちです。そのようなファイルサイズの問題をどのように見つけるか改善のアプローチについてを扱っています。