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

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

https://www.flickr.com/photos/147764143@N07/

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


I have a plan!

HTTP/2


Time to go faster!

HTTP/2


Wh-what’s that?

HTTP/2


Up in the sky!

HTTP/2


Now what???

HTTP/2

Photo credit: Thomas Hawk, “Quit it with the Bullhorn”, Flickr Creative Commons

Multiplex yourrequests!

HTTP/2 is here!


Compress yourheaders with

HPACK!

HTTP/2 is here!


Minimize yourroundtrips

with serverPUSH!

HTTP/2 is here!


Prioritize assets with weights & dependencies!

HTTP/2 is here!


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


One connection, multiple streams

Messages split into frames

HPACK header compression


Less overhead per request

Server push


Send assets without requests

Fast delivery without inlining

Prioritized delivery


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



image sprites icon fonts

SVGs



No need to bundle font files using data URIs

Photo credit: NASA, “Jupiterrise”, Flickr Creative Commons

Improvecriticalpath

Serverpush?


Improvecriticalpath

link rel=“preload”


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


Browser support

Chrome

Safari (10.11+) IE (Windows 10+)

Firefox

Opera

Edge


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?


Case studies

99 Designs

Image-heavy pages slowed down

Font-loading strategy could be cause


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?


How best to bundle?

Focus onstable vs unstable assets?


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


Vary with cookies?


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


Push assets to service worker

Worker delivers assets on future requests


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?


Partial bundles

Per componentmay offer a

good balance


Partial bundlesCritical global

components (header)vs

non-critical global components (footer)


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


Cachedigests willhelp withserver push


Serviceworkers forstatic sites?


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*

marcdrummond.com

@MarcDrummond

Lullabot

http://marcdrummond.com

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

Technology