Re-evaluating Front-end Performance Best Practices

Transcript

1. 1.

   re-evaluating front-end performance best practices

2. 2.

   @bentlegen

3. 3.

   None
4. 4.

   None
5. 5.

   car·go cult

6. 6.

   cargo cult web performance

7. 7.

   how does it happen?

8. 8.

   deprecated … • books • blog posts • best practice

   guides • StackOverflow answers • performance analysis tools • practices on live websites • conference talks like this one
9. 9.

   the agenda • hostname sharding • for-loop array length caching

   • dynamic script insertion
10. 10.

    hostname sharding

11. 11.

    in the beginning (HTTP 1.0)

12. 12.

    with more connections 2 4 8 www www www

13. 13.

    with hostname sharding 2 2 2 www www1, www2 www1

    www2 www3 www4
14. 14.

    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!
15. 15.

    None
16. 16.

    not a big deal anymore

17. 17.

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

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

19. 19.

    rise of https stalled/ proxy negotiation dns! lookup connection +

    tls/ssl time-to-
 first-byte download tls/ssl handshake
20. 20.

    and http/2 will make all this irrelevant anyways

21. 21.

    “2 domains for non-SPDY modern browsers” – Souders in 2013

    bit.ly/rprf-2domains
22. 22.

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

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

    looping

25. 25.

    specifically array length caching in for loops

26. 26.

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

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

    None
28. 28.

    None
29. 29.

    None
30. 30.

    does it still hold?

31. 31.

    cache vs no cache Chrome 42 Firefox 37 Safari 7

    IE9+ IE8 ops/second (normalized), bigger is better cache no cache 78%
32. 32.

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

33. 33.

    uncached version

34. 34.

    cached version

35. 35.

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

    Vyacheslav Egorov, V8 bit.ly/rprf-v8opt
36. 36.

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

    too
37. 37.

    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%
38. 38.

    if you think you’re going to get performance gains from

    optimizing for loops you’re gonna have a bad time
39. 39.

    dynamic script insertion

40. 40.

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

    </script> vs <script src="/app.js"></script>
41. 41.

    None
42. 42.

    None
43. 43.

    who does this? • analytics: GA, Mixpanel, Chartbeat, Wordpress •

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

    small problem: CSS Object Model

45. 45.

    CSS Object Model (CCSOM) <link type="text/stylesheet" href="/main.css"/> ! ! !

    <script> window.getComputedStyle(document.body).margin; </script> can’t execute until CSS ready
46. 46.

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

    dynamic script insertion scripts execute inline scripts can’t execute until

    CSSOM ready; downloading is delayed
48. 48.

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

    1st script executes
49. 49.

    “Have we been doing it all wrong?” - Ilya Grigorik,

    2014 bit.ly/rprf-injected
50. 50.

    3rd option: async attribute <script async src="/app.js"></script>

51. 51.

    ideal: async attribute both scripts execute all 3 resources download

    in parallel
52. 52.

    we should probably start using async

53. 53.

    None
54. 54.

    closing thoughts

55. 55.

    don’t always believe what you read on the internet

56. 56.

    benchmark your own stuff

57. 57.

    benchmark your own stuff every year, apparently

58. 58.

    always bet on browsers (and JS engines)

59. 59.

    thanks

60. 60.

    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