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
CSC509 Lecture 13
javiergs
PRO
0
110
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
CSC509 Lecture 09
javiergs
PRO
0
140
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
110
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Remix on Hono on Cloudflare Workers
yusukebe
1
300
最新TCAキャッチアップ
0si43
0
200
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
360
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Vapor Revolution
kazupon
1
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Teambox: Starting and Learning
jrom
133
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rails Girls Zürich Keynote
gr2m
94
13k
A Philosophy of Restraint
colly
203
16k
Typedesign – Prime Four
hannesfritz
40
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Site-Speed That Sticks
csswizardry
0
33
Building Adaptive Systems
keathley
38
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
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() ご清聴 ありがとうございました!