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. 2019年の
    UIパフォーマンス
    Frontend Conference 2019
    Vasiltsov Kirill

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Backend
    Frontend

    View full-size slide

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

    View full-size slide

  11. WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  13. TTI
    Time to interactive
    WHAT HOW WHY

    View full-size slide

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

    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  16. SI
    Speed Index
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  18. FCP
    First Contentful Paint
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. パフォーマンスの改善
    HOW
    WHAT HOW WHY

    View full-size slide

  22. Time To Interactive
    対策
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 不要なコード削除

    WHAT HOW WHY

    View full-size slide

  28. Chrome DevTools -> Coverage
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  30. コードスプリッティング

    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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

    View full-size slide

  36. WHAT HOW WHY

    View full-size slide

  37. WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. WHAT HOW WHY

    View full-size slide

  43. WHAT HOW WHY

    View full-size slide

  44. http://bit.ly/react-prog

    View full-size slide

  45. WHAT HOW WHY

    View full-size slide

  46. ファイル 週 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

    View full-size slide

  47. ファイル 週 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

    View full-size slide

  48. ファイル 週 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

    View full-size slide

  49. ファイル 週 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

    View full-size slide

  50. 3.8MB 1.2MB
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  52. HTTP/1.1
    HTTP/2
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Critical Rendering Path
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  58. にクリティカルなCSSを抽出
    OR

    WHAT HOW WHY

    View full-size slide

  59. レンダーブロッキングな
    リソースを減らす

    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

  61. =
    WHAT HOW WHY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. 会社概要
    81
    • 2000年に京都で創業
    • 従業員数:172名ぐらい (平均34歳)
    • 拠点:
    • 東京(三軒茶屋)、
    • 京都(四条烏丸)、
    • ⼤阪、札幌、福岡、名古屋
    株式会社ゆめみ

    View full-size slide

  74. ゆめみって?
    82
    みなさんが使っているあのインターネットサービス、
    実はゆめみが作ってます
    その数・・・毎⽉5000万⼈

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide