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
730
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
550
Deconstructing Performance
mishunov
2
540
Why Performance Matters
mishunov
2
910
В погоне за производительностью
mishunov
0
260
Illusion of Time [JSConfEU 2015 edition]
mishunov
1
150
Illusion of Time. When 60 sec is not 1 minute
mishunov
0
130
Научный Дизайн
mishunov
0
250
Let me tell you a story
mishunov
0
100
Science of Design 2
mishunov
5
710
Other Decks in Technology
See All in Technology
はてなの開発20年史と DevOpsの歩み / DevOpsDays Tokyo 2025 Keynote
daiksy
5
1.3k
GitHub MCP Serverを使って Pull Requestを作る、レビューする
hiyokose
2
700
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
380
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
210
Amebaにおける Platform Engineeringの実践
kumorn5s
6
890
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
230
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
410
ゆるくVPC Latticeについてまとめてみたら、意外と奥深い件
masakiokuda
2
230
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
3
190
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
240
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
270
Lightdashの利活用状況 ー導入から2年経った現在地_20250409
hirokiigeta
2
270
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
380
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Scaling GitHub
holman
459
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Ace a Technical Interview
jacobian
276
23k
A Tale of Four Properties
chriscoyier
158
23k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
GitHub's CSS Performance
jonrohan
1030
460k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
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