SPDYIt's Here!Roberto PeonSoftware Engineer, Google

Overview

#io12

The PastWhat does the world look like today?What is SPDY?How to optimize for SPDYThe future of SPDYStuff using or supporting SPDYAn example: adding server push

3/64

The Past

Near the beginning:

#io12

The speed of light was: c

(Oops, lets try again)

5/64

Near the beginning (of the web):

#io12

There was HTTP "0.9"

6/64

And then (1996) there was:

#io12

HTTP/1.0

7/64

Shortly thereafter (1997-1999) there was:

#io12

HTTP/1.1

8/64

What did a page look like in 1999?

#io12

It was:

Tiny!

Specifically, around 60k on average

And, at the time, that was probably good enough

source: www.pantos.org

9/64

Google in 1999:

SearchthewebusingGoogle

GoogleSearch I'mfeelinglucky

MoreGoogle!

Copyright1999GoogleInc.

#io12 10/64

Today

Google in 2012:

AdvertisingPrograms BusinessSolutions Privacy&Terms +Google AboutGoogleiGoogle

GoogleSearch I'mFeelingLucky

Signin

+You Search Images Maps Play YouTube News Gmail Documents Calendar More

#io12 12/64

Today:

#io12

Pagesare

muchmuch

larger

13/64

Today:

#io12

Pages are composed of more resources

They use a bunch of domainsThey're far more dynamicSecurity is a bigger concern

14/64

Today:

#io12

The speed of light is still: c

15/64

And that really matters...because speed-of-light bounds RTT!

#io12 16/64

2010 vs 2012

Avg. Page Size Requests/Page Domains

Nov 15 2010 702k 74 10

May 15 2012 1059k 84 12

The trend seems to continue towards larger pages using more resources.

#io12

source: httparchive.org

17/64

But Now...

#io12

The stakes are higher...

The internet has become more important

More people depend on it

It's big money!

18/64

SPDY: It's here!

SPDY is a session-layer replacement for HTTP'sconnection handling

#io12 20/64

So.... Why?

#io12 21/64

The idea is that SPDY can help make sites:

#io12

FasterMore secureAnd, long-term, it can help to do it with less effort

(but no guarantees...)

22/64

How does it work?

#io12 23/64

SPDY:

#io12

Is always over TLS Point-to-point privacyby defaultTransparent proxies get in the wayof anything else on port 80Firewalls aren't reliably open toports other than 80 and 443Allows for loading of resourceswith an HTTP scheme over aTLS connection

-

-

-

-

24/64

SPDY:

#io12

Is always over TLSDoes Headers Compression

Much of the headersare repeated.Much of the headersare repeated.User-AgentCookieHTTP methodsHTTP version stringAll of those "\r\n"setc.

-

-

------

Imagery supplied by PhotoObjects.net/Getty Images

25/64

SPDY:

#io12

Is always over TLSDoes Headers Compression

Reduces bandwidth required for headers-10-35% size reduction typicalfor the first request80-97% size reduction on longer-lived connectionsEspecially useful in the client to serverdirection since upload bandwidth isoften smallerThink: mobile devices...

-

-

-

-

26/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary Framed

It is faster to parseLess error prone,Easier to implement right!

--

27/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs Multiplexed

Many (1,073,741,824) independentstreams per TCP connectionEither side can create a new stream at any time

Imagery supplied by Stockbyte/Getty Images

28/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized Streams

Prioritization allows the browserto forget about request heuristicsand just send all the requests

-

Interleaving allows "simultaneous"delivery of data on multiple streamsInterleaving also allows for highpriority data to temporarily 'interrupt'low-priority data

-

-

29/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized StreamsAllows for Server Push

Unlike data-URLs, it allows resource cachingInlining is annoyingShaves off an RTT as compared tojust putting in a link and waitingMaking its way into implementations now

-

--

-

Imagery supplied by Comstock/Getty Images

30/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized StreamsAllows for Server Push

Uses the same or lessbandwidth as inlining

-

Streams can be aborted ifthe browser realizes it alreadyhas the resource

-

Imagery supplied by Comstock/Getty Images

31/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized StreamsAllows for Server PushUses One TCP Connection

Reduces buffer bloatUses fewer server resourcesAllows caching of the CWND on the clientAllows servers to better prioritize yourimportant traffic

----

Imagery supplied by Stockbyte/Getty Images

32/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized StreamsAllows for Server PushUses One TCP ConnectionUses Fewer Packets

Thanks to compressionand using only one TCP connection

-

Imagery supplied by Stockbyte/Getty Images

33/64

SPDY:

#io12

Is always over TLSDoes Headers CompressionIs Binary FramedIs MultiplexedHas Full-Duplex Interleavedand Prioritized StreamsAllows for Server PushUses One TCP ConnectionUses Fewer PacketsDoesn't Require Rewriting Your Site

