Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

So long and thanks for all the requests! Front-end performance optimization in the age of http/2

236 views

Published on

There you are, minding your business, aggregating your CSS and JS while waiting for your morning toast. Then the Vogons arrive, and they’re wiping out your front-end performance best practices to put in a new intergalactic superhighway, http/2. What’s a front-end developer to do when everything starts spinning, and we still need to stay on top of life, the universe and everything? The answer is more complicated than “limit yourself to 42 requests.” Should we still concatenate our front-end assets into great big lumps on all our pages? Or are we now free to scatter small modular files willy nilly? Don’t panic! New front-end performance techniques need not be entirely unlike what we’ve learned so far about optimizing our source order, CSS, JS, fonts and images to leap across the galaxy as quick as can be. We’ll look at what the advent of http/2 means for us, when to begin changing our strategies for speed, and how to stay calm despite the whirling vortices surrounding us all.

In this talk, we’ll look at how http/2 affects front-end performance. To do that, we’ll recap some basics of how browsers process web requests, and how that’s changing in http/2. We’ll look at where the web is in terms of adoption of http/2, and when the right time is for us to tweak our optimization strategies. Best practices and real-world results take time to develop when a sea change like this happens. So it can be challenging to know how to adapt when there are no definitive answers. We’ll work through some of the options for aggregation strategies, font loading and image optimization that are available with emerging changes. The goal is not to definitively say “Here’s the new way to do things,” but to evaluate various tactics, and encourage attendees to further ponder and investigate and share what they learn as they experiment with new front-end performance optimizations.

Takeaways:
- Reconsider aggregation strategies for CSS and JS
- Look at other performance strategies like font loading and responsive images
- Look at various stats and studies on http/2, and what that might mean for your site

Published in: Technology
  • Be the first to comment

  • Be the first to like this

