Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website .

1. Why Your Slow Loading
Website Is Costing You Sales
and How to Fix It
Joe Strommen
@strommen
joe@joestrommen.com

2. Introductions
• Software Engineer for 11 years
• 2 years ago – started caring about business
• Apr 2014, founded fasterweb.io
• On the backburner (for now) 
• Software Consulting
• Specializing in web performance

3. Today we’ll learn:
1. Why your website MUST be fast to be competitive
2. How a page is loaded by the browser
3. How to measure page speed
4. 5 simple ways to speed up YOUR website
5. HTTP/2

4. Fast Websites Make More Money #1
Speeding up the fundraising site
by 60% increased donations by 14%.
Kyle Rush, Obama Campaign (2012)

5. Fast Websites Make More Money #2
Speeding up advertising load times by
roughly 1.5 seconds increased CTR by 12%.
DoubleClick (2011)

6. Fast Websites Make More Money #3
Cutting 2.2 seconds off loading time
increased conversions by 15%.
Blake Cutler, Mozilla (2010)

7. Fast Websites Make More Money #4
A 400ms increase in load time caused a
5-9% increase in site abandonment.
Nicole Sullivan, Yahoo (2008)

8. Faster sites are more successful.

9. Today we’ll learn:
1. Why your website MUST be fast to be competitive
2. How a page is loaded by the browser
3. How to measure page speed
4. 5 simple ways to speed up YOUR website
5. HTTP/2

10. How Pages are Loaded: TCP
• Bytes from A to B
• Reliable
• In-order
• Meaningless
• Connection setup: 30-100ms
• 6 connections per host
30 81 89 02 81 81 00 bd 94 f1
a0 8c 82 3e 3d 6b 83 15 34 29
4b 6f 06 21 4e 90 51 70 e7 a9
cc 44 70 77 c1 ff a0 ca ef 03
f3 fb 4e 34 63 ad e9 0f ae 6d
5c b3 b8 d9 46 7a 90 44 7f 50
51 8b 46 cb c4 83 73 6f f7 a6
90 fd 01 03 33 7c ba bc e1 03
a0 cd ca 41 1f 27 50 87 0e 14
69 b5 36 c5 e5 49 f6 04 c5 6c
c0 c7 b4 51 0c 59 ca 9c 6c 3f
d6 02 d2 82 b4 4e c4 a5 76 fb
8a 24 ae 5f e1 7d b9 de 2d 08
b9 12 25 62 b9 02 03 01 00 01

11. How Pages are Loaded: HTTP
• Works over TCP
• Download & Upload Files
• Cookies
• Caching
• GZip Compression

12. How Pages are Loaded: HTML
• References other files:
• JavaScript
• CSS
• Images
• Parsing waits for JavaScript
• JS execution waits for CSS
• Rendering waits for CSS

13. How Pages are Loaded: TLS/HTTPS
• TLS: extension of TCP
• HTTPS: HTTP over TLS
• Extra overhead:
• Key exchange
• Certificates
• Validation
HTTP HTTPS
TCP TLS

14. Today we’ll learn:
1. Why your website MUST be fast to be competitive
2. How a page is loaded by the browser
3. How to measure page speed
4. 5 simple ways to speed up YOUR website
5. HTTP/2

15. Measuring Page Speed
• Page Load Time
• Everything is finished downloading
• Default metric for Google Analytics, etc.
• Start Render Time
• Something is showing up on the screen
• DOM Content Loaded
• All scripts, etc. have run
• Speed Index

16. 2 Speed Factors: Latency & Bandwidth
• Latency: inherent delay for any request
• Limited by geography & speed of light
• Bandwidth: download speed
• Limited by infrastructure
• Download time = Latency + (size / Bandwidth)
Read this: https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

17. Typical Bandwidth, Latency
• Cable/DSL Internet
• 20 Mbps, 40ms
• 4G LTE
• 10 Mbps, 80ms
• 3G
• 1 Mbps, 300ms
• Bandwidth delay = Latency delay for 100kB
Note Mbps = megabits, not megabytes