Many parts of SPDY can help for most sitesSome features, like 'server push' takemore effort

--

Imagery supplied by Stockbyte/Getty Images

34/64

SPDY Isn't Magic(the no guarantees bit)

Things that make SPDY less effective:

#io12

Lots of 3rd-party domains with resources you need to render your pageWhen you have lots of domains that don't match the original cert, SPDY can'treuse the connection.This matters most when comparing its speed to HTTP

Very few resources without connection reuseSPDY may not help you if you have very few resources (

SPDY vs HTTP?As compared to SPDY, HTTP has some significant limitations.

#io12

Not secure by defaultNo header compressionNo multiplexingNot full-duplexNo prioritization; Browsers must employ "fun" heuristics instead.No server pushNo interleavingMay require more DNS lookupsUses far more connectionsHelps cause buffer-bloat

36/64

But, Aren't Browsers Getting Smarter?Yup. They are.

If your user has visited the site before, a smart browser like Chrome may help.

In particular, a browser could remember that visiting domain A means that it willlikely use:

6 connections to domain A, 6 connections to domain B, 3 connections to domainC, etc.

For this to work, however, it requires the site to have changed little, for the userto have already visited the site, for the browser to learn these things when theuser visited the site, and it still depends on the timely delivery of the DNSresolutions for the other domains.

If the DNS data had a sufficiently high TTL, you don't have to redo theresolutions... but there are good reasons to keep TTLs low such as fast reactionoutages or for load balancing.

#io12 37/64

You probably just saw "Wall 'O Text", right?

#io12 38/64

The one-sentence breakdownYes, they'e getting smarter, but it will likely still be worse that what you can dowith SPDY.

#io12 39/64

The Cost of HTTP ConnectionsEach connection:

#io12

Requires a new DNS resolution (when going to a new domain)

Requires a new 3-way handshake

If using HTTPS

Connections aren't free for servers

Takes up space in a table of your NAT box.

For many people this can be 100+ ms!-

+1 RTT-

generally +2 RTT, sometimes more-

they use CPU, memory, FDs, and ephemereal port space-

when you run out of space here, weird things happen-

40/64

What should you do?

Optimizing for SPDY as a System Administrator

#io12

Mind your cert chainUse smaller, but complete certificate chainsUse wildcarts certs if they're available to youYou'll want to ask your cert provider questions about thisUnfortunately, this is a complicated issue

----

42/64

Optimizing for SPDY as a System Administrator(cont'd)

#io12

TCP settingsset your initcwnd to 10 packets worth

turn off tcp_slow_start_after_idle

-ip route change default via initcwnd 10For more recent kernels, this is not necessary-- it is already thedefault

--

-sysctl -w net.ipv4.tcp_slow_start_after_idle=0-

43/64

For System Administrators(cont'd)

If (new_domain_resolution.contains(IP of a pre-existing connection) && connection_SSL_cert.matches(new_domain)) - Connection reuse! Profit!

#io12

DNSWhen possible, be sure that your resolvers return the same set of IPs forany hostname that might match the same certTry to be sure that the set of IPs provided with any resolution onlychanges in ordering, not in content

-

-

44/64

For Application Developers:

#io12

Don't shard hostnamesThis might be required for HTTP, but not for SPDYYou'll still need to do it for HTTP, but, think about how to avoid doing itwhen the user is coming to you via SPDY

--

45/64

For Application Developers:(cont'd)

#io12

Plan on using server-push instead of inlining in the futureServer-pushed items are completely cacheable at the browser. This canmake subsequent page renderings much faster.Getting inlining right is non-trivial. What works great for this version ofyour site may make things worse with your next change.

-

-

Server-push with SPDY helps with this-- if you make a mistake, SPDYcan help mitigate the damage

-

46/64

For Application Developers:(cont'd)

#io12

If your site's cert is a wildcard cert, use domains that match that cert insteadof requiring others

e.g. google has a wildcard cert: "*.google.com"If you use multiple domains, wildcard certs might end up being cheaperanyway...

--

47/64

On Standards

#io12

SPDY has been developed as an open, publicly documented protocol.

Source code for SPDY has been available as open-source since day 1.

SPDY has been submitted to IETF as a proposal for HTTP/2.0

48/64

The Future of SPDYWe don't think we're done.

We'll be done only when we can serve a page in:connection-setup + bytes/bandwidth time.

... We think we can get there! We'll need:

#io12

name resolution pushcert data pushexplicit proxy support

49/64

Browsers supporting SPDYToday, there are two browsers that support SPDY and have it on by default:

#io12

ChromeFirefox (V13)

This ends up being a whole lot of users.

50/64

Using or Supporting SPDYThere are a bunch of companies, organizations, and projects which use orsupport SPDY:

#io12

Google's siteshttps://www.google.com, https://gmail.google.com, https://plus.google.comApp Engine sites(if they use https)Twitterhttps://twitter.comAkamai (SPDY/2) technology preview late summer, part of the product line this Fall.Cotendo (http://www.akamai.com/cotendo)Nginx (http://mailman.nginx.org/pipermail/nginx-devel/2012-June/002343.html)(more coming on next slide)

51/64

Using or Supporting SPDY (cont'd)There are a bunch of companies, organizations, and projects which use orsupport SPDY:

#io12

F5's SPDY Gateway (http://www.f5.com/news-press-events/press/2012/20120508b.html)Strangeloop (http://www.strangeloopnetworks.com/products/overview/features/)Jetty (http://wiki.eclipse.org/Jetty/Feature/SPDY)mod_spdy (http://code.google.com/p/mod-spdy/)node-spdy (for node.js https://github.com/indutny/node-spdy)Momentum (https://github.com/jonasschneider/momentum)(more coming on next slide)

52/64

Using or Supporting SPDY (cont'd)There are a bunch of companies, organizations, and projects which use orsupport SPDY:

#io12

Amazon Silk (http://aws.amazon.com/amazonsilk-jobs/)Netty (http://netty.io/Blog/Netty+331+released+-+SPDY+Protocol+%21)SPDY-for-iPhone (https://github.com/sorced-jim/SPDY-for-iPhone)spdylay (https://github.com/tatsuhiro-t/spdylay)

This is not a complete list!

53/64

A page to optimizeSPDY

#io12 54/64

The CSS

#io12

img{float:leftmargin:0pxpadding:0pxheight:20pxwidth:20pxopacity:0.8filter:alpha(opacity=80)}img:hover{float:leftmargin:0padding:0opacity:1.0filter:alpha(opacity=100)}

CSS

55/64

The Javascript

#io12

functionmain(){varup_thru_host=window.location.protocol+"//"+window.location.hostvarpathname=window.location.pathnamevarfilebase=pathname.substr(0,pathname.lastIndexOf('/'))vartile_size_x=20,tile_size_y=20varimage_size_x=640,image_size_y=400varrows=Math.ceil(image_size_y/tile_size_y)varcolumns=Math.ceil(image_size_x/tile_size_x)vartext=[]for(x=0x

The HTML

#io12

SPDYSAMPLE

main()

HTML

57/64

The PHP - main()

#io12

functionmain(){$script_name=$_SERVER["SCRIPT_NAME"]$uri=substr($script_name,strrpos($script_name,'/')+1)$server_name=$_SERVER["SERVER_NAME"]if($fd=fopen($uri,"rb")){$fn=$uri.".push"$XAssociatedContent=makeXAssociatedContent($fn,"https://",$server_name)foreach($XAssociatedContentas$line)header('xassociatedcontent:'.$line,false)printFile($fd)}else{if($uri=="index.html"){doPrintDirListing()}else{doFileNotFound()}}}

PHP

58/64

The PHP - makeXAssociatedContent()

#io12

functionmakeXAssociatedContent($filename,$scheme,$hostname){$fp=fopen($filename,"r")$retarray=array()$retval=""$xac_len=strlen('xassociatedcontent')$line_len=0if($fp){while($line=fgets($fp)){if(!$line)continueif(($line_len+=strlen($line))>=512$xac_len){$retarray[]=$retval$retval=""$line_len=0}$escaped_line=addslashes(str_replace("\n",'',$line))if($retval)$retval=$retval.','$url=$scheme.$hostname.$escaped_line$retval=$retval.'"'.$url.'"'}}if($retval!="")$retarray[]=$retvalreturn$retarray}

PHP

59/64

The PHP - the rest

#io12

functionprintFile($fd){while(!feof($fd)){$read_buf=fread($fd,4096)print$read_buf}}

functiondoFileNotFound(){header("status:404")header("HTTP/1.0404NotFound")print"\n"print"Sorry,file:".$uri."wasn'tfound.\n"print""}

functiondoPrintDirListing(){print""$files=scandir(".")foreach($filesas$file){print''.$file."\n"}print""}

PHP

60/64

Bits O Apache Config/etc/apache2/sites-available/default-ssl

/etc/apache2/mods-available/spdy.conf

#io12

...OptionsIndexesFollowSymLinksMultiViewsAllowOverrideAllOrderallow,denyallowfromallAliasMatch"^/.*(.html)$"/var/www/push_mapper.php...

SpdyEnabledonSpdyMaxThreadsPerProcess100SpdyMaxStreamsPerConnection1000

61/64

The .push filespdy_push_middle_sample.html.push

#io12

/s/228.png/s/229.png/s/230.png/s/231.png/s/232.png/s/234.png/s/235.png/s/236.png/s/237.png/s/238.png/s/239.png/s/240.png/s/241.png/s/242.png/s/243.png/s/244.png/s/245.png/s/246.png/s/247.png/s/248.png/s/249.png/s/250.png...

62/64

fenix@google.com