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
Re-evaluating Front-end Performance Best Practices
Search
benvinegar
April 21, 2015
Programming
15
1.6k
Re-evaluating Front-end Performance Best Practices
Fluent 2015
benvinegar
April 21, 2015
Tweet
Share
More Decks by benvinegar
See All by benvinegar
Getting the most out of JavaScript errors
benvinegar
1
280
JavaScript Error Reporting (and Why We Can't Have Nice Things)
benvinegar
0
200
FSTO: Re-evaluating Front-end Peformance Best Practices
benvinegar
9
800
Other Decks in Programming
See All in Programming
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
800
スタックトレース始めてみた
kuro_kurorrr
4
1.1k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
510
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
GoでParserを書く
karupanerura
1
250
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
Good first issues of TypeProf
mame
3
510
Namespace, What and Why
tagomoris
3
660
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
240
Fragment Composition of GraphQL
quramy
14
1.7k
CQRS meets modern Java
simas
PRO
2
470
RaaP
ksss
0
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
What's in a price? How to price your products and services
michaelherold
238
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Agile that works and the tools we love
rasmusluckow
325
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Thoughts on Productivity
jonyablonski
60
3.9k
Clear Off the Table
cherdarchuk
86
310k
Scaling GitHub
holman
457
140k
Transcript
re-evaluating front-end performance best practices
@bentlegen
None
None
car·go cult
cargo cult web performance
how does it happen?
deprecated … • books • blog posts • best practice
guides • StackOverflow answers • performance analysis tools • practices on live websites • conference talks like this one
the 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-SPDY 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
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%
if you think you’re going to get performance gains from
optimizing for loops you’re gonna have a bad time
dynamic script insertion
<script> var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script);
</script> vs <script src="/app.js"></script>
None
None
who does 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 type="text/stylesheet" href="/main.css"/> ! ! !
<script> window.getComputedStyle(document.body).margin; </script> can’t execute until CSS ready
CSSOM + dynamic script insertion <link type="text/stylesheet" 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
“Have we been doing it all wrong?” - Ilya Grigorik,
2014 bit.ly/rprf-injected
3rd option: async attribute <script async src="/app.js"></script>
ideal: async attribute both scripts execute all 3 resources download
in parallel
we should probably start using async
None
closing thoughts
don’t always believe what you read on the internet
benchmark your own stuff
benchmark your own stuff every year, apparently
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) • office hours @ 1:30 PM today