Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2019年のUIパフォーマンス
Search
Kirill Vasiltsov
November 02, 2019
Programming
5
1.9k
2019年のUIパフォーマンス
FRONTEND CONFERENCE 2019
Kirill Vasiltsov
November 02, 2019
Tweet
Share
More Decks by Kirill Vasiltsov
See All by Kirill Vasiltsov
Node.js in Rust: How to do it and what to expect from it
jlkiri
1
2.2k
Other Decks in Programming
See All in Programming
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Click-free releases & the making of a CLI app
oheyadam
2
100
Realtime API 入門
riofujimon
0
140
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
2k
受け取る人から提供する人になるということ
little_rubyist
0
180
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
110
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
220
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
400
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
500
Featured
See All Featured
Building Your Own Lightsaber
phodgson
102
6.1k
Raft: Consensus for Rubyists
vanstee
136
6.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
RailsConf 2023
tenderlove
29
890
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Visualization
eitanlees
145
15k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Transcript
2019年の UIパフォーマンス Frontend Conference 2019 Vasiltsov Kirill
株式会社ゆめみ フロントエンドエンジニア Vasiltsov Kirill!
None
⼈間は、遅いことにイライラする
ネイティブアプリ並みのUXが求められる
WHAT HOW WHY
WHAT パフォーマンスの定義(TTI, FCP, SIなどのメトリック) WHAT HOW WHY
WHAT パフォーマンスメトリック(TTI, FCP, SIなど) HOW 改善⽅法(不要コード対策、コードスプリッティング) WHAT HOW WHY
WHAT パフォーマンスメトリック(TTI, FCP, SIなど) HOW 改善⽅法(不要コード対策、コードスプリッティング) WHY 理由(パフォーマンス改善に取り組んだ企業など) WHAT HOW
WHY
パフォーマンスの側⾯ WHAT WHAT HOW WHY
Backend Frontend
知覚する時間 物理的な時間
WHAT HOW WHY
そもそも パフォーマンスはどう 測るか? WHAT HOW WHY
None
TTI Time to interactive WHAT HOW WHY
TTI Time to interactive ページのコンテンツが表⽰され、ユーザーのアクション (ボタンクリックなど)に対して反応が起こるまでの時 間 WHAT HOW WHY
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 WHAT HOW WHY
SI Speed Index WHAT HOW WHY
SI Speed Index 初期ロード時にどれくらいの速度で コンテンツが表⽰されるか ? (ロード時にスナップショットを撮り、それぞれの 段階でどれくらいの⾯積が描画されたかを計算する) WHAT HOW
WHY
FCP First Contentful Paint WHAT HOW WHY
FCP First Contentful Paint 最初のDOM(⽩ではない背景の画像かカンバスやSVG)が 表⽰されるまでの時間 (ユーザーは、ページがロードしていることがわかる) WHAT HOW WHY
WHAT • ロードはひとつの瞬間ではない • ユーザーの知覚に、さまざまな要因が影響する • Time to interactive, First
contentful paint, Speed Index WHAT HOW WHY
パフォーマンスの改善 HOW WHAT HOW WHY
Time To Interactive 対策 WHAT HOW WHY
ライブラリ更新 WHAT HOW WHY
ライブラリ更新 WHAT HOW WHY
ライブラリ更新 WHAT HOW WHY
ライブラリ更新 WHAT HOW WHY
不要なコード削除 WHAT HOW WHY
Chrome DevTools -> Coverage WHAT HOW WHY
https://twitter.com/addyosmani/ WHAT HOW WHY
コードスプリッティング ✂ WHAT HOW WHY
なぜコードスプリッティングは重要なのか? WHAT HOW WHY
デスクトップとモバイルのJS解析にかかる 時間の差は 1:5 なぜコードスプリッティングは重要なのか? WHAT HOW WHY
なぜコードスプリッティングは重要なのか? デスクトップとモバイルのJS解析にかかる 時間の差は 1:5 CPUが弱いデバイスが増えていく WHAT HOW WHY
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 WHAT HOW WHY
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
WHAT HOW WHY
WHAT HOW WHY
Client-side rendering (CSR) WHAT HOW WHY
Client-side rendering (CSR) WHAT HOW WHY
Server-side rendering (SSR) WHAT HOW WHY
Server-side rendering (SSR) WHAT HOW WHY
WHAT HOW WHY
WHAT HOW WHY
None
None
None
http://bit.ly/react-prog
WHAT HOW WHY
ファイル 週 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
ファイル 週 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
ファイル 週 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
ファイル 週 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
3.8MB 1.2MB WHAT HOW WHY
68%の削減 3.8MB 1.2MB WHAT HOW WHY
HTTP/1.1 HTTP/2 WHAT HOW WHY
コードスプリッティングしましょう! WHAT HOW WHY
Time to interactive対策 • ライブラリ更新 • 不要コード削除 •コードスプリッティング WHAT HOW
WHY
Speed Index & First Contentful Paint 対策 WHAT HOW WHY
Critical Rendering Path WHAT HOW WHY
https://qiita.com/seya/items/06b160adb7801ae9e66f WHAT HOW WHY
<style></style>にクリティカルなCSSを抽出 OR <link rel="preload" as="style" href="critical.css"> WHAT HOW WHY
レンダーブロッキングな リソースを減らす <script defer … /> と <script async …
/> WHAT HOW WHY
パフォーマンスを 改善する理由 WHY WHAT HOW WHY
= WHAT HOW WHY
ページのロードが 3 秒以上 かかる場合 53% のユーザーが去る WHAT HOW WHY
2019年の平均ロード時間 (モバイル) 15.3s WHAT HOW WHY
AliExpress ページのロード時間 36% 削減 注⽂数15%上昇 WHAT HOW WHY
Twitter TTI 50% 削減 ツイート数75%上昇 WHAT HOW WHY
Walmart ページロード時間削減 100msごとに売上1%上昇 WHAT HOW WHY
Zalando ページロード時間 100ms 削減 セッション当たり売上0.7%上昇 WHAT HOW WHY
コードスプリッティングが有効だったと 報告した企業 WHAT HOW WHY
Twitter 絵⽂字選択モーダルのlazy load -50kb WHAT HOW WHY
Walmart JSバンドルサイズ69%削減 TTIが28%早くなった WHAT HOW WHY
Spotify Webプレイヤーをlazy load バンドルサイズを250kb減らした WHAT HOW WHY
Netflix 初期表⽰域以外のコンテンツをlazy load ログイン後にReactをlazy load ホームページTTIが50%早くなった WHAT HOW WHY
WHY?
最後に
会社概要 81 • 2000年に京都で創業 • 従業員数:172名ぐらい (平均34歳) • 拠点: •
東京(三軒茶屋)、 • 京都(四条烏丸)、 • ⼤阪、札幌、福岡、名古屋 株式会社ゆめみ
ゆめみって? 82 みなさんが使っているあのインターネットサービス、 実はゆめみが作ってます その数・・・毎⽉5000万⼈
取引先(⼀部) 83 直近3年間の取引実績を抜粋
ゆめみって? 84 Grow with YUMEMI. エンジニア/クリエイターが成⻑できる環境を 本気で追及してます!
成⻑を⽀える各種制度 85 勉強し放題制度 有給取り放題制度 全員CEO制度 質
Presentation.end() ご清聴 ありがとうございました!