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