FSTO: Re-evaluating Front-end Peformance Best Practices

Transcript

1. 1.

   re-evaluating front-end performance best practices

2. 2.

   @bentlegen

3. 3.

   None
4. 4.

   http://getsentry.com

5. 5.

   car·go cult

6. 6.

   ccccccejlfevnigejevgjkglrc hibhjrtcjlngnfblfb cargo cult science

7. 7.

   cargo cult web performance

8. 8.

   how did we get here?

9. 9.

   deprecated books 2007 2009 2010

10. 10.

    stackoverflow answers

11. 11.

    analysis tools

12. 12.

    analysis tools 2014 2013

13. 13.

    practices on live websites

14. 14.

    conference talks

15. 15.

    today’s agenda • hostname sharding • for-loop array length caching

    • dynamic script insertion
16. 16.

    hostname sharding

17. 17.

    in the beginning (HTTP 1.0)

18. 18.

    with more connections 2 4 8 www www www

19. 19.

    with hostname sharding 2 2 2 www www1, www2 www1

    www2 www3 www4
20. 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!
21. 21.

    None
22. 22.

    not a big deal anymore

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

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

25. 25.

    rise of https stalled/ proxy negotiation dns lookup connection +

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

    and http/2 will make all this irrelevant anyways

27. 27.

    “2 domains for non- [HTTP2] modern browsers” – Souders in

    2013 bit.ly/rprf-2domains
28. 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
29. 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
30. 30.

    looping

31. 31.

    specifically array length caching in for loops

32. 32.

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

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

    None
34. 34.

    None
35. 35.

    None
36. 36.

    does it still hold?

37. 37.

    cache vs no cache Chrome 42 Firefox 37 Safari 7

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

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

39. 39.

    None
40. 40.

    uncached version

41. 41.

    cached version

42. 42.

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

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

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

    too
44. 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%
45. 45.

    new in es6 for (x of arr) { … }

46. 46.

    dynamic script insertion

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

    None
50. 50.

    None
51. 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
52. 52.

    small problem: CSS Object Model

53. 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
54. 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
55. 55.

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

    CSSOM ready; downloading is delayed
56. 56.

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

    1st script executes
57. 57.

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

    2nd script execute (blocked for CSSOM)
58. 58.

    2014

59. 59.

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

60. 60.

    ideal: async attribute scripts execute before CSS finished all 3

    resources download in parallel
61. 61.

    we should probably start using async

62. 62.

    new: GA + async attr

63. 63.

    closing thoughts

64. 64.

    don’t always believe what you read on the internet

65. 65.

    benchmark your own stuff

66. 66.

    benchmark your own stuff every few years

67. 67.

    always bet on browsers (and JS engines)

68. 68.

    thanks

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