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

Velocity Santa Clara: H2 in the real World

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.

Michael Gooding

June 27, 2016
Tweet

More Decks by Michael Gooding

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ©2016 AKAMAI | FASTER FORWARDTM
    18 Feb
    2015

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ©2016 AKAMAI | FASTER FORWARDTM

    View full-size slide

  9. ©2016 AKAMAI | FASTER FORWARDTM

    View full-size slide

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

    View full-size slide

  11. ©2016 AKAMAI | FASTER FORWARDTM
    1. Performance

    View full-size slide

  12. 300+ customers using H2
    1100+ domains

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide