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
Deconstructing Performance
Search
Denys Mishunov
April 10, 2017
Technology
4
700
Deconstructing Performance
As presented at Smashing Conference, San Francisco 2017
Denys Mishunov
April 10, 2017
Tweet
Share
More Decks by Denys Mishunov
See All by Denys Mishunov
debugger; for developers
mishunov
1
520
Deconstructing Performance
mishunov
2
520
Why Performance Matters
mishunov
2
850
В погоне за производительностью
mishunov
0
220
Illusion of Time [JSConfEU 2015 edition]
mishunov
1
140
Illusion of Time. When 60 sec is not 1 minute
mishunov
0
120
Научный Дизайн
mishunov
0
230
Let me tell you a story
mishunov
0
90
Science of Design 2
mishunov
5
680
Other Decks in Technology
See All in Technology
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
520
5分でわかるDuckDB
chanyou0311
10
3.2k
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
Wantedly での Datadog 活用事例
bgpat
1
410
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
370
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
We Have a Design System, Now What?
morganepeng
51
7.3k
Producing Creativity
orderedlist
PRO
341
39k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Gamification - CAS2011
davidbonilla
80
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Transcript
Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
PTDBSHPDPN ,FWJO8JOUFS(FUUZ*NBHFT ,FWJO8JOUFS(FUUZ*NBHFT ,FWJO8JOUFS(FUUZ*NBHFT
HPPHMSUD6)
None
2003 2005 2007 2009 2011 2013 2015 "7&3"(&#:5&4 1&31"(& 93,7
kB 2569 kB IUUQHPPHMRKNVN
-0"%*/(5*.& &70-65*0/ 1999 2006 2012 2017 IUUQHPPHMRKNVN 8 s 4
s 2 s 1 s 2569 kB
T DPOWFSTJPὝ T SFWFOVF
.0#*-&53"/4"$5*0/4 4637&: Harris Interactive for Tealeaf, 2011
$634&% BUUIFJSEFWJDF #*@%! .0#*-&53"/4"$5*0/4 4637&:
4$3&".&% BUUIFJSEFWJDF .0#*-&53"/4"$5*0/4 4637&:
5)3&8 UIFJSEFWJDF .0#*-&53"/4"$5*0/4 4637&:
1&01-& )"5& 8"*5*/(
IUUQTHPPHMDE2$& NJMMJPOT 8.143s 14.200s > 15.013s
1&3'3."/$& JTOPU ."5)&."5*$4
1&3'3."/$& JT 1&3$&15*0/
None
14:$)0-0(*$"- 1&3'03."/$& 015*.*4"5*0/
None
None
+/% KVTUOPUJDFBCMFEJ⒎FSFODF 8&#&3'&$)/&3-"8
36-& &7&/5
.&"/*/('6- /05*$&"#-& !==
OPTION 1 OPTION 2 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U OPTION
3 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U
OPTION 1 OPTION 2 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U OPTION
3 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPO`U і і і
None
36-&
&7&/5 REGRESSION ALLOWANCE 36-&
None
None
5*.&QFSTJTUTNFSFMZBTB DPOTFRVFODFPGUIF&7&/54 UBLJOHQMBDFJO<TQBDF> Martin Heidegger t u
1"44*7& "$5*7&
1"44*7& "$5*7&
1"44*7& "$5*7&
14:$)0-0(*$"-1&3'03."/$&015*.*4"5*0/ PASSIVE ACTIVE
1"44*7& 1)"4&
1"44*7& 1)"4&
"$5*7& 1)"4& 7JEFPTPVSDFIUUQSFZLKBWJLTJHIUTFFJOHJT
015*.*45*$6*
1-3% 97-99% 4 6 $ $ & 4 4 '
" * - 6 3 &
$-*$,.& 015*.*45*$6*
✔ 015*.*45*$6*
"1* ✔ 015*.*45*$6*
"1* ✔ error 0).:ʜ 015*.*45*$6*
015*.*45*$6*
015*.*45*$6*
015*.*45*$6*
MJOLSFMlʜISFGlʜ IUUQTXXXXPSH538%SFTPVSDFIJOUT 3&4063$&)*/54
SFMlEOTQSFGFUDIz SFMlQSFDPOOFDUz SFMlQSFGFUDIz SFMlQSFSFOEFSz SFMlQSFMPBEzBTlUZQFz IUUQHPPHM,LR+%
SFMlEOTQSFGFUDIz SFMlQSFDPOOFDUz SFMlQSFGFUDIz SFMlQSFSFOEFSz SFMlQSFMPBEzBTlUZQFz IUUQHPPHM,LR+%
HPPHMRKNVN
$3*5*$"-1"5)
$3*5*$"-1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 +4 +4
*.( *.(
$3*5*$"-1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 *.( *.(
+4
14:$)0-0(*$"-1&3'03."/$&015*.*4"5*0/ PASSIVE ACTIVE
HPPHM[G$-IT
None
None
None
… a couple of hours SURE! ,FWJO8JOUFS(FUUZ*NBHFT
LA LA WEB The Performance Experiment
LA LA WEB The Performance Experiment DISCLAIMER: This experiment contains
copyrighted material. The material is provided for non- profit educational purposes, comments, criticismsm and research. This should constitute a “fair use” of any such copyrighted material as provided for in §107 of the U.S. Copyright Act.
None
A COUPLE OF HOURS (REALLY) (REALLY) NO CHANGES TO FUNCTIONALITY
CONSTRAINTS PRIORITISE PERCEPTION
PASSIVE
PASSIVE
PASSIVE ACTIVE
WAITS FOR ALL ASSETS/SECTIONS REASONS
WAITS FOR ALL ASSETS/SECTIONS
SOLUTION
CRITICAL RENDERING PATH OPTIMISATION SOLUTION
CRITICAL
LA LA LAND HTML CSS IMAGES FONTS
LA LA LAND HTML
LA LA LAND HTML…………………MINIFIED
LA LA LAND CSS CSS HTML…………………MINIFIED
LA LA LAND MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND FONTS MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND MAIN CSS 6 FONTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED
CSS………INLINE CRITICAL
LA LA LAND MAIN CSS 6 FONTS IMAGES FONTS………….3 (PRELOAD)
HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED FONTS………….3 (PRELOAD)
HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE
HINTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE
HINTS CACHING FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND JS MAIN CSS 6 FONTS + RESOURCE
HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
LA LA LAND JS MAIN CSS 6 FONTS <script async
defer src=“defered.js"> </script>
LA LA LAND JS MAIN CSS 6 FONTS <script async
defer src=“defered.js"> </script> + PREFETCH + PREFETCH
LA LA LAND JS MAIN CSS 6 FONTS <script async
defer src=“defered.js"> </script> + PREFETCH + PREFETCH + PRELOAD + PRELOAD
+ RESOURCE HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
+ DEFER & DELAY EVERYTHING ELSE LA LA LAND COOKBOOK
None
None
PASSIVE ACTIVE
SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s HPPHMLL;-V
SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s 0.921s
> 5.511s 1651 HPPHMFN80p
HPPHMFN80p SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s
0.921s > 5.511s 1651 88% FASTER
5IFQFSDFQUJPOPG QFSGPSNBODFJTKVTUBT F⒎FDUJWFBTBDUVBM QFSGPSNBODFῶNBOZ DBTFT t u
5)"/,:06 :&4 5)&*--6453"5*0/4"3&.*/& DENYS MISHUNOV DIGITAL GARDEN AS @mishunov