1.
Web Performance
and the impact of SPDY, HTTP/2, and QUIC
RootPerformance

2.
● Founder of RootPerformance,
doing application performance
analysis and troubleshooting for
clients
● Find me @
About Me
● 17+ years in Performance
Engineering space
○ application performance
(web, DB, thin-client, thick-
client, etc)
○ network analysis
○ capacity planning
● Been both customer and
implementer of application
performance software products

3.
Let’s talk about…
Performance : taken from - http://www.picserver.org/p/performance.html - http://creativecommons.org/licenses/by-sa/3.0/

4.
Are your app’s user-expected page
load times acceptable?
Fairfield Church, Romney Marsh (C) Stephen Nunney :: Geograph Britain and Ireland : taken from - http://www.geograph.org.uk/photo/228870 Author: Stephen Nunney http://creativecommons.
org/licenses/by-sa/2.0/

5.
Hold that
thought…
First a
primer

6.
Web PerformancePerformance of your site or
app is important
Users won’t stick around long
if your site is slow
1 second has been benchmark
for years, and still is
➢ beyond that, users start to
think of going elsewhere
➢ at 10s, most are gone
Average US connection speed
is about 7.4Mbps (2012)*
*Source: State of Broadband 2013 - whitehouse.gov

7.
But bandwidth is not nearly
as important as latency,
which varies depending on
user location
Web PerformanceSlow websites impact the
bottom line
○ lower conversions
○ higher bounce rates
We want to make the web as fast as possible to improve business
metrics

8.
...But how do we do that?

9.
By first understanding how a
web request works.

10.
It’s important to optimize these to reduce page load time
✓ HTTP request
✓ Server processing
✓ Content download
Web requests involve many steps
✓ DNS request
✓ TCP connection
✓ TLS connection (if secure)

11.
What are common optimization
recommendations?

12.
Typical recommendations
Reduce latency between user and server
✓ implement content delivery
network (CDN)
✓ increase bandwidth
✓ increase number of connections,
but up to a point
Cache static resources, when possible
Compress all data with gzip compression
Reduce image sizes
Combine JS/CSS files
Persist connections
Utilize different browser (IE7 to IE9,
IE to Chrome)
Increase server hardware resources
Precision approach path indicator - Wikipedia, the free encyclopedia : taken from - https://en.wikipedia.org/wiki/Precision_approach_path_indicator - https://creativecommons.org/licenses/by-sa/3.0/

13.
Are recommendations being
followed?

14.
Well, not really

15.
Worldwide website stats - Page Size
Source: HTTP Archive - May 2015
Size of average image is 2MB! That’s a lot. Not enough compression happening!

16.
Worldwide website stats - Transfers
Source: HTTP Archive - May 2015
Number of web requests and their sizes are going up! Not good!

17.
Worldwide website stats - CDN Use
Source: HTTP Archive - May 2015
Use of content delivery networks is steady, but should be going up!

18.
Worldwide website stats - Caching
Source: HTTP Archive - May 2015
Percentage of cached data should be going up, but has remained steady!

19.
Understanding the web’s
protocol may help

20.
HTTP Protocol
Hypertext Transport Protocol - application layer protocol in the
TCP/IP stack used for communication of web traffic
Most widely used version is HTTP/1.1
But there limitations
By Magnus D from London, United Kingdom (The new Routemaster Uploaded by Kobac) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

21.
HTTP/1.1 Limitations
Many small requests makes it
latency sensitive
Pipelining is not multiplexing
○ server must still respond in
order
○ head-of-line blocking occurs
due to TCP
○ most browsers disable it
Short-lived requests affected
by TCP slow start
○ default OS initial congestion
window = 3
○ changed to 10 in Linux 2.6
kernel, but not in Windows
○ short HTTP requests (most
requests) are still in slow-start

