Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2019年のUIパフォーマンス

 2019年のUIパフォーマンス

FRONTEND CONFERENCE 2019

Kirill Vasiltsov

November 02, 2019
Tweet

More Decks by Kirill Vasiltsov

Other Decks in Programming

Transcript

  1. HTTP Archive による React のページのクロールの結果 (Webpagetest, 2019年1⽉1 ⽇時点) First Meaningful

    Paint中央値: 6.9s Time to Interactive中央値: 19.7s https://houssein.me/progressive-react WHAT HOW WHY
  2. ファイル 週 1 週 2 週 3 週 4 週

    5 週 6 週 7 週 8 週 9 client.js 400 400 400 400 440 440 440 440 440 合計 400 400 400 400 440 440 440 440 440 コードスプリッティングのケーススタディー WHAT HOW WHY
  3. ファイル 週 1 週 2 週 3 週 4 週

    5 週 6 週 7 週 8 週 9 client.js 200 200 200 200 200 200 200 200 200 vendors.js 100 120 合計 300 200 200 200 320 200 200 200 200 WHAT HOW WHY
  4. ファイル 週 1 週 2 週 3 週 4 週

    5 週 6 週 7 週 8 週 9 client.js 150 150 150 150 150 150 150 150 150 vendors.js 100 120 productList.js 25 25 25 sidebar.js 25 25 25 合計 300 175 175 175 270 150 150 150 175 WHAT HOW WHY
  5. ファイル 週 1 週 2 週 3 週 4 週

    5 週 6 週 7 週 8 週 9 client.js (+ lazy-load 50kb) 100 100 100 100 100 100 100 100 100 vendors.js 100 120 productList.js 25 25 25 sidebar.js 25 25 25 合計 250 125 125 125 220 100 100 100 125 WHAT HOW WHY
  6. 会社概要 81 • 2000年に京都で創業 • 従業員数:172名ぐらい (平均34歳) • 拠点: •

    東京(三軒茶屋)、 • 京都(四条烏丸)、 • ⼤阪、札幌、福岡、名古屋 株式会社ゆめみ