1. SPDY is a new protocol developed by Google that seeks to optimize web performance by allowing multiple requests to be multiplexed over a single TCP connection and compressing headers. 2. A demo showed that SPDY can provide faster page loads, especially for pages with many component files, by enabling server push of resources without additional requests. 3. Implementing SPDY typically only requires updating server middleware to support the new protocol, while the content layer remains unchanged. Large services like Google App Engine also make it easy to try SPDY.

1. SPDY!!
JUNE 22 ND , 2012 @ APP ENGINE JA NITE
KOMASSHU

2. SELF-INTRODUCTION
• Researching cutting-edge web technology
• Especially communication APIs, in preference 
• Google API Expert (HTML5)
• Microsoft Most Valuable Professional(IE)
• Twitter: @komasshu
• Blog: http://blog.livedoor.jp/kotesaki

3. ACTIVITIES http://www.html5rocks.com/en/tutorials/speed/quick/
(LOVE SPEED!!)
Referred!!, But… orz
(I know I should do feedback)
http://wakachi.komasshu.info/

4. TODAY’S MAIN IDEA
Introduction to SPDY!!

5. TODAY’S AGENDA
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

6. http://www.flickr.com/photos/59916467@N06/6974781080/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

7. EVOLUTION OF
WEB SERVICES
1991 2012
http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/

8. ALSO COMMUNICATION
MODEL HAS CHANGED
1991 2012
http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
Multiple resources
Single resource +
Multiple resources Bi-directional

9. TRANSPORT PROTOCOL
STILL HTTP
REQUEST GET index.html
RESPONSE
REQUEST GET style.css
RESPONSE

10. ISSUE IN HTTP
Response time become slower when
required resources increased.
And each transaction has
overlapped headers.

11. CURRENT PRACTICE
In RFC2616 (HTTP/1.1),
Concurrent tcp connections
# of concurrent tcp connections
2
(IE6, 7 keeps the number)
Modern Browser : over 6
More numbers… multi-domain
e.g. Gmap use mts0.google.com & mts1
for map, but these are same server
(CNAME = mts.l.google.com)

12. BUT STILL…
• Concurrent tcp means
• Abuse of server resources
• intermediary‟s resources, as well
• e.g. NAT, proxy, FireWall…
• Need additional coding to keep
order.

13. http://www.flickr.com/photos/33224129@N00/3348658950/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

14. SPDY
• Who proposed?
• Google
• Goal
• SPEED!!
• First POST in ML(spdy–dev)
• Nov 17th, 2009
• Current version
• SPDY 2
• Services with SPDY
• Almost Google‟s site
• Twitter
• Supported Browser
• Google Chrome
• Mozilla Firefox
• Amazon Silk Browser
• Servers
• Apache, nginx, jetty, node, …
http://www.chromium.org/spdy

15. FEATURES
Current practice SPDY
• Multiplexing request under single tcp
• Header compression
• Server push feature

16. [BTW] SPDY NEEDS TLS
TUNNELING UNDER
COMMON ENV
In real internet, there are lots of devices verifing http protocol.
Load
Fire
proxy balan
wall
cer
Block!!
Raw spdy transaction
Can‟t touch
TLS tunneling

17. [BTW] HOW TO SWITCH
SPDY AND HTTPS
• tls NPN : Next Protocol Negotiation
• Under non-SPDY browser, HTTPS is automatically used;-)
Client Hello
Server Hello
spdy2 http/1.1
http://tools.ietf.org/id/draft-agl-tls-nextprotoneg-03.html

18. MULTIPLEX
Each streams are treated as key-value pair.
TLS tunneling
SPDY_SESSION_SYN_STREAM
req 5 req 3 req 1
1 res 5 res 3 res
SPDY_SESSION_SYN_REPLY

19. PREVENT HOL
BLOCKING (!PIPELINE)
Case : Pipeline Case : non Pipeline (SPDY)
1 1
3 5 3 5
BLOCKED

20. MULTIPLEX : TWO
LAYERS
• Split into two parts
• Framing layer
• In this layer, doesn‟t care about value
• Value is just a binary data
• HTTP layer
• How to fit HTTP protocol into SPDY‟s framing layer as
binary data.

