$30 off During Our Annual Pro Sale. View Details »

LDNWebPerf December 2016 - Michael Gooding

LDNWebPerf December 2016 - Michael Gooding

London Web Performance Group

December 06, 2016
Tweet

More Decks by London Web Performance Group

Other Decks in Technology

Transcript

  1. ©2016 AKAMAI | FASTER FORWARDTM
    HTTP/2 in
    the real world
    Michael Gooding
    @Michael_G_81

    View Slide

  2. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Measurement
    ii. Rendering
    iii. Small files
    iv. Sprites

    View Slide

  3. ©2016 AKAMAI | FASTER FORWARDTM
    Akamai Real User Monitoring (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. A/B testing
    6. Browsers behave differently
    7. Network conditions vary results

    View Slide

  4. ©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.
    Network variations for cellular connections
    % users
    h1 h2
    seconds
    % users
    seconds
    Wired connections Cellular connections
    h1 h2

    View Slide

  5. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Measurement
    ii. Rendering
    iii. Small files
    iv. Sprites

    View Slide

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

    View Slide

  7. ©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
    /js
    /css
    www.website.com
    /js
    /css
    www.website.com
    dns connection ssl ttfb d/load

    View Slide

  8. ©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
    cdn.website.com/js
    cdn.website.com/css
    www.website.com
    cdn.website.com/js
    cdn.website.com/css
    www.website.com
    h1
    h2
    2 Domains
    h2
    1 Certificate
    2 Certificates
    cdn.website.com/js
    cdn.website.com/css
    www.website.com
    dns connection ssl ttfb d/load

    View Slide

  9. ©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

  10. ©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

  11. ©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 with Push
    2 sec
    1 sec
    Push
    prog
    jpg

    View Slide

  12. ©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

  13. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Measurement
    ii. Rendering
    iii. Small files
    iv. Sprites

    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.
    CSS
    h2 performance comparison h
    # of files
    time

    View Slide

  15. ©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.
    CSS
    h2 performance comparison - Chrome h
    # of files
    time
    h1 h2
    H2 is faster, especially as you increase the number of files
    Smaller number of files is faster to load

    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.
    JavaScript
    h2 performance comparison h
    # of files
    time

    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.
    JavaScript
    What about rendering? h
    h1 h2

    View Slide

  18. ©2016 AKAMAI | FASTER FORWARDTM
    Performance
    i. Measurement
    ii. Rendering
    iii. Small files
    iv. Sprites

    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 – Image Sprites
    h2 performance comparison h
    # of files
    time
    mob-Safari X

    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 – Image Sprites
    Other considerations
    1. Management complexity
    2. Caching
    3. Images used in sprite

    View Slide

  21. ©2016 AKAMAI | FASTER FORWARDTM
    Most of the times h2 improves performance
    Don’t give up if it doesn’t
    Anti-patterns aren’t anti-patterns
    1. Don’t shard critical content
    2. Keep combining files
    3. Keep using sprites (if you use enough images)
    Everything is evolving FAST (servers, browsers, QUIC)

    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.
    More information
    https://goo.gl/3ZVNN8

    View Slide

  23. ©2016 AKAMAI | FASTER FORWARDTM
    Thank You!
    Michael Gooding
    @Michael_G_81

    View Slide