lightning talk: spdy in a nutshell
DESCRIPTION
These slides are part of the lightning talk (5 min) on Google's HTTP extension SPDY.TRANSCRIPT
SPDY. In A Nutshell. Lightning. Namics.
Thomas Junghans. Senior Frontend Engineer. 31. August 2013
Namics. 2.9.2013 2 Denken. Präsentieren. Umsetzen.
(pronounced "SPeeDY")
SPDY in a Nutshell
Namics. 2.9.2013 3 Denken. Präsentieren. Umsetzen.
• An Open Networking Protocol • Developed mainly at Google • Since July 2012 a defacto standard • Basis for HTTP 2.0
What is SPDY?
Namics. 2.9.2013 4 Denken. Präsentieren. Umsetzen.
Reduce page loading time by 50% Improve web security Easy deployment - nothing to do for web authors
High Level Goals
Namics. 2.9.2013 5 Denken. Präsentieren. Umsetzen.
Allow many concurrent HTTP-Requests in one TCP session Reduce bandwidth by compressing headers Make SSL the underlying transport protocol
Technical Goals
Namics. 2.9.2013 6 Denken. Präsentieren. Umsetzen.
"We hope to engage the open source community to contribute ideas, feedback, code, and test results, to make SPDY the next-generation application protocol for a faster web." Chromium Dev-Team
Namics. 2.9.2013 7 Denken. Präsentieren. Umsetzen.
But why SPDY?
What's wrong with HTTP?
Namics. 2.9.2013 8 Denken. Präsentieren. Umsetzen.
Websites today are different from 10 years ago Webpages have become much much larger HTTP was not designed for latency
The Web has changed
Namics. 2.9.2013 9 Denken. Präsentieren. Umsetzen.
• One request per connection • In HTTP only the client can initiate a request • Uncompressed request and response headers • Redundant headers • Data compression is optional
HTTP's Weaknesses
Namics. 2.9.2013 10 Denken. Präsentieren. Umsetzen.
SPDY extends HTTP
it does not replace it
Namics. 2.9.2013 11 Denken. Präsentieren. Umsetzen.
HTTP
SPDY
SSL
TCP
Application
Session
Presentation
Transport
SPDY extends the application layer as a session layer atop SSL
Namics. 2.9.2013 12 Denken. Präsentieren. Umsetzen.
Infinite Parallelism Request priorisation HTTP Header compression
SPDY Basic Features
Namics. 2.9.2013 13 Denken. Präsentieren. Umsetzen.
Unlimited concurrent streams over a single TCP connections are possible.
Infinite Parallelism means…
Namics. 2.9.2013 14 Denken. Präsentieren. Umsetzen.
Remember this?
Source: http://www.browserscope.org/?category=network&v=top
And this?
Namics. 2.9.2013 15 Denken. Präsentieren. Umsetzen.
CSS Sprites become obsolete, since as many icons and backgrounds as need be can be downloaded at the same time. Hostname sharding is unnecessary. No more hostnames for static resources.
You can forget those limitations
Namics. 2.9.2013 16 Denken. Präsentieren. Umsetzen.
First html, then js, then css please.
Request priorisation means
Namics. 2.9.2013 17 Denken. Präsentieren. Umsetzen.
Of course, that the headers are compressed Redundant headers such as the static User-Agent, Host, and Accept* are not resent with every request
Header Compression means
Namics. 2.9.2013 18 Denken. Präsentieren. Umsetzen.
SPDY provides server-initiated streams. This means content can be delivered to the client without the client asking for it.
SPDY Advanced Features
Namics. 2.9.2013 19 Denken. Präsentieren. Umsetzen.
Server Push – The client is informed that resources are going to be delivered. Server Hint – The client is informed that there are resources that should be requested.
Server-Initialized Streams
Namics. 2.9.2013 20 Denken. Präsentieren. Umsetzen.
Can we use SPDY today?
Namics. 2.9.2013 21 Denken. Präsentieren. Umsetzen.
Yes, we can
Seriously!!!
Namics. 2.9.2013 22 Denken. Präsentieren. Umsetzen.
Major sites such as Facebook, Twitter, Gmail, Wordpress already use SPDY. Test other sites with http://spdycheck.org/
Who uses SPDY?
Namics. 2.9.2013 23 Denken. Präsentieren. Umsetzen.
• IE 11 J • Firefox since V13 • Chrome since V4 • Safari n/a • Opera since 12.1 • Android Browsers and Opera Mobile
Browser-Support
Namics. 2.9.2013 24 Denken. Präsentieren. Umsetzen.
à https://isspdyenabled.com/
See if YOUR browser supports SPDY
Namics. 2.9.2013 25 Denken. Präsentieren. Umsetzen.
http://caniuse.com/spdy
Can I use SPDY?
Namics. 2.9.2013 26 Denken. Präsentieren. Umsetzen.
mod_spdy is a SPDY module for Apache 2.2 that allows your web server to take advantage of SPDY features https://developers.google.com/speed/spdy/mod_spdy/
Using SPDY with Apache
Namics. 2.9.2013 27 Denken. Präsentieren. Umsetzen.
Ruby SPDY - https://github.com/igrigorik/spdy node.js SPDY - https://github.com/indutny/node-spdy Jetty Web Server - http://wiki.eclipse.org/Jetty/Feature/SPDY
Other SPDY Servers
Namics. 2.9.2013 28 Denken. Präsentieren. Umsetzen.
You'll find usefull information on http://dev.chromium.org/spdy/spdy-best-practices
SPDY Best Practices
Namics. 2.9.2013 29 Denken. Präsentieren. Umsetzen.
That's all folks!
Namics. 2.9.2013 30 Denken. Präsentieren. Umsetzen.
• http://dev.chromium.org/spdy/spdy-whitepaper • http://dev.chromium.org/spdy/spdy-best-practices • http://tools.ietf.org/html/draft-white-httpbis-spdy-analysis-00 • https://hacks.mozilla.org/2012/02/spdy-brings-responsive-and-scalable-
transport-to-firefox-11/ • http://stackoverflow.com/questions/4065344/is-spdy-really-used • http://security.stackexchange.com/questions/29632/what-should-i-know-about-
spdy-before-enabling-it • https://www.varnish-software.com/blog/why-i-dont-spdy • http://www.wired.com/wiredenterprise/2013/03/facebook-spdy/ • http://blog.liip.ch/archive/2012/06/21/this-site-now-runs-on-spdy.html
Sources & References