Velocity Santa Clara: H2 in the real World

A year's worth of observations and experience of H2 performance with some advice to help address some common performance issues.

Transcript

1. H2 in the real world
   Michael Gooding
   @Michael_G_81
   Javier Garza
   @jjaviergarza
   

   View Slide

2. ©2016 AKAMAI | FASTER FORWARDTM
   18 Feb
   2015
   

   View Slide

3. ©2016 AKAMAI | FASTER FORWARDTM
   Conflict in Ukraine continued
   Picture: AFP/Getty Images
   

   View Slide

4. ©2016 AKAMAI | FASTER FORWARDTM
   Heavy snow in Istanbul causes airport closure
   Picture: AFP/Getty Images
   

   View Slide

5. ©2016 AKAMAI | FASTER FORWARDTM
   Relatives of missing flight MH370 passengers protest
   in Malaysia
   Picture: AFP/Getty Images
   

   View Slide

6. ©2016 AKAMAI | FASTER FORWARDTM
   People in Finland celebrated Chinese New Year
   Picture: EPA
   

   View Slide

7. ©2016 AKAMAI | FASTER FORWARDTM
   In Russia a Car falls into a sink hole!
   Picture: Europics
   

   View Slide

8. ©2016 AKAMAI | FASTER FORWARDTM
   

   View Slide

9. ©2016 AKAMAI | FASTER FORWARDTM
   

   View Slide

10. ©2016 AKAMAI | FASTER FORWARDTM
    Michael Gooding: Performance Specialist
    Javier Garza: ???
    1. H2 Performance
    i. Rendering
    ii. Small files
    iii. Sprites
    

    View Slide

11. ©2016 AKAMAI | FASTER FORWARDTM
    1. Performance
    

    View Slide

12. 300+ customers using H2
    1100+ domains
    

    View Slide

13. ©2016 AKAMAI | FASTER FORWARDTM
    Akamai RUM
    1. Billions beacons collected per day
    2. Some sites see good improvements
    3. Some sites don’t!
    4. 3rd Party content waters down benefit
    5. Network conditions vary results
    6. Browsers behave differently
    

    View Slide

14. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    H1 v H2 Demo
    

    View Slide

15. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Rendering
    ii. Small files
    iii. Sprites
    

    View Slide

16. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance - Rendering
    h1
    h2
    h1
    h2
    4 sec
    

    View Slide

17. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance - Rendering
    h1
    h2
    h1
    h2
    4 sec
    

    View Slide

18. ©2016 AKAMAI | FASTER FORWARDTM
    What’s the problem?
    Rendering with different prioritisation
    

    View Slide

19. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance - Rendering: Sharding
    h1
    h2
    1 Domain
    All on same connection
    2nd connection opened
    

    View Slide

20. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance - Rendering: Sharding
    h1
    h2
    2 Domains
    h2
    1 Certificate
    2 Certificates
    

    View Slide

21. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance - Rendering: Sharding
    h1
    h2
    3 Domains
    h2
    1 Certificate
    3 Certificates
    

    View Slide

22. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: Sharding example
    h2
    after
    h2
    before
    Simple improvement by not making connection
    

    View Slide

23. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: Sharding example
    h2
    after
    h2
    before
    

    View Slide

24. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: Progressive jpegs
    h2
    normal jpeg
    progressive
    Normal jpegs just 60% loaded
    

    View Slide

25. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: Progressive jpeg example
    h2
    after
    h2
    before
    

    View Slide

26. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: DIY prioritisation
    <br/>var img = document.createElement("img");<br/>img.src = "tshirt2.jpg";<br/>document.getElementById("imgholder").appendChild(img);<br/>
    Different order, but ultimately same outcome
    

    View Slide

27. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: DIY prioritisation
    
    <br/>function addImages() {;<br/>var img = document.createElement("img");<br/>img.src = "tshirt2.jpg";<br/>document.getElementById("imgholder").appendChild(img);<br/>}<br/>
    Different order and loaded with dependency
    

    View Slide

28. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: INITCWND
    10
    32
    10
    64
    

    View Slide

29. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering example
    Large image fills bandwidth
    

    View Slide

30. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering example
    prog
    jpg
    h2
    before
    js
    priority
    

    View Slide

31. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering example
    2 sec
    1 sec
    ???
    prog
    jpg
    

    View Slide

32. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Server Push Demo
    

    View Slide

33. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering example
    2 sec
    1 sec
    h2
    push
    prog
    jpg
    

    View Slide

34. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering example Server Push
    h2
    push
    prog
    jpg
    

    View Slide

35. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Rendering: Server push bad example
    h2
    push
    h2
    before
    

    View Slide

36. ©2016 AKAMAI | FASTER FORWARDTM
    Rendering Summary
    1. Keep critical content on same domain
    2. If you need to shard to balance h1 use the same cert
    3. Progressive jpgs can help rendering
    4. Use JavaScript if you need to delay resources
    5. Don’t worry too much about congestion windows
    6. Use server push where you can
    

    View Slide

37. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Rendering
    ii. Small files
    iii. Sprites
    

    View Slide

38. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: CSS
    Test Page: 1000 x coloured tags with 1000 CSS rules
    /* 1 CSS rule for each */
    #div1 {
    width:20px;
    height:20px;
    background-color:#000000;
    float:left;
    margin:1px;
    } …
    /* HTML */
    
    …
    
    For example 1 file with 1000 rules OR 500 files with 2 rules in each
    

    View Slide

39. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: CSS
    Visual experience of test
    H2 is faster to download, rendering is not progressive - (10 file example)
    h1
    h2
    

    View Slide

40. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: CSS
    CSS bytes downloaded
    0
    250
    500
    0
    6
    12
    18
    0 250 500 750 1000
    H2 is smaller because of header compression
    File size grows because of less compression (gzip) and more headers *
    # of files
    file size (kB)
    visual complete (s)
    h1 h2
    

    View Slide

41. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: CSS
    0
    250
    500
    0
    6
    12
    18
    0 250 500 750 1000
    h1 h2
    # of files
    file size (kB)
    visual complete (s)
    Chrome performance comparison
    H2 is slower when you exceed 20 files!
    

    View Slide

42. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: CSS
    Firefox performance comparison
    0
    250
    500
    0
    6
    12
    18
    0 250 500 750 1000
    # of files
    file size (kB)
    visual complete (s)
    h1 h2
    H2 is faster, especially as you increase the number of files
    Smaller number of files is faster to load
    

    View Slide

43. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    0
    0.4
    0.8
    1.2
    1 2 3 4 5 6 7 8 9 10
    Chrome h2
    Chrome h1
    Performance – Small files: CSS
    Zoomed to 7.5 files
    # of files
    visual complete (s)
    

    View Slide

44. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    0
    0.4
    0.8
    1.2
    1 2 3 4 5 6 7 8 9 10
    Chrome h2
    Chrome h1
    FF h2
    FF h1
    Performance – Small files: CSS
    Zoomed to 7.5 files
    # of files
    visual complete (s)
    

    View Slide

45. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files example
    Network not much different
    h2
    after
    h2
    before
    

    View Slide

46. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files example
    h2
    after
    h2
    before
    Result in browser is big
    

    View Slide

47. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Test Page: 1000 x restyled tags with 1000 JS updates
    /* Example JS code for each block */
    document.getElementById('div1').style.backgroundColor = 'red';
    /* HTML */
    
    For example 1 file with 1000 updates OR 500 files with 2 updates in each
    

    View Slide

48. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Visual experience of test
    With h1 rendering is more progress but overall it’s slower - (20 file example)
    h1
    h2
    

    View Slide

49. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    JS bytes downloaded
    0
    150
    300
    450
    0
    6
    12
    18
    0 250 500 750 1000
    file size (kb)
    visual complete (s)
    # of files
    h1 h2
    H2 has smaller files because of header compression
    File size grows because of less compression (gzip) and more headers *
    

    View Slide

50. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Chrome performance comparison
    0
    150
    300
    450
    0
    6
    12
    18
    0 250 500 750 1000
    file size (kb)
    visual complete (s)
    # of files
    h1 h2
    Chrome a mixed bag as before
    

    View Slide

51. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Firefox performance comparison
    0
    150
    300
    450
    0
    6
    12
    18
    0 250 500 750 1000
    file size (kb)
    visual complete (s)
    # of files
    h1 h2
    H2 is only slightly faster even as you increase the number of files
    Smaller number of files is faster to load
    

    View Slide

52. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Zoomed to 22 files
    0
    1
    2
    1 6 11 16 21
    visual complete (s)
    # of files
    Chrome h2
    Chrome h1
    

    View Slide

53. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Zoomed to 22 files
    0
    1
    2
    1 6 11 16 21
    visual complete (s)
    # of files
    Chrome h2
    Chrome h1
    FF h2
    FF h1
    

    View Slide

54. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Visual experience of loading the page
    0
    3
    6
    9
    0 250 500 750 1000
    render start (s)
    # of files
    h1 h2
    Rendering range in h1 is large
    

    View Slide

55. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS
    Visual experience of loading the page
    0
    3
    6
    9
    0 250 500 750 1000
    render start (s)
    # of files
    h1 h2
    Rendering range in h1 is large
    

    View Slide

56. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS example
    Network results pretty similar
    h2
    after
    h2
    before
    

    View Slide

57. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Small files: JS example
    Faster rendering in browser
    h2
    after
    h2
    before
    

    View Slide

58. ©2016 AKAMAI | FASTER FORWARDTM
    Small files Summary
    1. Keep combining files, same as h1
    2. 2 or 3 is ok, based on frequency of change
    

    View Slide

59. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Rendering
    ii. Small files
    iii. Image Sprites
    

    View Slide

60. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites
    Test Page: 1MB of images split into different sizes
    /* HTML for 1000 files*/
    
    /* HTML for 10 files*/
    
    /* HTML for 1 file*/
    
    

    View Slide

61. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    0
    400
    800
    1200
    1600
    0
    25
    50
    0 250 500 750 1000
    Performance – Image Sprites
    Image bytes downloaded h1 h2
    # of files
    file size (kB)
    visual complete (s)
    Improved file size is just down to headers
    

    View Slide

62. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    0
    400
    800
    1200
    1600
    0
    25
    50
    0 250 500 750 1000
    Performance – Image Sprites
    Chrome performance comparison h1 h2
    # of files
    file size (kB)
    visual complete (s)
    Chrome a mixed bag as before
    

    View Slide

63. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    0
    400
    800
    1200
    1600
    0
    25
    50
    0 250 500 750 1000
    Performance – Image Sprites
    Firefox performance comparison h1 h2
    # of files
    file size (kB)
    visual complete (s)
    H2 is only slightly faster and only above 250 files
    Anything under 250 is pretty similar
    

    View Slide

64. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites
    Visual experience of loading the page h1 h2
    # of files
    Render start (s)
    0
    5
    10
    0 250 500 750 1000
    Rendering range in h1 is large
    

    View Slide

65. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites
    Visual experience of loading the page h1 h2
    # of files
    Render start (s)
    0
    5
    10
    0 250 500 750 1000
    Rendering range in h1 is large
    

    View Slide

66. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites
    Other considerations
    1. Code complexity
    2. Caching
    3. Images used in sprite
    

    View Slide

67. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites example
    

    View Slide

68. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites example
    h2
    images
    h2
    sprite
    Load difference much less with sprite
    

    View Slide

69. ©2016 AKAMAI | FASTER FORWARDTM
    Avoid data theft and downtime by extending the
    security perimeter outside the data-center and
    protect from increasing frequency, scale and
    sophistication of web attacks.
    Performance – Image Sprites example
    # of images used
    Load time (ms)
    #sprite19 {background:url('images/sprite.png') no-repeat -17px 0;}
    #image19 {background:url('sprite/sprite19.png') no-repeat;}
    0
    70
    140
    sprite 1 5 10 20 30 40
    code
    img
    used
    

    View Slide

70. ©2016 AKAMAI | FASTER FORWARDTM
    Sprite Summary
    1. Keep using sprites for performance
    2. If you are only using a few images files are ok
    3. Think about management
    4. Think about frequency of change
    5. Mobile decoding times can be slow
    

    View Slide

71. ©2016 AKAMAI | FASTER FORWARDTM
    Summary:
    Anti-patterns aren’t anti-patterns
    1. Keep combining files
    2. Check rendering times carefully
    3. Keep using sprites (if you use enough images)
    4. If you have to shard reuse the same connection
    5. Make sure critical content is on the same domain
    

    View Slide

72. Questions?
    Michael Gooding
    @Michael_G_81
    uk.linkedin.com/in/mgooding1981
    Javier Garza
    @jjaviergarza
    www.linkedin.com/in/jjgarza
    

    View Slide