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 Ju...
Namics.2.9.2013 4 Denken. Präsentieren. Umsetzen.
Reduce page loading time by 50%
Improve web security
Easy deployment - n...
Namics.2.9.2013 5 Denken. Präsentieren. Umsetzen.
Allow many concurrent HTTP-Requests in one TCP session
Reduce bandwidth ...
Namics.2.9.2013 6 Denken. Präsentieren. Umsetzen.
"We hope to engage the open source
community to contribute ideas,
feedba...
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 ...
Namics.2.9.2013 9 Denken. Präsentieren. Umsetzen.
•  One request per connection
•  In HTTP only the client can initiate a ...
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 exten...
Namics.2.9.2013 12 Denken. Präsentieren. Umsetzen.
Infinite Parallelism
Request priorisation
HTTP Header compression
SPDY B...
Namics.2.9.2013 13 Denken. Präsentieren. Umsetzen.
Unlimited concurrent streams over a single TCP
connections are possible...
Namics.2.9.2013 14 Denken. Präsentieren. Umsetzen.
Remember this?
Source: http://www.browserscope.org/?category=network&v=...
Namics.2.9.2013 15 Denken. Präsentieren. Umsetzen.
CSS Sprites become obsolete, since as many icons and
backgrounds as nee...
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 th...
Namics.2.9.2013 18 Denken. Präsentieren. Umsetzen.
SPDY provides server-initiated streams. This means
content can be deliv...
Namics.2.9.2013 19 Denken. Präsentieren. Umsetzen.
Server Push – The client is informed that resources are
going to be del...
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 SPD...
Namics.2.9.2013 23 Denken. Präsentieren. Umsetzen.
•  IE 11 J
•  Firefox since V13
•  Chrome since V4
•  Safari n/a
•  Op...
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...
Namics.2.9.2013 27 Denken. Präsentieren. Umsetzen.
Ruby SPDY - https://github.com/igrigorik/spdy
node.js SPDY - https://gi...
Namics.2.9.2013 28 Denken. Präsentieren. Umsetzen.
You'll find usefull information on
http://dev.chromium.org/spdy/spdy-bes...
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....
Upcoming SlideShare
Loading in …5
×

Lightning Talk: SPDY in a Nutshell

1,645 views

Published on

These slides are part of the lightning talk (5 min) on Google's HTTP extension SPDY.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,645
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • "Open" in that the community is invited to joinGoals for HTTP 2.0 include asynchronous connection multiplexing, header compression, and request-response pipelining, while maintaining full backwards compatibility with the transaction semantics of HTTP 1.1. It comes as an answer to the rise of SPDY, an HTTP compatible protocol launched by Google[2] and supported in Chrome, Opera, Firefox, and Amazon Silk browsers,
  • Single request per connection. Because HTTP can only fetch one resource at a time (HTTP pipelining helps, but still enforces only a FIFO queue), a server delay of 500 ms prevents reuse of the TCP channel for additional requests. Browsers work around this problem by using multiple connections. Since 2008, most browsers have finally moved from 2 connections per domain to 6. Exclusively client-initiated requests. In HTTP, only the client can initiate a request. Even if the server knows the client needs a resource, it has no mechanism to inform the client and must instead wait to receive a request for the resource from the client.Uncompressed request and response headers. Request headers today vary in size from ~200 bytes to over 2KB. As applications use more cookies and user agents expand features, typical header sizes of 700-800 bytes is common. For modems or ADSL connections, in which the uplink bandwidth is fairly low, this latency can be significant. Reducing the data in headers could directly improve the serialization latency to send requests.
  • Single request per connection. Because HTTP can only fetch one resource at a time (HTTP pipelining helps, but still enforces only a FIFO queue), a server delay of 500 ms prevents reuse of the TCP channel for additional requests. Browsers work around this problem by using multiple connections. Since 2008, most browsers have finally moved from 2 connections per domain to 6. Exclusively client-initiated requests. In HTTP, only the client can initiate a request. Even if the server knows the client needs a resource, it has no mechanism to inform the client and must instead wait to receive a request for the resource from the client.Uncompressed request and response headers. Request headers today vary in size from ~200 bytes to over 2KB. As applications use more cookies and user agents expand features, typical header sizes of 700-800 bytes is common. For modems or ADSL connections, in which the uplink bandwidth is fairly low, this latency can be significant. Reducing the data in headers could directly improve the serialization latency to send requests.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Just think ofcss sprites!Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • Multiplexed streamsSPDY allows for unlimited concurrent streams over a single TCP connection. Because requests are interleaved on a single channel, the efficiency of TCP is much higher: fewer network connections need to be made, and fewer, but more densely packed, packets are issued.Request prioritizationAlthough unlimited parallel streams solve the serialization problem, they introduce another one: if bandwidth on the channel is constrained, the client may block requests for fear of clogging the channel. To overcome this problem, SPDY implements request priorities: the client can request as many items as it wants from the server, and assign a priority to each request. This prevents the network channel from being congested with non-critical resources when a high priority request is pending. HTTP header compressionSPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted.
  • In chrome: chrome://net-internals/#events&q=type:SPDY_SESSION%20is:active
  • Lightning Talk: SPDY in a Nutshell

    1. 1. SPDY. In A Nutshell. Lightning. Namics. Thomas Junghans. Senior Frontend Engineer. 31. August 2013
    2. 2. Namics.2.9.2013 2 Denken. Präsentieren. Umsetzen. (pronounced "SPeeDY") SPDY in a Nutshell
    3. 3. 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?
    4. 4. 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
    5. 5. 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
    6. 6. 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
    7. 7. Namics.2.9.2013 7 Denken. Präsentieren. Umsetzen. But why SPDY? What's wrong with HTTP?
    8. 8. 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
    9. 9. 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
    10. 10. Namics.2.9.2013 10 Denken. Präsentieren. Umsetzen. SPDY extends HTTP it does not replace it
    11. 11. 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
    12. 12. Namics.2.9.2013 12 Denken. Präsentieren. Umsetzen. Infinite Parallelism Request priorisation HTTP Header compression SPDY Basic Features
    13. 13. Namics.2.9.2013 13 Denken. Präsentieren. Umsetzen. Unlimited concurrent streams over a single TCP connections are possible. Infinite Parallelism means…
    14. 14. Namics.2.9.2013 14 Denken. Präsentieren. Umsetzen. Remember this? Source: http://www.browserscope.org/?category=network&v=top And this?
    15. 15. 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
    16. 16. Namics.2.9.2013 16 Denken. Präsentieren. Umsetzen. First html, then js, then css please. Request priorisation means
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. Namics.2.9.2013 20 Denken. Präsentieren. Umsetzen. Can we use SPDY today?
    21. 21. Namics.2.9.2013 21 Denken. Präsentieren. Umsetzen. Yes, we can Seriously!!!
    22. 22. 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?
    23. 23. 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
    24. 24. Namics.2.9.2013 24 Denken. Präsentieren. Umsetzen. à https://isspdyenabled.com/ See if YOUR browser supports SPDY
    25. 25. Namics.2.9.2013 25 Denken. Präsentieren. Umsetzen. http://caniuse.com/spdy Can I use SPDY?
    26. 26. 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
    27. 27. 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
    28. 28. 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
    29. 29. Namics.2.9.2013 29 Denken. Präsentieren. Umsetzen. That's all folks!
    30. 30. 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

    ×