2019年のUIパフォーマンス

FRONTEND CONFERENCE 2019

Transcript

1. 2019年の UIパフォーマンス Frontend Conference 2019 Vasiltsov Kirill
2. 株式会社ゆめみ フロントエンドエンジニア Vasiltsov Kirill!
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
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
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 みなさんが使っているあのインターネットサービス、 実はゆめみが作ってます その数・・・毎⽉５０００万⼈
83. 取引先（⼀部） 83 直近3年間の取引実績を抜粋
84. ゆめみって？ 84 Grow with YUMEMI. エンジニア/クリエイターが成⻑できる環境を 本気で追及してます！
85. 成⻑を⽀える各種制度 85 勉強し放題制度 有給取り放題制度 全員CEO制度 質
86. Presentation.end() ご清聴 ありがとうございました！