Why Your Slow Loading Website Is Costing You Sales

and How to Fix ItJoe Strommen@strommen

joe@joestrommen.com

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

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

Fast Websites Make More Money #1

Speeding up the fundraising site by 60% increased donations by 14%.

Kyle Rush, Obama Campaign (2012)

Fast Websites Make More Money #2

Speeding up advertising load times by roughly 1.5 seconds increased CTR by 12%.

DoubleClick (2011)

Fast Websites Make More Money #3

Cutting 2.2 seconds off loading time increased conversions by 15%.

Blake Cutler, Mozilla (2010)

Fast Websites Make More Money #4

A 400ms increase in load time caused a 5-9% increase in site abandonment.

Nicole Sullivan, Yahoo (2008)

Faster sites are more successful.

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

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

How Pages are Loaded: HTTP

• Works over TCP

• Download & Upload Files

• Cookies

• Caching

• GZip Compression

How Pages are Loaded: HTML

• References other files:• JavaScript• CSS• Images

• Parsing waits for JavaScript

• JS execution waits for CSS

• Rendering waits for CSS

How Pages are Loaded: TLS/HTTPS

• TLS: extension of TCP

• HTTPS: HTTP over TLS

• Extra overhead:• Key exchange• Certificates• Validation

HTTP HTTPS

TCP TLS

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

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

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/

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

Measuring Page Speed – Google Analyticsga('create', 'UA-58954847-1', { 'siteSpeedSampleRate': 100 });

User Timingsga('send', { 'hitType': 'timing', 'timingCategory': 'jQuery', 'timingVar': 'Load Library', 'timingValue': 20, 'timingLabel': 'Google CDN', 'page': '/my-new-page'});

Measuring Page Speed – WebPageTest.org

• X-Axis = Time

• Y-Axis = HTTP Downloads

• Green = Latency

• Blue = Download

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

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

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

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

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/

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

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%

4. Bundle Resources

• One file, multiple scripts• JavaScript or CSS

• Reduce request quantity

• Consider cacheability

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

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

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

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

Multiplexing

• Multiple downloads, one connection

• No more latency problems

• Perf benefit…in theory• Rumors of 10-30% improvement• Concrete studies…?

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

Thanks!