High Speed Web Sites At Scale

Buddy Brewer

About BuddyI build web performance monitoring products and help companies make their sites faster

From San Francisco Bay Area, California

Co-Founder Log-Normal, Inc.

http://lognormal.com

@bbrewer

Does speed matter?How fast is my site?

What can I do about it?

Does speed matter?How fast is my site?

What can I do about it?

In 2006, the average online shopper expected a web page to load in 4 seconds. Today, that same shopper expects your page to load in 2 seconds or less. (Forrester Consulting)

A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions. (Aberdeen Group)

One e-commerce company found that every 100ms delay cost them 1% of sales. (Amazon.com)

Does speed matter?How fast is my site?

What can I do about it?

Synthetic monitoring

Synthetic: Benefits• Object-level response times• Visibility into third-party performance• Visibility into HTTP headers (caching, compression, etc)• Can test parts of your site that aren’t frequented by users• Can get back-end performance for older browsers

Synthetic: Drawbacks• Not representative of real users• Limited coverage of popular browsers• Limited insight into mobile devices and connections• Sometimes limited geographic coverage• Must know in advance what parts of your site you want to analyze• Results can be “gamed” by clever third party vendors

Real User Monitoring

http://www.flickr.com/photos/criminalintent/97181432/

Real User Monitoring: Benefits• Represents the “truth” – by measuring real visitors to your site• You automatically measure the parts of your site that matter to users• Total browser coverage (as long as they support Javascript)• Works equally well on today’s mobile and desktop web browsers• Difficult for third party vendors to game• Can measure performance in the context of business goals (conversions, etc)

Navigation Timing

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Real User Monitoring: Drawbacks• No object-level response times (yet)• You have to add code to your site• User privacy concerns must be navigated• No back-end performance data for legacy browsers

Resources• Free / open source monitoring tools

• Synthetic: WebPageTest (http://www.webpagetest.org)• Real user: boomerang.js (http://github.com/yahoo/boomerang)

• Plenty of commercial options too

Does speed matter?How fast is my site?

What can I do about it?

Use the browser cache

Source: http://httparchive.org/interesting.php#max-age

HTTP 1.0 – Expires: HTTP 1.1 - Cache-Control: max-age

Watch out for Etags!

Compress, shed weight, limit requests

http://httparchive.org/interesting.php#onLoad

Compress, shed weight, limit requests

http://httparchive.org/interesting.php#onLoad

• Make sure Gzip is turned on!• Consider explicitly testing for Gzip support

• Google found 15% of browsers that support Gzip don’t say so• Optimize images (JPEG metadata, colors/channels, smush.it)• CSS sprites, JS minify, combine stylesheets and JS files where possible

Watch out for third parties

http://httparchive.org/trends.php#numDomains

Consider using a content optimizer

Summary

• Make end user performance a priority• Measure your site constantly• Treat performance like a feature

Большое спасибо

http://lognormal.com

@bbrewer