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

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*

marcdrummond.com

@MarcDrummond

Lullabot