Advertisement
Check these out next
The Case for HTTP/2 - EpicFEL Sept 2015
Sep. 27, 2015•0 likes•1,952 views
3 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
HTTP/2 is here but why do we need it, and how is it different to HTTP/1.1? Video - https://www.youtube.com/watch?v=ob-CnA9YmiI These are the slides from my talk at Front-End London's one day conference, EpicFEL
Andy DaviesFollow
Independent Web Performance Consultant at AstenoAdvertisement
Advertisement
Advertisement
Recommended
Speed Matters!Andy Davies
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
The Case for HTTP/2 - Internetdagarna 2015 - StockholmAndy Davies
The Case for HTTP/2Andy Davies
Mobile Web Performance - Getting and Staying FastAndy Davies
What does the browser pre-loader do?Andy Davies
The Case for HTTP/2 - EpicFEL Sept 2015
- http://www.flickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies EpicFEL, September 2015
- 1999 RFC 2616 - HTTP/1.1
- The Web of 1999…
- …is not the Web of 2015
- …is not the Web of 2015
- http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently
- and we’ve been hacking around some of the limitations https://www.flickr.com/photos/rocketnumber9/13695281
- Each TCP connection only supports one request at a time* https://www.flickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice
- So browsers allowed us to make more requests in parallel Very Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
- To make even more parallel requests we split resources across hosts www.bbc.co.uk static.bbci.co.uk news.bbcimg.co.uk node1.bbcimg.co.uk
- Increasing the risk of network congestion and packet loss https://www.flickr.com/photos/dcmaster/4585119705
- Every request has an overhead https://www.flickr.com/photos/tholub/9488778040
- 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)”
- 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=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozilla %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%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end %22%3A%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu. 1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; 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, like Gecko) Chrome/32.0.1700.107 Safari/537.36 Headers sent with every request Contain lots of repeated data and aren’t compressed
- And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response
- So we follow recipes e.g. Reduce Requests https://www.flickr.com/photos/nonny/116902484
- 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 Browser must download and decode the whole image To get just one sprite …
- We override the browser’s priorities https://www.flickr.com/photos/skoupidiaris/5025176923
- Embed binary* data using DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) = *dataURIs can be text too e.g. SVG
- and 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; }
- 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 what if we could use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
- HTTP/2
- HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
- HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
- HTTP/1.1 HTTP/2 Impressive! But is it a real world test? https://http2.golang.org/gophertiles
- • HTTP methods, status codes and semantics remain the same • Binary headers • Header compression • Multiplexed • Server can push resources HTTP/2
- Each request becomes a stream
- DATA frame HEADERS frame HTTP/1.1 200 OK Date: Mon, 07 Sep 2015 17:39:33 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip X-XSS-Protection: 1; mode=block X-Frame-Options: SAMEORIGIN Transfer-Encoding: chunked <!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> HTTP/2HTTP/1.1 Streams are divided into frames } } DATA frame DATA frame
- Frames are multiplexed over a TCP connection … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
- TCP connection comparison HTTP/2 vs HTTP/1.1 HTTP/1.1 HTTP/2
- Prioritised using 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 2/3 1/3 Low priority
- Header compression https://http2.github.io/http2-spec/compression.html
- 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
- What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- Opportunities for new kinds of 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 resources 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
- Many 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
- Parallel version looks usable with just 15% of bytes
- And almost complete with 25% of the image bytes!
- There are some questions over the user experience with progressive images Sequential version needs 80% of bytes to match up…
- When do we kill off some HTTP/1.1 optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
- Browser support for HTTP/2 is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported yet
- Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
- 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?
- No content until DNS, TCP and TLS negotiation complete Efficient TLS is Important Session Resumption, Certificate Stapling and improvements in TLS v1.3 all help
- Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
- https://www.flickr.com/photos/mariachily/3335708242 Still plenty of challenges…
- Go explore! http://www.flickr.com/photos/atoach/6014917153
- http://www.flickr.com/photos/auntiep/5024494612 @andydavies andy.davies@nccgroup.trust http://slideshare.net/andydavies
Advertisement