Understanding HTTP &
Web Performance
COLLIDE HALIFAX - OCTOBER 22, 2015
Welcome.
Luke
DeWitt
WEB TEAM LEAD
Mike
Rudolph
DEFINITELY NOT A COP
Who are these guys?
Immediacy of Now
Immediacy of Now
JAKOB NIELSEN 1993 STUDY
Response Times
source: http://www.nngroup.com/articles/response-times-3-important-limits/
0.1second
“Instantaneous Reaction”
1second
“Uninterrupted Flow of Thought”
10seconds
“User’s Attention”
SQUIRREL!!!
Show of hands…
47%
40%
7%
KISSMETRICS
What a slow site means…
of users expect your site to load in
2 seconds or less
of users abandon a site at 3
seconds
reduction in conversions for every
additional second of load time
sources: https://blog.kissmetrics.com/loading-time/, https://blog.kissmetrics.com/speed-is-a-killer/
Why I’m Important
Hypertext Transfer Protocol (HTTP)
An application protocol for distributed, collaborative, hypermedia
information systems.
Transmission Control Protocol
(TCP)
Enables two hosts to establish a connection and exchange streams
of data.
The Speed Index
– https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
“The Speed Index is the average
time at which visible parts of the
page are displayed. It is expressed
in milliseconds and dependent on
the size of the view port.”
Halfway through loading my site,
how much content is rendered for
my user to view?
The Test
WebPagetest Filmstrip View
3000ms (3 seconds) into page load
www.webpagetest.org
WebPagetest Filmstrip View
7000ms (7 seconds) into page load
www.webpagetest.org
– https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
“The Speed Index is the average
time at which visible parts of the
page are displayed. It is expressed
in milliseconds and dependent on
the size of the view port.”
Components of an
HTTP Request
– Chapter 10. Primer on Web Performance
Components of an
HTTP Request
– Chapter 10. Primer on Web Performance
TCP Handshake
– Chapter 2. Building Blocks of TCP
TCP Handshake
– Chapter 2. Building Blocks of TCP
TCP Slow-start
– Chapter 2. Building Blocks of TCP
14K 28K 56k 112K
Wuts up Luke!
Let’s Do It!
Critical Path CSS
Image Optimizations
SVGs
Scalable Vector Graphics
Image Compression
TinyPNG
https://tinypng.com
1.7MB 305.9kb
Image Compression
-82%
Responsive Images
Lazy Loading Images
Font Caching
Javascript
Optimizations
Render Blocking
LOADED IN
<head>
LOADED BEFORE
</body>
Minify / Concatenate
Fewer requests
Less bandwidth
Minify / Concatenate
Grunt
http://gruntjs.com
Gulp
http://gulpjs.com
CodeKit
https://incident57.com/codekit/
Content Delivery Network
DNS Prefetch
File Compression
Gzip
Wrapping up…
Questions?
redspace.com / T (902) 444.3490 FACEBOOK REDspace
TWITTER @theREDspace
LINKEDIN The REDspace
LUKE DEWITT @whatadewitt
MIKE RUDOLPH @mikerudolph_
Thank You!
Oh, by the way, we’re hiring! http://redspace.recruiterbox.com

Understanding HTTP & Web Performance