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