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

Upgrading the Web: Driving Support For New Stan...

Upgrading the Web: Driving Support For New Standards

A talk given at Velocity Santa Clara 2014

Jonathan Klein

June 25, 2014
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. About Me • Performance Engineer At Etsy • I write

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

    the Etsy Site Performance Reports • Started Boston Web Perf Meetup Group
  3. Things You Learned • Origin Hints • Client Hints •

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    navigation <link rel="prefetch" href="/foo.css">
  28. ! ! ! ! ! <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">
  29. 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%
  30. Things You Learned • Origin Hints • Client Hints •

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

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

    Speak/blog about challenges • Ask your CDN for support • Report bugs
  33. Other Talks at Velocity What Makes Mobile Websites Tick? 3:30

    today Is TLS Fast Yet? 3:30 tomorrow Chasing Waterfalls 5:00 tomorrow