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

Upgrading the Web: Boston Web Performance Meetup

Upgrading the Web: Boston Web Performance Meetup

There are two classes of improvements that this talk covers:

1. Server side changes, like SPDY and HTTP Origin/Hop Hints
2. Browser changes, like support for WebP, Client Hints, and pre-fetching

This talk explains which ones are valuable today and provides data around the benefit you can expect to get from each optimization.

Jonathan Klein

July 15, 2014
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. Upgrading the Web Driving Support For New Standards Boston Web

    Performance Meetup Jonathan Klein @jonathanklein
  2. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports
  3. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports • Started this group
  4. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  5. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  6. HTTP Origin Hints • IETF Draft • HTTP Response Header

    • Tells the browser about server capabilities
  7. HTTP Origin Hints • IETF Draft • HTTP Response Header

    • Tells the browser about server capabilities •OH: a,b=6,c
  8. HTTP Origin Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections
  9. HTTP Origin Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections • Pipeline Depth
  10. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  11. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  12. Client Hints • IETF Draft • HTTP Request Header •

    Tells the server about browser capabilities
  13. Client Hints • IETF Draft • HTTP Request Header •

    Tells the server about browser capabilities •CH-DPR: 2.0
  14. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  15. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  16. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency
  17. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency • Animation
  18. Key Stats First Run WebP Difference Bytes 576KB 387KB -33%

    Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1%
  19. Challenges with WebP • Harder to share • Increased decoding

    time • Controversial studies around quality/size
  20. Challenges with WebP • Harder to share • Increased decoding

    time • Controversial studies around quality/size • No progressive decoding (yet)
  21. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  22. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  23. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression (HPACK) • Prioritization
  24. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression (HPACK) • Prioritization • Server Push
  25. Key Stats First Run SPDY/ HTTP 2.0 Difference Bytes 387KB

    387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
  26. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  27. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  28. Pre-fetching • Fetch assets for next page • Speeds up

    navigation <link rel="prefetch" href="/foo.css">
  29. ! ! ! ! ! <link rel="prefetch" href="/prestashop/themes/default/css/product.css"> <link rel="prefetch"

    href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.css"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.idTabs.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.scrollTo.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.serialScroll.js"> <link rel="prefetch" href="/prestashop/themes/default/js/tools.js"> <link rel="prefetch" href="/prestashop/themes/default/js/product.js">
  30. Key Stats First Run Pre-fetching Difference Bytes 85KB 50KB -40%

    Speed Index 479ms 290ms -40% CSS Files 2 0 -100% JS Files 6 0 -100%
  31. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  32. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support
  33. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support • Report bugs