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
2.1k
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.4k
Other Decks in Programming
See All in Programming
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
270
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
480
Serena MCPのすすめ
wadakatu
4
1k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
CSC305 Lecture 06
javiergs
PRO
0
230
dynamic!
moro
10
8k
品質ワークショップをやってみた
nealle
0
260
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
930
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Code Reviewing Like a Champion
maltzj
526
40k
Designing Experiences People Love
moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
GitHub's CSS Performance
jonrohan
1032
470k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
A Modern Web Designer's Workflow
chriscoyier
697
190k
GraphQLとの向き合い方2022年版
quramy
49
14k
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() ご清聴 ありがとうございました!