Frontend Performance Optimization

パフォーマンスがなぜ問題なのか

TIME IS MONEY - Useful performance metrics // Speaker Deck

表示速度の低下は、コンバージョン、PV、顧客満足度に影響する。売り上げに直接影響する。

80% of time is front-end - Speed Matters // Speaker Deck

load timeの大部分はフロントエンド。

どれぐらい速ければ充分速いといえるか

Speed Index under 1000 - Delivering The Goods - Fluent 2014 - Paul Irish - Google スライド

webpagetestのspeed indexの値が1000以下であることが望ましいらしい。

どのように計測するか

YSlowPageSpeed InsightsWebPageTest、devtoolsなどのツールを利用する。
簡易的に問題点を洗い出す時には、YSlowPageSpeed Insightsで事足りるけど、 詳細なデータが欲しい場合にはWebPageTest、局所的に計測してチューニングしたい場合はdevtoolsとか。

Synthetic vs RUM

  • Synthetic : 人工の?計測。実際のユーザによるものではない。
  • RUM : Real User Monitoring。実際のユーザから得られる計測。