FSTO: Re-evaluating Front-end Peformance Best Practices

2ab326462da24e47db9a12eb984524aa?s=47 benvinegar
November 15, 2015

FSTO: Re-evaluating Front-end Peformance Best Practices

Full Stack Toronto 2015

2ab326462da24e47db9a12eb984524aa?s=128

benvinegar

November 15, 2015
Tweet

Transcript

  1. 3.
  2. 20.

    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!
  3. 21.
  4. 23.

    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
  5. 25.

    rise of https stalled/ proxy negotiation dns lookup connection +

    tls/ssl time-to-
 first-byte download tls/ssl handshake
  6. 28.

    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
  7. 29.

    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
  8. 30.
  9. 32.

    for (var i = 0, len = arr.length; i <

    len; i++) { // do stuff } for (var i = 0; i < arr.length; i++) { // do stuff } vs
  10. 33.
  11. 34.
  12. 35.
  13. 37.

    cache vs no cache Chrome 42 Firefox 37 Safari 7

    IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%
  14. 39.
  15. 42.

    “we should start assuming that our code is optimized” -

    Vyacheslav Egorov, V8 bit.ly/rprf-v8opt
  16. 44.

    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%
  17. 47.

    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
  18. 48.

    dynamic script insertion <script> var script = document.createElement('script'); script.src =

    '/app.js'; document.getElementsByTagName('head')[0] .appendChild(script); </script> all load in parallel
  19. 49.
  20. 50.
  21. 51.

    you’ve used this • analytics: GA, Mixpanel, Chartbeat, Wordpress •

    widgets: Disqus, Facebook Comments • JS module loaders: RequireJS, LabJS • script managers: Google Tag Manager, Segment
  22. 53.

    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
  23. 54.

    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
  24. 57.

    blocking with Chrome 1st and 2nd script preloaded 1st and

    2nd script execute (blocked for CSSOM)
  25. 58.
  26. 68.
  27. 69.

    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