21. [REF] SYN_REPLY
Framing layer
key
HTTP layer
(HTTP header messages are
also treated as key-value pair )
value
Compressed
(binary)
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2

22. HEADER
COMPRESSION
Framing layer
As described in previous slide
key
HTTP layer
(HTTP header messages are
also treated as key-value pair )
value
Compressed
(binary)
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2

23. SERVER PUSH
• It’s just for SPEED!!
• Don‟t be considered as common push service
w/o server push w/ server push
index.html index.html
<head>〜</head>
css, js
Send css, js, image etc.
<body>〜</body> w/o client‟s request
image, video, etc.

24. SERVER PUSH [CONT]
Used when
required.
index.html
(e.g. HTML
parser, ajax
request)
Just
cached
Send css, js, image etc.
w/o client‟s request
Cache

25. http://www.flickr.com/photos/petrahenl/6857301701/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

26. DEMO1. FEEL SPEED
IN SPECIFIC CASE
Normal HTTP SPDY
http://spdykomtest.appspot.com/pub/test.html https://spdykomtest.appspot.com/pub/test.html

27. DEMO2. IN COMMON CASE
& PUSH FEATURE
https://spdykomtest.appspot.com/pub/makuhari/index.html

28. http://www.flickr.com/photos/regansbox/2371720977/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

29. NO CODING REQUIRED
(W/O SERVER PUSH)
Just change / update your middleware is enough.
Contents layer is completely
html css js php
independent w/ SPDY.
Document root
Apache + mod_spdy
Nginx + patch
Server
engine

30. GAE IS NICE PLACE
TO TRY SPDY 
• Common manners of deploying on GAE is enough.
• All you need is changing protocol schema (http => https)
Quite easy!!
Channel API also works with 
http://blog.livedoor.jp/kotesaki/archives/1802324.html

31. FALLBACK WORKS
WELL!!

32. W/ SERVER PUSH
(CASE NODE-SPDY)
app.get(„hoge‟, function(req, res) {
if (req. ){
var headers = {„content-type‟, „text/javascript‟};
res.push(„hoge.js‟, headers, function(e, s) {
s.end(“alert(0);”);
});
}
res.sendfile(__dirname + “/public/index.html”);
}

33. http://www.flickr.com/photos/vbthe/7237597146/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?

34. IS IT THE RIGHT CHOICE
FOR LARGE DATA?
Use SPDY for large resources … right solution?
• encryption cost
• CDN doesn‟t work
• Block short data transfer ( really SPDY/3 solve it? )
Netwok loss !!
1 Large data (image, video, …) 3 json
Short data is often high priority than large.

35. INFORMATIVE ENTRY
Amazon's Silk Browser Acceleration Tested: Less Bandwidth
Consumed, But Slower Performance
http://www.anandtech.com/show/5139/amazons-silk-browser-tested-less-
bandwidth-consumed-but-slower-performance

36. WHAT ARE THE
BOTTLENECKS?
Amazon‟s
SPDY w/ TLS Proxy enhanced
by SPDY
Of course, I‟m not sure ;-)

37. STUDY FROM
CURRENT PRACTICE
Google map’s image is transported by
another SPDY connection.
Twitter doesn’t use SPDY for user’s icon
transaction.
“with research, Find best practice”

38. TOOLS:
SPDY INDICATOR

39. TOOLS:
DEV TOOL, NET-INTERNALS

40. TOOLS:
SPEED TRACER

41. MOST IMPORTANT
THING
“Rich user experience in
adequate system cost.”
• Goal is not so simple, but we should
achieve 
• Not only SPDY, but also other method
should be considered together.

42. JUST TRY AND FEEL
W/ GAE!!

43. SUGGESTED LINKS
• SPDY - The Chromium Projects
• http://www.chromium.org/spdy
• spdy-dev
• https://groups.google.com/forum/?fromgroups#!forum/spdy
-dev
• モバイルネットワークにおける SPDY のパフォーマンス
• http://googledevjp.blogspot.jp/2012/05/spdy.html
• こてさきAjax:SPDY
• http://blog.livedoor.jp/kotesaki/archives/cat_46494.html
• Node.js で Hello SPDY を作る
• http://d.hatena.ne.jp/jovi0608/20120517/1337235058

44. http://www.flickr.com/photos/23086934@N02/2250806050/