So long and thanks for all the requests! Front-end performance optimization in the age of http/2

  1. 1. MARC DRUMMOND Photo credit: kristian fagerström, “Earth’s End”, Flickr Creative Commons So long, and thanks
 for all the requests Front-end performance 
 in the age of HTTP/2
  2. 2. MARC DRUMMOND Front-end Developer Lullabot Link to 
 slides
 at end
  3. 3. Photo credit: Lis Ferla, “Big Yawns!”, Flickr Creative Commons Today, I make my site fast.
  4. 4. Photo credit: dtydontstop, “Toast”, Flickr Creative Commons But first, TOAST.
  5. 5. Photo credit: Bob Cotter, “Stainless Steel”, Flickr Creative Commons Aggregation
 & Bundling CSS & JS
  6. 6. Photo credit: Alpha, “Insides—Dark Rye Bread”, Flickr Creative Commons Image sprites
 & icon fonts
  7. 7. Photo credit: Twentyfour Students, “Toaster-Vin”, Flickr Creative Commons Minimize number 
 of font files
  8. 8. Photo credit: Rebecca Siegel, “A bit more”, Flickr Creative Commons Inline CSS, JS, images, fonts 
 Data URIs
  9. 9. Photo credit: Isriya Paireepairit, “Toast”, Flickr Creative Commons Minimize requests
  10. 10. Photo credit: garlandcannon, “Yellow Butter on Toast”, Flickr Creative Commons Shard domains Split off cookies
  11. 11. Photo credit: Jessica Spengler, “Buttery Toast”, Flickr Creative Commons Reduce
 file sizes
  12. 12. Photo credit: Christina Ellis, “Ellis Mom’s Strawberry Jam”, Flickr Creative Commons Minify Compress Files
  13. 13. Photo credit: sebastian.gone.archi, “Jam of Old”, Flickr Creative Commons Optimize images
  14. 14. Photo credit: Steven Lilley, “Breakfast”, Flickr Creative Commons Subset fonts
  15. 15. Photo credit: Steven Lilley, “Breakfast”, Flickr Creative Commons Deliver only necessary 
 CSS & JS for page Bundling helps to
 minimize requests vs
  16. 16. Photo credit: Christopher Bowns, “Blue Bottle Mug, Empty”, Flickr Creative Commons Critical
 rendering path
  17. 17. Photo credit: Olle Svensson, “Real Coffee”, Flickr Creative Commons Critical CSS & JS
  18. 18. Photo credit: rachel_pics, “Grounds”, Flickr Creative Commons Load non-critical CSS async
  19. 19. Photo credit: Porsche Brosseau, “Mr Coffee”, Flickr Creative Commons Non-critical JS in footer: async/defer
  20. 20. Photo credit: Petra Brensted, “E129”, Flickr Creative Commons Async fonts: Swap on load
  21. 21. Photo credit: Mark, “Finished?”, Flickr Creative Commons Lazy-load
 images
  22. 22. Photo credit: Ellie LeNardo, “Fremont // latte”, Flickr Creative Commons Takeaways
  23. 23. Photo credit: Aimee & Paul Bogush, “Coffee on the Deck”, Flickr Creative Commons Bandwidth
 
 Critical path
  24. 24. Photo credit: Aimee & Paul Bogush, “Coffee on the Deck”, Flickr Creative Commons Limited 
 simultaneous 
 requests
  25. 25. Photo credit: uoeducation, “2013 COE Orientation”, Flickr Creative Commons Requests are conversations
  26. 26. Photo credit: Wagner T. Massimiro, “Waterfall”, Flickr Creative Commons Request waterfall
  27. 27. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons Now I understand! HTTP/2
  28. 28. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons I have a plan! HTTP/2
  29. 29. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons Time to go faster! HTTP/2
  30. 30. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons Wh-what’s that? HTTP/2
  31. 31. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons Up in the sky! HTTP/2
  32. 32. Photo credit: Wendell, “Puff the Magic Dragon”, Flickr Creative Commons Now what??? HTTP/2
  33. 33. Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons Multiplex your
 requests! HTTP/2 is here!
  34. 34. Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons Compress your
 headers with
 HPACK! HTTP/2 is here!
  35. 35. Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons Minimize your
 roundtrips
 with server
 PUSH! HTTP/2 is here!
  36. 36. Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons Prioritize assets
 with weights & dependencies! HTTP/2 is here!
  37. 37. Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons We’ve had these
 specs on file
 with the IETF
 for years! HTTP/2 is here!
  38. 38. Photo credit: Daniel White, “P1010489”, Flickr Creative Commons DON’T
 PANIC
  39. 39. Photo credit: miguelb, “Randi and Tovah”, Flickr Creative Commons If only we had
 a hitchhiker’s
 guide to HTPP/2…
  40. 40. Time to unlearn what
 we thought we knew
 about front-end
 performance. Photo credit: EpcotLegacy, “Stars of Winter”, Flickr Creative Commons
  41. 41. Multiplexing Photo credit: EpcotLegacy, “Stars of Winter”, Flickr Creative Commons One connection, multiple streams Messages split into frames
  42. 42. HPACK header compression Photo credit: EpcotLegacy, “Stars of Winter”, Flickr Creative Commons Less overhead per request
  43. 43. Server push Photo credit: EpcotLegacy, “Stars of Winter”, Flickr Creative Commons Send assets without requests Fast delivery without inlining
  44. 44. Prioritized delivery Photo credit: EpcotLegacy, “Stars of Winter”, Flickr Creative Commons Sort out dependencies Weights vary by file type
  45. 45. Photo credit: Rufus Gefangenen, “pseud_creacion3”, Flickr Creative Commons Goodbye,
 old best 
 practices!
  46. 46. Photo credit: NASA, “Epsilon Eridani”, Flickr Creative Commons What’s the limiting factor? Requests are less 
 expensive.
  47. 47. Photo credit: NASA, “Epsilon Eridani”, Flickr Creative Commons What are now anti-patterns? Bundling? Inlining?
  48. 48. Photo credit: NASA, “Trio of Solar Flares”, Flickr Creative Commons Time to explore our options
  49. 49. Photo credit: NASA, “Mars Volcano”, Flickr Creative Commons Turn on HTTP/2! https is required
  50. 50. Photo credit: NASA, “Crescent Jupiter with Great Red Spot”, Flickr Creative Commons The Great
 Unbundling Relevant
 CSS & JS
 for page
  51. 51. Photo credit: NASA, “Crescent Jupiter with Great Red Spot”, Flickr Creative Commons The Great
 Unbundling image sprites icon fonts SVGs
  52. 52. Photo credit: NASA, “Crescent Jupiter with Great Red Spot”, Flickr Creative Commons The Great
 Unbundling No need to bundle font files using data URIs
  53. 53. Photo credit: NASA, “Jupiterrise”, Flickr Creative Commons Improve
 critical
 path Server
 push?
  54. 54. Photo credit: NASA, “Jupiterrise”, Flickr Creative Commons Improve
 critical
 path link rel=
 “preload”
  55. 55. Photo credit: NASA, “Jupiterrise”, Flickr Creative Commons Improve
 critical
 path Inlining vs
 caching
  56. 56. Photo credit: NASA, “Sliver of Saturn”, Flickr Creative Commons Bandwidth 
 still matters Image optimization
 & compression
  57. 57. Photo credit: NASA, “Basking in light”, Flickr Creative Commons CDNs
 still matter
  58. 58. Photo credit: NASA, “Icy surface of Enceladus”, Flickr Creative Commons 
 Server caching
 still matters Varnish needs
 HTTP/2 proxy
  59. 59. Photo credit: NASA, “Pluto paints its largest moon red”, Flickr Creative Commons Fallbacks to
 http/1.1? Complexity vs
 audience
  60. 60. Photo credit: NASA, “Perseid Meteor Shower”, Flickr Creative Commons What does
 research show?
  61. 61. Photo credit: NASA, “Hubble Feathers the Peacock”, Flickr Creative Commons Server support Apache h20 node nginx IIS
  62. 62. Photo credit: NASA, “Hubble Feathers the Peacock”, Flickr Creative Commons Browser support Chrome Safari (10.11+) IE (Windows 10+) Firefox Opera Edge
  63. 63. Photo credit: NASA, “Hubble Feathers the Peacock”, Flickr Creative Commons CDN support Cloudflare AWS CloudFront Fastly Akamai
  64. 64. Photo credit: JD Hancock, “-[ inc8mplete ]-”, Flickr Creative Commons Case studies Khan Academy Went from 25 to 300 JS files Site slower: too much unbundling?
  65. 65. Photo credit: JD Hancock, “-[ inc8mplete ]-”, Flickr Creative Commons Case studies 99 Designs Image-heavy pages slowed down Font-loading strategy could be cause
  66. 66. Photo credit: JD Hancock, “-[ inc8mplete ]-”, Flickr Creative Commons Case studies CDN Demos Mostly show http/2 is faster Is this the right thing to be testing?
  67. 67. Photo credit: NASA, “Giant Gas Cloud”, Flickr Creative Commons Unbundling has limits Common misconception: HTTP2 makes concurrent network requests free. More true:You can make about 10x more requests. But not 100x. —@cramforce
  68. 68. Photo credit: NASA, “Horsehead Nebula”, Flickr Creative Commons Unbundling may 
 reduce compression May not be noticeable
  69. 69. Photo credit: NASA, “Heart of Lagoon Nebula”, Flickr Creative Commons How best to bundle? Focus on
 cache invalidation?
  70. 70. Photo credit: NASA, “Heart of Lagoon Nebula”, Flickr Creative Commons How best to bundle? Focus on
 stable vs unstable assets?
  71. 71. Photo credit: NASA, “Heart of Lagoon Nebula”, Flickr Creative Commons How best to bundle? Focus on
 pages or components?
  72. 72. Photo credit: NASA, “Carina Nebula”, Flickr Creative Commons Delivering assets
 with markup CMS head vs footer? <style /> in body?
 Web components?
  73. 73. Photo credit: NASA, “Black Hole Caught in Stellar Homicide”, Flickr Creative Commons Server push
 has challenges
  74. 74. Photo credit: NASA, “Stellar Birth Announcement”, Flickr Creative Commons Assets in 
 stream Can’t be removed
  75. 75. Photo credit: NASA, “Stellar Birth Announcement”, Flickr Creative Commons Pushing
 all assets Blocks rendering
  76. 76. Photo credit: NASA, “Supermassive Black Hole”, Flickr Creative Commons Assets pushed on every request
  77. 77. Photo credit: NASA, “Supermassive Black Hole”, Flickr Creative Commons Vary with cookies?
  78. 78. Photo credit: NASA, “Supermassive Black Hole”, Flickr Creative Commons Best for single page apps?
  79. 79. Photo credit: NASA, “2011 Solar Eclipse”, Flickr Creative Commons On the horizon
 
 cache digests
  80. 80. Photo credit: Hubble, “Dusty Spiral in Virgo”, Flickr Creative Commons Service workers? JS: more control over 
 browser cache
  81. 81. Photo credit: Hubble, “Dusty Spiral in Virgo”, Flickr Creative Commons Push assets to service worker Worker delivers assets on future requests
  82. 82. Photo credit: Hubble, “Dusty Spiral in Virgo”, Flickr Creative Commons Service worker caching HTML? May work for static sites
  83. 83. Photo credit: NASA, “Behemoth Bleeding Atmosphere Around a Warm Exoplanet”, Flickr Creative Commons Paths forward
  84. 84. Photo credit: NASA, “Lowest-Mass Exoplanet Around Sunlike Star”, Flickr Creative Commons Partial bundles What types 
 of delivery can
 you support?
  85. 85. Photo credit: NASA, “Lowest-Mass Exoplanet Around Sunlike Star”, Flickr Creative Commons Partial bundles Per component
 may offer a
 good balance
  86. 86. Photo credit: NASA, “Lowest-Mass Exoplanet Around Sunlike Star”, Flickr Creative Commons Partial bundles Critical global
 components (header)
 vs 
 non-critical global components (footer)
  87. 87. Photo credit: NASA, “Lowest-Mass Exoplanet Around Sunlike Star”, Flickr Creative Commons Partial bundles Separate bundle
 for stable
 vendor assets?
  88. 88. Photo credit: NASA, “Exoplanet is Extremely Hot and Incredibly Close”, Flickr Creative Commons Ditch icon fonts
 and image spirtes
 Use SVGs instead
  89. 89. Photo credit: Stuart Rankin, “Artisitc view of a TRAPPIST-1 planet”, Flickr Creative Commons Use responsive
 images for
 content
  90. 90. Photo credit: NASA, “Looking to ancient Earth to study hazy exoplanets”, Flickr Creative Commons Server
 push may
 not be ready
  91. 91. Photo credit: NASA, “Looking to ancient Earth to study hazy exoplanets”, Flickr Creative Commons Cache
 digests will
 help with
 server push
  92. 92. Photo credit: NASA, “Looking to ancient Earth to study hazy exoplanets”, Flickr Creative Commons Service
 workers for
 static sites?
  93. 93. Photo credit: NASA, “Looking to ancient Earth to study hazy exoplanets”, Flickr Creative Commons link preload
 not fully
 supported… yet
  94. 94. Photo credit: NASA, “Kepler-452b”, Flickr Creative Commons Load fonts with
 FontFaceObserver
  95. 95. Photo credit: NASA, “Kepler-452b”, Flickr Creative Commons Keep an eye
 on font-display
  96. 96. Photo credit: NASA, “Electric Wind”, Flickr Creative Commons On the verge
 of a bright future
  97. 97. Photo credit: NASA, “Arc over Earth”, Flickr Creative Commons Simpler solutions “Simplified syntax is better for code health,
 cognitive load, and general software maintenance.” —Zach Leatherman
  98. 98. Photo credit: NASA, “Earth and Super-Earth”, Flickr Creative Commons Experiment!
  99. 99. Photo credit: NASA, “Managing the Unexpected”, Flickr Creative Commons 42
  100. 100. Photo credit: NASA, “Managing the Unexpected”, Flickr Creative Commons *
  101. 101. marcdrummond.com @MarcDrummond Lullabot

×