luke.dewitt

$ cd ~/talks/performance-beyond-your-portfolio

2016-10-04Web Unleashed 2016Toronto, ON

Performance: Beyond Your Portfolio⁠

Google's RAIL model for what fast feels like, quick wins you can ship today, and how HTTP/2 changes the way the web is delivered.

$ open slides

  1. Performance: Beyond Your Portfolio FITC WEB UNLEASHED - OCTOBER 4TH, 2016
  2. Welcome.
  3. * jokes may not be as funny
  4. Welcome.
  5. *
  6. Luke DeWitt WEB TEAM LEAD / DAD / ALL AROUND GOOD GUY … who are you?
  10. RAIL
  11. RESPONSE
  12. ANIMATION
  13. IDLE
  14. LOAD
  15. Response Animation Idle Load
  16. It’s all about the user…
  17. Response Times 0.1 second “Instantaneous Reaction” 1 second “Uninterrupted Flow of Thought” 10 seconds “User’s Attention”
  18. Show of hands…
  19. SQUIRREL!!!
  20. Response Animation Idle Load
  21. Response 100ms = Lag Immediate, with substance User Perceived Performance
  22. Animation
  25. 60 FPS
  27. 60 FPS 16ms to react
  28. Idle Simple tasks Aim for < 50ms
  29. Load
  30. SQUIRREL!!!
  31. Load Load in < 1s Focus on critical path rendering User perceived performance
  32. Critical Path Rendering 0.0s 0.3s 0.8s 1.2s 1.5s
  33. Critical Path CSS
  35. Eliminate Render Blocking JavaScript
  36. Render Blocking LOADED IN <head> LOADED BEFORE </body>
  37. Image Optimizations
  38. Image Compression TinyPNG https://tinypng.com
  39. 1.7MB 305.9kb Image Compression -82%
  40. Responsive Images
  41. Lazy Loading Images
  42. File Compression Gzip
  43. File Delivery
  44. HTTP/2
  45. HTTP/2 == SPDY?
  47. • Concatenate files • Inline Assets • Combine Images • Domain Sharding
  48. Components of an HTTP Request – Chapter 10. Primer on Web Performance
  49. What’s cool in HTTP/2
  50. Binary Protocol
  51. Multiplexing
  52. HTTP/2 for a Faster Web
  53. HTTP/2 for a Faster Web
  54. CloudFlare - What is HTTP/2?
  56. DEMO
  57. Header Compression
  58. *HTTP/2 requires TLS
  59. Getting Ready
  61. Getting Ready
  62. Browser Support
  63. Node.js PHP Go Scala Microsoft ISS CloudFlare CloudFront Akamai nginx Apache
  64. HTTP/2 is here!
  65. Questions? redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspace LUKE DEWITT @whatadewitt
  67. Questions? redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspace LUKE DEWITT @whatadewitt
  68. THANK YOU! Oh, by the way, we’re hiring! http://redspace.recruiterbox.com
1 / 68
download pdf ↓

$ cat notes.md

Jokes may not be as funny.

It’s all about the user

Google’s RAIL model breaks performance into what people actually feel:

  • Response: react within 100ms, or it feels like lag. Respond immediately, and with substance.
  • Animation: 60 frames per second, which gives you about 16ms per frame.
  • Idle: keep background work in small chunks, under 50ms.
  • Load: get something useful on screen in under a second.

It lines up with the classic response-time limits: 0.1 seconds feels instantaneous, 1 second keeps the flow of thought, and 10 seconds is about as long as you’ll hold someone’s attention.

Quick wins

  • Critical path CSS: inline what the first screen needs so it can render before the rest arrives.
  • Render-blocking JavaScript: move scripts from the <head> to just before </body>.
  • Image compression: one image went from 1.7MB to 305.9KB (-82%) through TinyPNG.
  • Responsive images: srcset so phones don’t download desktop images.
  • Lazy loading: only load images when they’re about to be seen.
  • File compression: gzip everything you can.

HTTP/2

HTTP/2 grew out of Google’s SPDY. A lot of what we did to speed up HTTP/1.1 was a workaround for its limits: concatenating files, inlining assets, combining images into sprites, and sharding across domains. HTTP/2 makes most of those unnecessary:

  • Binary protocol: more compact and less error-prone to parse than text.
  • Multiplexing: many requests and responses share one connection at the same time, instead of queueing up behind each other.
  • Header compression: repeated headers aren’t sent over and over.

The catch: browsers only speak HTTP/2 over TLS, so you need HTTPS. Support was already broad across browsers, servers (Node.js, PHP, Go, nginx, Apache, IIS) and CDNs (CloudFlare, CloudFront, Akamai). HTTP/2 is here.

Further reading from the slides: Ilya Grigorik’s “Primer on Web Performance” chapter in High Performance Browser Networking, “HTTP/2 for a Faster Web”, and CloudFlare’s “What is HTTP/2?”.

visitor@whatadewitt: ~