Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FSTO: Re-evaluating Front-end Peformance Best P...

benvinegar
November 15, 2015

FSTO: Re-evaluating Front-end Peformance Best Practices

Full Stack Toronto 2015

benvinegar

November 15, 2015
Tweet

More Decks by benvinegar

Other Decks in Programming

Transcript

  1. 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!
  2. 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
  3. rise of https stalled/ proxy negotiation dns lookup connection +

    tls/ssl time-to-
 first-byte download tls/ssl handshake
  4. 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
  5. 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
  6. for (var i = 0, len = arr.length; i <

    len; i++) { // do stuff } for (var i = 0; i < arr.length; i++) { // do stuff } vs
  7. cache vs no cache Chrome 42 Firefox 37 Safari 7

    IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%
  8. “we should start assuming that our code is optimized” -

    Vyacheslav Egorov, V8 bit.ly/rprf-v8opt
  9. 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%
  10. 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
  11. dynamic script insertion <script> var script = document.createElement('script'); script.src =

    '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); </script> all load in parallel
  12. you’ve used this • analytics: GA, Mixpanel, Chartbeat, Wordpress •

    widgets: Disqus, Facebook Comments • JS module loaders: RequireJS, LabJS • script managers: Google Tag Manager, Segment
  13. 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
  14. 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
  15. blocking with Chrome 1st and 2nd script preloaded 1st and

    2nd script execute (blocked for CSSOM)
  16. 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