Re-evaluating Front-end Performance Best Practices

Slide 1

Slide 1 text

re-evaluating front-end performance best practices

Slide 2

Slide 2 text

@bentlegen

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

car·go cult

Slide 6

Slide 6 text

cargo cult web performance

Slide 7

Slide 7 text

how does it happen?

Slide 8

Slide 8 text

deprecated … • books • blog posts • best practice guides • StackOverﬂow answers • performance analysis tools • practices on live websites • conference talks like this one

Slide 9

Slide 9 text

the agenda • hostname sharding • for-loop array length caching • dynamic script insertion

Slide 10

Slide 10 text

hostname sharding

Slide 11

Slide 11 text

in the beginning (HTTP 1.0)

Slide 12

Slide 12 text

with more connections 2 4 8 www www www

Slide 13

Slide 13 text

with hostname sharding 2 2 2 www www1, www2 www1 www2 www3 www4

Slide 14

Slide 14 text

still common Website # Static Hosts plus.google.com 4 tumblr.com 4 alibaba.com 4 theverge.com 4 ebay.com 6 businessinsider.com 6 netﬂix.com 11!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

not a big deal anymore

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

chrome caps parallel image requests at 10 anyways bit.ly/rprf-bscope

Slide 19

Slide 19 text

rise of https stalled/ proxy negotiation dns! lookup connection + tls/ssl time-to-  ﬁrst-byte download tls/ssl handshake

Slide 20

Slide 20 text

and http/2 will make all this irrelevant anyways

Slide 21

Slide 21 text

“2 domains for non-SPDY modern browsers” – Souders in 2013 bit.ly/rprf-2domains

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

the web’s moving on Website # Static Hosts netﬂix.com* 1 nytimes.com 1 youtube.com 2 twitter.com 2 facebook.com 2 pinterest.com 2 bbc.co.uk 2 etsy.com 3

Slide 24

Slide 24 text

looping

Slide 25

Slide 25 text

specifically array length caching in for loops

Slide 26

Slide 26 text

for (var i = 0, len = arr.length; i < len; i++) { // do stuff } for (var i = 0; i < arr.length; i++) { // do stuff } vs

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

does it still hold?

Slide 31

Slide 31 text

cache vs no cache Chrome 42 Firefox 37 Safari 7 IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%

Slide 32

Slide 32 text

V8 (and other browsers) recognize this pattern bit.ly/rprf-v8opt

Slide 33

Slide 33 text

uncached version

Slide 34

Slide 34 text

cached version

Slide 35

Slide 35 text

“we should start assuming that our code is optimized” - Vyacheslav Egorov, V8 bit.ly/rprf-v8opt

Slide 36

Slide 36 text

if you can trivially optimize it, the browser (probably) can too

Slide 37

Slide 37 text

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%

Slide 38

Slide 38 text

if you think you’re going to get performance gains from optimizing for loops you’re gonna have a bad time

Slide 39

Slide 39 text

dynamic script insertion

Slide 40

Slide 40 text

var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); vs

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

who does this? • analytics: GA, Mixpanel, Chartbeat, Wordpress • widgets: Disqus, Facebook Comments • JS module loaders: RequireJS, LabJS • script managers: Google Tag Manager, Segment

Slide 44

Slide 44 text

small problem: CSS Object Model

Slide 45

Slide 45 text

CSS Object Model (CCSOM) ! ! ! window.getComputedStyle(document.body).margin; can’t execute until CSS ready

Slide 46

Slide 46 text

CSSOM + dynamic script insertion ! ! ! var script = document.createElement('script'); script.src = '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); can’t execute until CSS ready

Slide 47

Slide 47 text

dynamic script insertion scripts execute inline scripts can’t execute until CSSOM ready; downloading is delayed

Slide 48

Slide 48 text

blocking 2nd script downloads after 1st executes 1st script preloaded 1st script executes

Slide 49

Slide 49 text

“Have we been doing it all wrong?” - Ilya Grigorik, 2014 bit.ly/rprf-injected

Slide 50

Slide 50 text

3rd option: async attribute

Slide 51

Slide 51 text

ideal: async attribute both scripts execute all 3 resources download in parallel

Slide 52

Slide 52 text

we should probably start using async

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

closing thoughts

Slide 55

Slide 55 text

don’t always believe what you read on the internet

Slide 56

Slide 56 text

benchmark your own stuff

Slide 57

Slide 57 text

benchmark your own stuff every year, apparently

Slide 58

Slide 58 text

always bet on browsers (and JS engines)

Slide 59

Slide 59 text

thanks

Slide 60

Slide 60 text

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) • oﬃce hours @ 1:30 PM today