2019年のUIパフォーマンス

by Kirill Vasiltsov

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WHAT HOW WHY

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Backend Frontend

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

WHAT HOW WHY

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

TTI Time to interactive WHAT HOW WHY

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

SI Speed Index WHAT HOW WHY

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

FCP First Contentful Paint WHAT HOW WHY

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Time To Interactive 対策 WHAT HOW WHY

Slide 26

Slide 26 text

ライブラリ更新 WHAT HOW WHY

Slide 27

Slide 27 text

ライブラリ更新 WHAT HOW WHY

Slide 28

Slide 28 text

ライブラリ更新 WHAT HOW WHY

Slide 29

Slide 29 text

ライブラリ更新 WHAT HOW WHY

Slide 30

Slide 30 text

不要なコード削除 WHAT HOW WHY

Slide 31

Slide 31 text

Chrome DevTools -> Coverage WHAT HOW WHY

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

WHAT HOW WHY

Slide 40

Slide 40 text

WHAT HOW WHY

Slide 41

Slide 41 text

Client-side rendering (CSR) WHAT HOW WHY

Slide 42

Slide 42 text

Client-side rendering (CSR) WHAT HOW WHY

Slide 43

Slide 43 text

Server-side rendering (SSR) WHAT HOW WHY

Slide 44

Slide 44 text

Server-side rendering (SSR) WHAT HOW WHY

Slide 45

Slide 45 text

WHAT HOW WHY

Slide 46

Slide 46 text

WHAT HOW WHY

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

http://bit.ly/react-prog

Slide 51

Slide 51 text

WHAT HOW WHY

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

3.8MB 1.2MB WHAT HOW WHY

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

HTTP/1.1 HTTP/2 WHAT HOW WHY

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Speed Index & First Contentful Paint 対策 WHAT HOW WHY

Slide 62

Slide 62 text

Critical Rendering Path WHAT HOW WHY

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

にクリティカルなCSSを抽出 OR WHAT HOW WHY

Slide 65

Slide 65 text

レンダーブロッキングなリソースを減らすと WHAT HOW WHY

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

= WHAT HOW WHY

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

WHY?

Slide 80

Slide 80 text

最後に

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

取引先（⼀部） 83 直近3年間の取引実績を抜粋

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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