22.
Common HTTP/1.1 Workarounds
Open multiple connections
○ modern browsers allow 6
concurrent TCP connections to
send multiple HTTP requests
○ helps reduce impact of slow-
start
Image spriting - to combine
small images and reduce
HTTP requests
Domain sharding
○ used to multiply number of
concurrent connections
○ one.domain.com, two.domain.
com, three.domain.com, etc
Resource inlining - to reduce
number of TCP connections
By Camilo Sanchez (Own work) [CC BY-SA 4.0 (http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons

23.
But workarounds aren’t long-term
solutions...

24.
Enter Google

25.
SPDY Overview
To help solve HTTP/1.1
limitations, in Nov 2009,
Google released first draft
defining a new protocol called
SPDY (pronounced "SPeeDY")
Main goal: reduce page load
times
This is done in following
technical ways:
✓ multiplexing requests on one
TCP connection
✓ prioritizing requests
✓ compressing headers
✓ enabling server pushes
✓ ensuring better security with
TLS

26.
From SPDY to HTTP/2

27.
HTTP/2 Overview
More efficient version of
HTTP/1.1
Initial draft published in 2012
an exact copy of SPDY
Published as proposed
standard (RFC 7540) in May
2015
SPDY was used at starting
point to build on
✓ Multiplexing of requests via
request/response streams
✓ Flow control and prioritization
of multiplexed streams
✓ Interaction mode via server
push
✓ Data compression of HTTP
headers
Three energy saving light bulbs | Elektrostandard compact fl… | Flickr : taken from - https://www.flickr.com/photos/antonfomkin/5243218781 Author: Anton Fomkin https://creativecommons.
org/licenses/by/2.0/

28.
Differs from SPDY in 2 key ways

29.
1. Can be implemented with or without TLS (port 80 & 443)
via h2 & h2c version IDs, respectively
2. HTTPS expected to be de facto standard by web servers
By Bert Kaufmann from Roermond, Netherlands (Making a difference) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

30.
What else about
HTTP/2?
By Caroline Culler (User:Wgreaves) (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons

31.
Uses only one TCP connection;
instead of many to reduce
connection setup time

32.
Requests are multiplexed

33.
Compresses HTTP header

34.
Can reset HTTP/2 stream
instead of TCP connection

35.
Servers can push data to the
client

36.
That’s nice, but can I use it?

37.
Supported Browsers:
⬜ Chrome
⬜ Firefox
⬜ Opera
⬜ IE/Edge
By Gabe Torney (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

38.
By Gabe Torney (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
Supported Web Servers:
⬜ Apache
⬜ Nginx

39.
Ok. So now what?

40.
You complete some HTTP/2
implementation steps

41.
Remove domain sharding to
reduce TCP connections

42.
Remove resource inlining to
avoid unneeded TCP
connections

43.
Uncombine scripts and CSS files,
with a caveat...don’t do all files*
* Khan Academy’s implementation of HTTP/2

44.
Use SPDY if you can’t use
HTTP/2

45.
What are the pros of doing this?

46.
Substantially and measurably
improves end-user perceived
latency over HTTP/1.1 using TCP
Addresses the "head of line”
blocking problem in HTTP
Does not require multiple
connections to a server to enable
parallelism, thus improving its
use of TCP
Retains the
semantics of
HTTP/1.1, like
header fields,
status codes, etc
Clearly defines
how HTTP/2.0
interacts with
HTTP/1.x via new
Upgrade header
field

47.
Ok. Now the cons?

48.
TLS connection setup still
takes time
Binary format makes
troubleshooting a little
more difficult
Unable to get
around TCP “head
of line” blocking,
particularly during
packet loss
TCP Slow-Start’s
congestion
avoidance algorithm
increases
serialization delay

49.
Be QUIC on the web

50.
QUIC overview
QUIC (Quick UDP Internet
Connections) development started in
2012 as an extension of work done by
Google to get around cons with SPDY &
HTTP/2
Need protocol with quicker connection
setup time & quicker retransmissions,
unlike TCP
Multiplexed HTTP communication
running over UDP instead of TCP
Main goal: reduce over latency across
Internet for user interactions
Implements various TCP features
without the limitations
● 0 RTT for connection setup
● Flow control
● Congestion avoidance
All benefits of HTTP/2 with no TCP
head-of-line blocking due to no
connectionless orientation of UDP
protocol
By Amey Hegde (Flickr) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

51.
Want to know more about Web
Performance?

52.
Want to learn how to make
your web applications faster?
Red ones go faster | A toy car speeding to work. Strobist in… | Flickr : taken from - https://www.flickr.com/photos/leszekleszczynski/5161000002 Author: Leszek Leszczynski https://creativecommons.
org/licenses/by/2.0/

53.
YES! How do I do it?
By Los Angeles (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons

54.
Free eBook Chapter:
GET THE CHAPTER!
Learn the key things to
look for when analyzing
a web application

55.
Thank You
RootPerformance

56.
Happy Analyzing!
RootPerformance