http 2.0 - web unleashed 2015

Web Performance in the World of HTTP 2.0

Dave MethvinIndependent Consultant

President, jQuery Foundation

This talk: https://goo.gl/5XPz0H

As a front-end developer, do you ever get this feeling about Internet performance?

History of the HTTP Protocol1991: HTTP 0.9

1996: HTTP 1.0

1997: HTTP 1.1

… an eternity passes ...

Website Development State of the Art in 1997

They're Upgrading Our Protocol

HTTP 2.0 is comingChange your client,

server, and build process to make things work even better

A Wild SPDY Appears

January 2011: Google includes SPDY in Chrome and supports the protocol in all their services. Other browsers and servers follow suit over the next year.

http://caniuse.com/#search=spdy

The Move to HTTP 2.0

2010: SPDY appears2012: Group starts standardization2015: HTTP 2.0 complete2016: Chrome to remove SPDY

http://caniuse.com/#search=http2

Servers, Switches, Proxies

istlsfastyet.com/#server-performance

CDN and PAAS Providers

istlsfastyet.com/#cdn-paas

Services Already using HTTP/2Wordpress.comBlogger.com(medium.com & tumblr.com use SPDY)

Why HTTP/2 is NeededConnections today are dumb

Manual tweaks: minification, sharding, combining, spriting, HTML resource order, XHR, up to six simultaneous connections per server … blah blah

Latency (RTT) is a killer

HTTP 2.0 is a Binary ProtocolCan't use telnet for an HTTP/2 session

When was the last time you did that?Plenty of tools can decode HTTP/2 sessions

already, including most browser tools

HTTP/1: Head-of-Line BlockingThe current resource must finish downloading before making another request; each has a delay of one round-trip-time (RTT)

big-image.jpg500kb

icon.png1kb

home.css1kb

info.js1kb

Multiple connections to the server are only a partial solution to this problem, and can cause their own problems (e.g., congestion)

RTT delay

RTT delay

RTT delay

HTTP/2: Connections Use StreamsStreams are prioritized, cancellable, and preemptable!

Stream 1:big-image.jpg(first 200kb)

S4:icon.png1kb

S2:home.css1kb

S3:info.js1kb

Stream 1 (cont'd):big-image.jpg(final 300kb)

Important resources arrive faster, on a "warm" connection

Send me: big-image.jpg … icon.png, home.css, info.js

HTTP/1: Bloated HeadersIn HTTP/1, headers are not compressedCookies (often several hundred bytes!)User-Agent (this one is 124 bytes)

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

HTTP/2: HPACK Compression

https://commons.wikimedia.org/wiki/File:HTTP_2_Header_Compression_HPACK.svg

Web Developer CommandmentsMinimize DNS lookupsReuse HTTP connectionsUse a Content Delivery Network (CDN)Eliminate unnecessary request bytesCompress assets during transferCache resources on the client

A Sadly Typical Web Site

webpagetest.org

It's Actually A Lot Worse Than That

webpagetest.org

Like,Really,Really, Really Bad!

240 requests3.8 megabytes

webpagetest.org

Rethink: Domain Shardinge.g. s.huffpost.com, i.huffpost.com ...Each connection requires setup/warmupConnections compete for resources

DNS lookups, TCP congestion, retriesEven on HTTP/1, performance can often be

harmed by more than 2 shards

Sharding Didn't Really Help

webpagetest.org

We Didn't Keep the Wire Busy!

webpagetest.org

Connection CoalescingHTTP/2 can use the same connection for two different hosts (e.g., s.huffpost.com and i.huffpost.com) if they resolve to the same IP address. (There will be different HOST headers on different streams.)

Amazing Connection CoalescingIf you have a TLS certificate that is valid for multiple DNS names (e.g., *.domain.com) and the names resolve to the same IP address, HTTP/2 can use the same connection for both hosts!

Rethink: Cookieless DomainsE.g., set cookie for www.huffpost.com and

avoid cookie using i.huffpost.comHPACK makes it (mostly) unnecessaryWith HTTP/2 you can share cookies across

*.huffpost.com without overhead worries

Scripts/CSS Combined via PHP

<script type="text/javascript" src="http://s.huffpost.com/assets/js.php?v=1441810385&f=huff.js%2Chp_config.js%2Cjsonmin.js%2Ccookiesmin.js%2Chp_track.js%2Chp_util.js%2Chp_browser.js%2Cget_font.js%2Cpreload_topnav_font.js%2C_tmp%2Fcommon.js%2C_tmp%2Fclick_tracker.js%2C_tmp%2Fcommon_paginator.js%2C_tmp%2Fhp_ads.js%2C_tmp%2Fquick_login.js%2Cfacebook.js%2Csnproject.js%2Chuff_promo.js%2Chptwitter_anywhere.js%2Ctwitter%2Ffrontpage.js%2Csearch_focus.js%2Csearch_autocomplete.js%2Cmod-follow.js%2Cconversations%2Fbootstrap.js%2C_front%2Ftopnav_new.js%2Cap_scroll_fastnews.js">

Rethink: Combining filesCombining files reduces requestsBUT

You usually don't need the whole file right nowLarge files take longer to downloadLarge files are slow for the browser to parse/runChanges invalidate the cached combined file

Let HTTP/2 Fetch Smaller FilesHTTP/2 reuses & prioritizes the connectionUse a core, then more strategy

First files handle the initial view ("above the fold")Other stuff can come in as needed (e.g. views)

Avoid inlining JS/CSSSeparate files can be cached independently

Server PushBrowser: "Send me /products.html"Server: "OK, also sending abovethefold.css"(Browser can cancel if it's already cached)

This can be done by predictive algorithms on the server!

Whoa.

How a Browser PrioritizesStreams in a connection have

weight (priority)dependency (reference to another stream)

e.g., logo.jpg is useless without index.htmlServer should deliver bytes based on the

requested weights and dependencies

http://bitsup.blogspot.com/2015/01/http2-dependency-priorities-in-firefox.html

How to Detect HTTP 2.0 Use?

Chrome

Firefox

Edge

Plugin

HTTP/1 and HTTP/2 Can Coexist

To-Do List for HTTP/2Ensure that your servers or CDNs support

HTTP/2 -- bug your providers too!Make HTTP/2 effective w/o breaking HTTP/1

Reduce or eliminate shardingAvoid creating monolithic JS/CSS filesTest to be sure you're getting HTTP/2 goodness(Expect future studies on HTTP/2 quality)

?On Twitter: @davemethvin

This talk: https://goo.gl/5XPz0H

RESOURCESIlya Grigorik at Velocityhttps://www.youtube.com/watch?v=yURLTwZ3ehk

http://www.slideshare.net/AndyDavies/http2-is-herehttp://www.slideshare.net/AndyDavies/the-case-for-http2http://www.http2demo.io/http://daniel.haxx.se/blog/2015/09/07/http2-115-days-with-the-rfc/