Lightning Talk: SPDY in a Nutshell

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