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