HTTP2 is Here!
Jul. 8, 2015•0 likes•5,053 views
13 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Slides from my Jul 2015 talk on HTTP/2 at the London Web Performance Meetup
Andy DaviesFollow
Independent Web Performance Consultant at Asteno
HTTP2 is Here!
- https://www.flickr.com/photos/tim_ellis/6882599706 HTTP/2 is here! @AndyDavies #LDNWebPerf, July 2015
- HTTP 1.x - Higher latency = slower load times PageLoadTime(s) 1 2 3 4 Round Trip Time (ms) 0 20 40 60 80 100 120 140 160 180 200 220 240 Mike Belshe - “More Bandwidth Doesn’t Matter (much)”
- http://www.flickr.com/photos/7671591@N08/1469828976 TCP was designed for long flows… typical web page has many short ones
- Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC-UID=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab59588 %2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X%2010%5f9%5f1%29%20AppleWebKit %2f537%2e36%20%28KHTML%2c%20like%20Gecko%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537 ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobil ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A%22139283418260 _chartbeat2=ol0j0uq4hkq6pumu.1389101635322.1392285654268.0111111111111111; _chartbeat_uu ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, lik Chrome/32.0.1700.107 Safari/537.36 Headers sent with every request Contain lots of repeated data! and! can’t be compressed
- We’ve been hacking around limitations of HTTP/1.1 https://www.flickr.com/photos/rocketnumber9/13695281
- Browsers support more parallel connections Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
- We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
- We follow recipes e.g. Reduce Requests http://www.flickr.com/photos/mrsmagic/2247364228
- We inline critical resources <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' typ <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Y <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 7 img { max-width: 100%; } .li-page-header { color: rgb(255, 255, 255); padding: 16px 0px; background-color: #8a1e1b; .container { position: relative; width: 90vw; max-width: 760px; margin: 0px auto; padding: .clearfix:before, .clearfix:after, .row:before, .row:after { content: '0020'; display: bl .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; .container .columns, .container .column { margin: 0px; } .container .sixteen.columns { width: 100%; } .container .one.column, .container .one.columns, .container .two.columns, .container .thre
- Sometimes with DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) = Larger downloads (needs gzip)! Overrides browser priorities
- Create CSS and JavaScript bundles ++++ = =
- Create CSS and JavaScript bundles ++++ = =More to download and parse
- Create CSS and JavaScript bundles ++++ = =More to download and parse x+! ! Whole bundle is invalidated if a single file changes
- and mush images together as sprites
- and mush images together as sprites To get just one sprite …
- and mush images together as sprites Browser must download and decode the whole image To get just one sprite …
- There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
- Build tools and optimisation services help plug gaps and won’t be going away…
- But couldn’t we use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
- HTTP/2 (Evolved from Google’s SPDY)
- Impressive Eh!
- Impressive Eh! But is it a real world test?
- Single multiplexed connection to host HTTP/1.1 HTTP/2
- Frames are multiplexed (not just whole resources) Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
- HTTP/1.1 - browser sets priorities
- HTTP/2 - browser hints priorities server can override
- Prioritisation uses Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10
- Adds header compression too
- Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable YMMV
- What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable
- and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- Browser support is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported in beta
- Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
- But choose your server carefully… Does it respect stream and connection flow?! Does it support dependencies and weights?! Does it support server-push?! ! How does it help optimisation?
- Can check server conformance with h2spec https://github.com/summerwind/h2spec
- Server Support https://github.com/bradfitz/http2/tree/master/h2i Are you missing telnet for debugging?
- No content until DNS, TCP and TLS negotiation complete Efficient TLS is Important
- Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
- New optimisations https://www.flickr.com/photos/inucara/14981917985
- Browser Server Server! builds! page GET index.html <html><head>… Network! Idle Request other page resources Server push
- Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Server push
- Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Server push
- Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Browser can reject push! but ! may have already received data Server push
- Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript Fonts and background images discovered when render tree builds Could we push them?
- Multiplexing offers interesting possibilities too
- How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
- How much of an image do we need to make it usable - 15%?
- How much of an image do we need to make it usable - 25%?
- There are some questions over the user experience with progressive images How much of an image do we need to make it usable - 80%?
- Time to kill off some optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
- https://www.flickr.com/photos/mariachily/3335708242 Still plenty of challenges…
- We need to explore! http://www.flickr.com/photos/atoach/6014917153
- http://www.flickr.com/photos/auntiep/5024494612 ! @andydavies! ! andy.davies@nccgroup.com ! ! http://slideshare.net/andydavies!