2019年のUIパフォーマンス

 2019年のUIパフォーマンス

FRONTEND CONFERENCE 2019

78d39160a56e4a71b1c4a2d0cbfda223?s=128

Kirill Vasiltsov

November 02, 2019
Tweet

Transcript

  1. 2019年の UIパフォーマンス Frontend Conference 2019 Vasiltsov Kirill

  2. 株式会社ゆめみ フロントエンドエンジニア Vasiltsov Kirill!

  3. None
  4. ⼈間は、遅いことにイライラする

  5. ネイティブアプリ並みのUXが求められる

  6. WHAT HOW WHY

  7. WHAT パフォーマンスの定義(TTI, FCP, SIなどのメトリック) WHAT HOW WHY

  8. WHAT パフォーマンスメトリック(TTI, FCP, SIなど) HOW 改善⽅法(不要コード対策、コードスプリッティング) WHAT HOW WHY

  9. WHAT パフォーマンスメトリック(TTI, FCP, SIなど) HOW 改善⽅法(不要コード対策、コードスプリッティング) WHY 理由(パフォーマンス改善に取り組んだ企業など) WHAT HOW

    WHY
  10. パフォーマンスの側⾯ WHAT WHAT HOW WHY

  11. Backend Frontend

  12. 知覚する時間 物理的な時間

  13. WHAT HOW WHY

  14. そもそも パフォーマンスはどう 測るか? WHAT HOW WHY

  15. None
  16. TTI Time to interactive WHAT HOW WHY

  17. TTI Time to interactive ページのコンテンツが表⽰され、ユーザーのアクション (ボタンクリックなど)に対して反応が起こるまでの時 間 WHAT HOW WHY

  18. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 WHAT HOW WHY

  19. SI Speed Index WHAT HOW WHY

  20. SI Speed Index 初期ロード時にどれくらいの速度で コンテンツが表⽰されるか ? (ロード時にスナップショットを撮り、それぞれの 段階でどれくらいの⾯積が描画されたかを計算する) WHAT HOW

    WHY
  21. FCP First Contentful Paint WHAT HOW WHY

  22. FCP First Contentful Paint 最初のDOM(⽩ではない背景の画像かカンバスやSVG)が 表⽰されるまでの時間 (ユーザーは、ページがロードしていることがわかる) WHAT HOW WHY

  23. WHAT • ロードはひとつの瞬間ではない • ユーザーの知覚に、さまざまな要因が影響する • Time to interactive, First

    contentful paint, Speed Index WHAT HOW WHY
  24. パフォーマンスの改善 HOW WHAT HOW WHY

  25. Time To Interactive 対策 WHAT HOW WHY

  26. ライブラリ更新 WHAT HOW WHY

  27. ライブラリ更新 WHAT HOW WHY

  28. ライブラリ更新 WHAT HOW WHY

  29. ライブラリ更新 WHAT HOW WHY

  30. 不要なコード削除 WHAT HOW WHY

  31. Chrome DevTools -> Coverage WHAT HOW WHY

  32. https://twitter.com/addyosmani/ WHAT HOW WHY

  33. コードスプリッティング ✂ WHAT HOW WHY

  34. なぜコードスプリッティングは重要なのか? WHAT HOW WHY

  35. デスクトップとモバイルのJS解析にかかる 時間の差は 1:5 なぜコードスプリッティングは重要なのか? WHAT HOW WHY

  36. なぜコードスプリッティングは重要なのか? デスクトップとモバイルのJS解析にかかる 時間の差は 1:5 CPUが弱いデバイスが増えていく WHAT HOW WHY

  37. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 WHAT HOW WHY

  38. 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
  39. WHAT HOW WHY

  40. WHAT HOW WHY

  41. Client-side rendering (CSR) WHAT HOW WHY

  42. Client-side rendering (CSR) WHAT HOW WHY

  43. Server-side rendering (SSR) WHAT HOW WHY

  44. Server-side rendering (SSR) WHAT HOW WHY

  45. WHAT HOW WHY

  46. WHAT HOW WHY

  47. None
  48. None
  49. None
  50. http://bit.ly/react-prog

  51. WHAT HOW WHY

  52. ファイル 週 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
  53. ファイル 週 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
  54. ファイル 週 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
  55. ファイル 週 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
  56. 3.8MB 1.2MB WHAT HOW WHY

  57. 68%の削減 3.8MB 1.2MB WHAT HOW WHY

  58. HTTP/1.1 HTTP/2 WHAT HOW WHY

  59. コードスプリッティングしましょう! WHAT HOW WHY

  60. Time to interactive対策 • ライブラリ更新 • 不要コード削除 •コードスプリッティング WHAT HOW

    WHY
  61. Speed Index & First Contentful Paint 対策 WHAT HOW WHY

  62. Critical Rendering Path WHAT HOW WHY

  63. https://qiita.com/seya/items/06b160adb7801ae9e66f WHAT HOW WHY

  64. <style></style>にクリティカルなCSSを抽出 OR <link rel="preload" as="style" href="critical.css"> WHAT HOW WHY

  65. レンダーブロッキングな リソースを減らす <script defer … /> と <script async …

    /> WHAT HOW WHY
  66. パフォーマンスを 改善する理由 WHY WHAT HOW WHY

  67. = WHAT HOW WHY

  68. ページのロードが 3 秒以上 かかる場合 53% のユーザーが去る WHAT HOW WHY

  69. 2019年の平均ロード時間 (モバイル) 15.3s WHAT HOW WHY

  70. AliExpress ページのロード時間 36% 削減 注⽂数15%上昇 WHAT HOW WHY

  71. Twitter TTI 50% 削減 ツイート数75%上昇 WHAT HOW WHY

  72. Walmart ページロード時間削減 100msごとに売上1%上昇 WHAT HOW WHY

  73. Zalando ページロード時間 100ms 削減 セッション当たり売上0.7%上昇 WHAT HOW WHY

  74. コードスプリッティングが有効だったと 報告した企業 WHAT HOW WHY

  75. Twitter 絵⽂字選択モーダルのlazy load -50kb WHAT HOW WHY

  76. Walmart JSバンドルサイズ69%削減 TTIが28%早くなった WHAT HOW WHY

  77. Spotify Webプレイヤーをlazy load バンドルサイズを250kb減らした WHAT HOW WHY

  78. Netflix 初期表⽰域以外のコンテンツをlazy load ログイン後にReactをlazy load ホームページTTIが50%早くなった WHAT HOW WHY

  79. WHY?

  80. 最後に

  81. 会社概要 81 • 2000年に京都で創業 • 従業員数:172名ぐらい (平均34歳) • 拠点: •

    東京(三軒茶屋)、 • 京都(四条烏丸)、 • ⼤阪、札幌、福岡、名古屋 株式会社ゆめみ
  82. ゆめみって? 82 みなさんが使っているあのインターネットサービス、 実はゆめみが作ってます その数・・・毎⽉5000万⼈

  83. 取引先(⼀部) 83 直近3年間の取引実績を抜粋

  84. ゆめみって? 84 Grow with YUMEMI. エンジニア/クリエイターが成⻑できる環境を 本気で追及してます!

  85. 成⻑を⽀える各種制度 85 勉強し放題制度 有給取り放題制度 全員CEO制度 質

  86. Presentation.end() ご清聴 ありがとうございました!