http 2.0 - web unleashed 2015
TRANSCRIPT
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)
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/