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

Upgrading the Web - Driving Support For New Sta...

Upgrading the Web - Driving Support For New Standards

I gave this talk at Velocity London 2013.

Slides and links available at jkle.in/upgrade

Jonathan Klein

November 15, 2013
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. Upgrading the Web Driving Support For New Standards Velocity London

    2013 Jonathan Klein @jonathanklein Friday, November 15, 13
  2. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports Friday, November 15, 13
  3. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group Friday, November 15, 13
  4. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 Friday, November 15, 13
  5. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  6. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  7. HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header

    •OH: a,b=6,c Friday, November 15, 13
  8. HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header

    •OH: a,b=6,c • Tells the browser about server capabilities Friday, November 15, 13
  9. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies Friday, November 15, 13
  10. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections Friday, November 15, 13
  11. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections • Pipeline Depth Friday, November 15, 13
  12. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  13. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  14. Client Hints • IETF Draft • HTTP Request Header •CH-DPR:

    2.0 • Tells the server about browser capabilities Friday, November 15, 13
  15. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  16. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  17. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option Friday, November 15, 13
  18. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency Friday, November 15, 13
  19. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency • Growing adoption Friday, November 15, 13
  20. Key Stats First Run Bytes 576KB Start Render 932ms Speed

    Index 1269ms Friday, November 15, 13
  21. Key Stats First Run WebP Difference Bytes 576KB 387KB -33%

    Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1% Friday, November 15, 13
  22. Challenges with WebP • Worse shareability • Increased decoding time

    • Controversial studies around quality/size Friday, November 15, 13
  23. Challenges with WebP • Worse shareability • Increased decoding time

    • Controversial studies around quality/size • No progressive decoding (yet) Friday, November 15, 13
  24. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  25. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  26. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression Friday, November 15, 13
  27. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression • Prioritization Friday, November 15, 13
  28. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression • Prioritization • Wide support Friday, November 15, 13
  29. Key Stats First Run SPDY/ HTTP 2.0 Difference Bytes 387KB

    387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14% Friday, November 15, 13
  30. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook • Twitter Friday, November 15, 13
  31. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook • Twitter • You? Friday, November 15, 13
  32. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  33. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  34. Pre-fetching • Fetch assets for next page • Speeds up

    navigation <link rel="prefetch" href="/foo.css"> Friday, November 15, 13
  35. Key Stats First Run Bytes 85KB Speed Index 479ms CSS

    Files 2 JS Files 6 Friday, November 15, 13
  36. Prefetch <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"> Friday, November 15, 13
  37. 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% Friday, November 15, 13
  38. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
  39. Action Steps • Implement as much as you can •

    Speak/blog about challenges Friday, November 15, 13
  40. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support Friday, November 15, 13
  41. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support • Report bugs Friday, November 15, 13