LDNWebPerf December 2016 - Michael Gooding

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