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
FSTO: Re-evaluating Front-end Peformance Best P...
Search
benvinegar
November 15, 2015
Programming
9
980
FSTO: Re-evaluating Front-end Peformance Best Practices
Full Stack Toronto 2015
benvinegar
November 15, 2015
Tweet
Share
More Decks by benvinegar
See All by benvinegar
Getting the most out of JavaScript errors
benvinegar
1
320
JavaScript Error Reporting (and Why We Can't Have Nice Things)
benvinegar
0
210
Re-evaluating Front-end Performance Best Practices
benvinegar
15
1.6k
Other Decks in Programming
See All in Programming
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Jakarta EE meets AI
ivargrimstad
0
420
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
930
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
400
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Automating Front-end Workflow
addyosmani
1368
200k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Navigating Team Friction
lara
183
15k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
re-evaluating front-end performance best practices
@bentlegen
None
http://getsentry.com
car·go cult
ccccccejlfevnigejevgjkglrc hibhjrtcjlngnfblfb cargo cult science
cargo cult web performance
how did we get here?
deprecated books 2007 2009 2010
stackoverflow answers
analysis tools
analysis tools 2014 2013
practices on live websites
conference talks
today’s agenda • hostname sharding • for-loop array length caching
• dynamic script insertion
hostname sharding
in the beginning (HTTP 1.0)
with more connections 2 4 8 www www www
with hostname sharding 2 2 2 www www1, www2 www1
www2 www3 www4
still common Website # Static Hosts plus.google.com 4 tumblr.com 4
alibaba.com 4 theverge.com 4 ebay.com 6 businessinsider.com 6 netflix.com 11!
None
not a big deal anymore
browser connections/origin Browser # HTTP / origin Chrome 42 6
Firefox 37 8 Safari 7 6 IE 8, 9 6 IE 10 8 IE 11 13 bit.ly/rprf-bscope
chrome caps parallel image requests at 10 anyways bit.ly/rprf-bscope
rise of https stalled/ proxy negotiation dns lookup connection +
tls/ssl time-to- first-byte download tls/ssl handshake
and http/2 will make all this irrelevant anyways
“2 domains for non- [HTTP2] modern browsers” – Souders in
2013 bit.ly/rprf-2domains
etsy case study • 4 image domains → 2 •
50-80 ms faster for image heavy pages • 30-50 ms faster overall • up to 500ms faster on mobile bit.ly/rprf-etsy
the web’s moving on Website # Static Hosts netflix.com* 1
nytimes.com 1 youtube.com 2 twitter.com 2 facebook.com 2 pinterest.com 2 bbc.co.uk 2 etsy.com 3
looping
specifically array length caching in for loops
for (var i = 0, len = arr.length; i <
len; i++) { // do stuff } for (var i = 0; i < arr.length; i++) { // do stuff } vs
None
None
None
does it still hold?
cache vs no cache Chrome 42 Firefox 37 Safari 7
IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%
V8 (and other browsers) recognize this pattern bit.ly/rprf-v8opt
None
uncached version
cached version
“we should start assuming that our code is optimized” -
Vyacheslav Egorov, V8 bit.ly/rprf-v8opt
if you can trivially optimize it, the browser (probably) can
too
mobile disagrees, a little Chrome 41 (Android 5.1) Firefox 34
(Android 5.1) Safari (iOS 8) ops / second (normalized), bigger is better cache no cache 95%
new in es6 for (x of arr) { … }
dynamic script insertion
blocking scripts (2009) <script src=“/vendor.js”></script> <script src=“/app.js"></script> <img src=“/logo.gif”/> <link
rel=“stylesheet” type=“text/css” href=“/app.css”/> <iframe src=“/widget.html”/> vendor.js finishes app.js starts img, css, iframe
dynamic script insertion <script> var script = document.createElement('script'); script.src =
'/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); </script> all load in parallel
None
None
you’ve used this • analytics: GA, Mixpanel, Chartbeat, Wordpress •
widgets: Disqus, Facebook Comments • JS module loaders: RequireJS, LabJS • script managers: Google Tag Manager, Segment
small problem: CSS Object Model
CSS Object Model (CCSOM) <link rel="stylesheet" type="text/css" href="/ main.css"/> <script>
window.getComputedStyle(document.body).margin; </script> can’t execute until CSS ready
CSSOM + dynamic script insertion <link rel="stylesheet" type="text/css" href="/ main.css"/>
<script> var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); </script> can’t execute until CSS ready
dynamic script insertion scripts execute inline scripts can’t execute until
CSSOM ready; downloading is delayed
blocking 2nd script downloads after 1st executes 1st script preloaded
1st script executes
blocking with Chrome 1st and 2nd script preloaded 1st and
2nd script execute (blocked for CSSOM)
2014
3rd option: async attribute <script async src="/app.js"></script>
ideal: async attribute scripts execute before CSS finished all 3
resources download in parallel
we should probably start using async
new: GA + async attr
closing thoughts
don’t always believe what you read on the internet
benchmark your own stuff
benchmark your own stuff every few years
always bet on browsers (and JS engines)
thanks
acknowledgements • performance research: Steve Souders, Ilya Grigorik, Guy Podjarny,
Vyacheslav Egorov, Jonathan Klein, Paul Irish, Nicholas Zakas • photos: Christian Junker, André Hofmeister, “My aim is true” • me: Ben Vinegar (@bentlegen) • Sentry plug: http://getsentry.com