Post on 14-Apr-2017
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 View3000ms (3 seconds) into page load
www.webpagetest.org
WebPagetest Filmstrip View7000ms (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 anHTTP Request
– Chapter 10. Primer on Web Performance
Components of anHTTP 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
SVGsScalable Vector Graphics
Image Compression
TinyPNGhttps://tinypng.com
1.7MB 305.9kb
Image Compression
-82%
Responsive Images
Lazy Loading Images
Font Caching
JavascriptOptimizations
Render BlockingLOADED IN
<head>
LOADED BEFORE
</body>
Minify / Concatenate
Fewer requestsLess bandwidth
Minify / Concatenate
Grunthttp://gruntjs.com
Gulphttp://gulpjs.com
CodeKithttps://incident57.com/codekit/
Content Delivery Network
DNS Prefetch
File CompressionGzip
Wrapping up…
Questions?
redspace.com / T (902) 444.3490 FACEBOOK REDspaceTWITTER @theREDspaceLINKEDIN The REDspace
LUKE DEWITT @whatadewittMIKE RUDOLPH @mikerudolph_
Thank You!
Oh, by the way, we’re hiring! http://redspace.recruiterbox.com