18. Measuring Page Speed – Google Analytics
ga('create', 'UA-58954847-1', { 'siteSpeedSampleRate': 100 });
User Timings
ga('send', {
'hitType': 'timing',
'timingCategory': 'jQuery',
'timingVar': 'Load Library',
'timingValue': 20,
'timingLabel': 'Google CDN',
'page': '/my-new-page'
});

19. Measuring Page Speed – WebPageTest.org
• X-Axis = Time
• Y-Axis = HTTP Downloads
• Green = Latency
• Blue = Download

20. Waterfall Diagram
• Visualization of page HTTP requests
• Generated by Fiddler (Windows) 
• HTTP only
• HAR format (HTTP Archive)
• Includes DNS, TCP, SSL
• Browser debug tools, plugins
• webpagetest.org
• tools.pingdom.com Load Sequence for jsfiddle.net

21. Today we’ll learn:
1. Why your website MUST be fast to be competitive
2. How a page is loaded by the browser
3. How to measure page speed
4. 5 simple ways to speed up YOUR website
5. HTTP/2

22. 0. GZip Compression for Static Content
• Reduces text file size by ≈70%
• Not useful for images
• Use it!
• Please, please use it
• Be careful with GZip + secure dynamic content

23. 1. Caching Headers
• 3 Headers
• Cache-Control (e.g. “public, max-age=3600”, “private”, “no-cache, no-store”)
• Etag (file hash), Last-Modified (date/time)
• Recommended: Versioned static files
• Reference with hash, e.g.
<link href="site.css?v=za3ffbjGOWq0NBu49W9UkZzJsAlCYJzmfwKDuOAv7eM1"…
• Cache-Control: public, max-age=31536000
• ETag & Last-Modified Headers
• Downside: conditional requests, 304 Not Modified

24. Caching != Fast Webpages
• Caching helps:
• Returning visitors
• Intra-site navigation
• Caching does not help for:
• New visitors
• Frequent updates
• Yahoo cache miss rate:
• Users: 40-60%
• Page Views: 20%
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

25. 2. Optimize File Delivery
• nginx – faster file server than Apache, IIS
• Also, caching reverse proxy
• Content Delivery Network (CDN)
• Geo-distributed file servers
• Really, really good at serving files
• Downsides: purging
• Cloudflare – recommended free CDN

26. 3. Optimize Images
• Choose appropriate format
• JPEG – lots of colors, fuzzy edges
• PNG/GIF – line art, few colors
• Choose appropriate size
• Optimize them!
• Shrink up to 75%

27. 4. Bundle Resources
• One file, multiple scripts
• JavaScript or CSS
• Reduce request quantity
• Consider cacheability

28. 5. Minimize Web Fonts
• While loading…
• Use websafe font? (Firefox)
• Show no text? (Chrome)
• Streamline font weights
• Bold font vs. CSS font-weight: bold;
• Common subset: 50% smaller
• http://www.fontsquirrel.com/tools/webfont-generator

29. 6. JavaScript tricks
• PJAX (github.com/defunkt/jquery-pjax)
• Link target is fetched with AJAX, pushed into DOM & history API
• No DOMContentLoaded
• Example: www.mprnews.org
• InstantClick (instantclick.io)
• PJAX, but fetch on mouseover/touchstart
• Example: www.joestrommen.com

30. Today we’ll learn:
1. Why your website MUST be fast to be competitive
2. How a page is loaded by the browser
3. How to measure page speed
4. 5 simple ways to speed up YOUR website
5. HTTP/2

31. HTTP/2
• First update to HTTP since 1999
• Focused on performance
• Implemented in all major browsers
• Not really in servers yet…
• Only supporting CDN is Akamai
• Requires HTTPS

32. Multiplexing
• Multiple downloads, one connection
• No more latency problems
• Perf benefit…in theory
• Rumors of 10-30% improvement
• Concrete studies…?

33. Further Reading
• VelocityConf slides –
velocityconf.com/devops-web-performance-2015/public/schedule/grid/public
• Steve Souders – www.stevesouders.com
• PerfPlanet Calendar – calendar.perfplanet.com
• Twitter: #perfmatters
• My Github: github.com/strommen
• I’m always happy to discuss this stuff! joe@joestrommen.com

34. Thanks!