Download - HTTP 2.0 - Web Unleashed 2015
![Page 1: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/1.jpg)
Web Performance in the World of HTTP 2.0
Dave MethvinIndependent Consultant
President, jQuery Foundation
This talk: https://goo.gl/5XPz0H
![Page 2: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/2.jpg)
As a front-end developer, do you ever get this feeling about Internet performance?
![Page 3: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/3.jpg)
History of the HTTP Protocol1991: HTTP 0.9
1996: HTTP 1.0
1997: HTTP 1.1
… an eternity passes ...
![Page 4: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/4.jpg)
Website Development State of the Art in 1997
![Page 5: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/5.jpg)
They're Upgrading Our Protocol
HTTP 2.0 is comingChange your client,
server, and build process to make things work even better
![Page 6: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/6.jpg)
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.
![Page 7: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/7.jpg)
http://caniuse.com/#search=spdy
![Page 8: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/8.jpg)
The Move to HTTP 2.0
2010: SPDY appears2012: Group starts standardization2015: HTTP 2.0 complete2016: Chrome to remove SPDY
![Page 9: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/9.jpg)
http://caniuse.com/#search=http2
![Page 10: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/10.jpg)
Servers, Switches, Proxies
istlsfastyet.com/#server-performance
![Page 11: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/11.jpg)
CDN and PAAS Providers
istlsfastyet.com/#cdn-paas
![Page 12: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/12.jpg)
Services Already using HTTP/2Wordpress.comBlogger.com(medium.com & tumblr.com use SPDY)
![Page 13: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/13.jpg)
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
![Page 14: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/14.jpg)
![Page 15: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/15.jpg)
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
![Page 16: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/16.jpg)
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
![Page 17: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/17.jpg)
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
![Page 18: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/18.jpg)
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
![Page 19: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/19.jpg)
HTTP/2: HPACK Compression
https://commons.wikimedia.org/wiki/File:HTTP_2_Header_Compression_HPACK.svg
![Page 20: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/20.jpg)
Web Developer CommandmentsMinimize DNS lookupsReuse HTTP connectionsUse a Content Delivery Network (CDN)Eliminate unnecessary request bytesCompress assets during transferCache resources on the client
![Page 21: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/21.jpg)
A Sadly Typical Web Site
webpagetest.org
![Page 22: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/22.jpg)
It's Actually A Lot Worse Than That
webpagetest.org
![Page 23: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/23.jpg)
Like,Really,Really, Really Bad!
240 requests3.8 megabytes
webpagetest.org
![Page 24: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/24.jpg)
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
![Page 25: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/25.jpg)
Sharding Didn't Really Help
webpagetest.org
![Page 26: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/26.jpg)
We Didn't Keep the Wire Busy!
webpagetest.org
![Page 27: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/27.jpg)
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.)
![Page 28: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/28.jpg)
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!
![Page 29: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/29.jpg)
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
![Page 30: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/30.jpg)
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">
![Page 31: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/31.jpg)
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
![Page 32: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/32.jpg)
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
![Page 33: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/33.jpg)
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!
![Page 34: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/34.jpg)
Whoa.
![Page 35: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/35.jpg)
![Page 36: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/36.jpg)
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
![Page 37: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/37.jpg)
http://bitsup.blogspot.com/2015/01/http2-dependency-priorities-in-firefox.html
![Page 38: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/38.jpg)
How to Detect HTTP 2.0 Use?
![Page 39: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/39.jpg)
Chrome
![Page 40: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/40.jpg)
Firefox
![Page 41: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/41.jpg)
Edge
![Page 42: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/42.jpg)
Plugin
![Page 43: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/43.jpg)
HTTP/1 and HTTP/2 Can Coexist
![Page 44: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/44.jpg)
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)
![Page 46: HTTP 2.0 - Web Unleashed 2015](https://reader035.vdocuments.us/reader035/viewer/2022070512/589bd5861a28ab92618b6873/html5/thumbnails/46.jpg)
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/