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
720
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
530
Deconstructing Performance
mishunov
2
530
Why Performance Matters
mishunov
2
880
В погоне за производительностью
mishunov
0
250
Illusion of Time [JSConfEU 2015 edition]
mishunov
1
150
Illusion of Time. When 60 sec is not 1 minute
mishunov
0
120
Научный Дизайн
mishunov
0
240
Let me tell you a story
mishunov
0
95
Science of Design 2
mishunov
5
700
Other Decks in Technology
See All in Technology
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
280
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
130
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
What's new in Go 1.24?
ciarana
1
110
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
110
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
110
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
220
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Embracing the Ebb and Flow
colly
84
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Optimizing for Happiness
mojombo
376
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Code Review Best Practice
trishagee
67
18k
Adopting Sorbet at Scale
ufuk
74
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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