Web Performance Group @ Meetup

1

Web Performance 101

Jeremy Solarz

@jeremysolarz

Web Performance Group @ Meetup

2

What next?

• What is “Web Performance”

• Money ≠ Performance?

• Experiments

• Where is the time?

• Follow the Rules!

• Toolbelt

Web Performance Group @ Meetup

3

What is performance

for the JavaScript

folks…

Stoyan Stefanov,

JSMentors

http://velocityconf.com/velocity2010/public/schedule/detail/13019

Web Performance Group @ Meetup

4

What means slow

• Pain = slow, Study form User Interface Engineering

http://www.uie.com/articles/download_time/

• More on that at…

http://www.phpied.com/psychology-of-performance/

Web Performance Group @ Meetup

5

What’s “Good Performance”

• 0.1 seconds, instantaneous response

• 1 second keeps the user's flow of thought seamless.

• 10 seconds keeps the user's attention.

• Compared to “Blink of an eye”: 0.3 – 0.4s

http://www.useit.com/alertbox/response-times.html

Web Performance Group @ Meetup

6

Tip

• Progressive Rendering

Part 1

Part 2 Part 3

Web Performance Group @ Meetup

7

Money ≠ Performance?

Web Performance Group @ Meetup

8

http://velocityconf.com/velocity2010/public/schedule/detail/13023

Web Performance Group @ Meetup

9

http://velocityconf.com/velocity2010/public/schedule/detail/13023

Web Performance Group @ Meetup

10

http://velocityconf.com/velocity2010/public/schedule/detail/13023

Web Performance Group @ Meetup

11

What does this mean?

• Losing Visitors

• Losing Sales

• Losing Ad-revenue

• Wasting SEO/SEM effort

• Much more $$$ on bandwidth and servers

Web Performance Group @ Meetup

12

Example

• “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

http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx

Web Performance Group @ Meetup

13

What MS did..

• Artificial 1s delay = 2.8% reduction in revenue/user (Bing)

http://velocityconf.com/velocity2009/public/schedule/detail/8523

Disti

nct

Quer

ies/

User

Quer

yRe

finem

ent

Reve

nue/

User

Any C

licks

Satis

facti

on

Tim

e to

Clic

k(in

crea

se in

ms)

50ms - - - - - -200ms - - - -0.3% -0.4% 500500ms - -0.6% -1.2% -1.0% -0.9% 1200

1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 19002000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100

Web Performance Group @ Meetup

14

What Google did…d

ail

y s

ea

rch

es

pe

r u

se

r re

lati

ve

to

co

ntr

ol

w k1 w k2 w k3 w k4 w k5 w k6

-1%

-0.8

%-0

.6%

-0.4

%-0

.2%

0%

0.2

%

2 0 0 m s d e la y4 0 0 m s d e la y

a c tua ltre nd

Im p a c t o f P o s t-he a d e r D e la ys O ve r Tim e

Web Performance Group @ Meetup

15

Where is the time?

• 80% of the page load time is spent outside the data centre!!!

Steve Souders “High-Performance Websites

Web Performance Group @ Meetup

16

The Building Blocks of #WebPerf

http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve-thair

Web Performance Group @ Meetup

17

Follow the Rules!

Web Performance Group @ Meetup

18

Gooles Rules• Avoid bad requests • Avoid CSS expressions • Combine external CSS • Combine external JavaScript • Defer loading of JavaScript • Enable compression • Leverage browser caching • Leverage proxy caching • Minify CSS • Minify HTML • Minify JavaScript • Minimize request size • Minimize DNS lookups • Minimize redirects

• Optimize images • Optimize the order of styles

and scripts • Parallelize downloads across

hostnames • Put CSS in the document head • Remove unused CSS • Serve resources from a

consistent URL • Serve scaled images • Serve static content from a

cookieless domain • Specify a character set early • Specify image dimensions • Use efficient CSS selectors

http://code.google.com/speed/page-speed/docs/rules_intro.html

Web Performance Group @ Meetup

19

Yahoo’s Rules• Minimize HTTP Requests • Use a Content Delivery Network • Add an Expires or a Cache-• Control Header • Gzip Components • Put StyleSheets at the Top • Put Scripts at the Bottom • Avoid CSS Expressions • Make JavaScript and CSS • External • Reduce DNS Lookups • Minify JavaScript and CSS • Avoid Redirects • Remove Duplicate Scripts

• Configure ETags • Make AJAX Cacheable • Use GET for AJAX Requests • Reduce the Number of DOM

Elements • No 404s • Reduce Cookie Size • Use Cookie-Free Domains for Components • Avoid Filters • Do Not Scale Images in HTML • Make favicon.ico Small &

Cacheable

http://developer.yahoo.com/yslow/help/#guidelines

Web Performance Group @ Meetup

20

What is important?!

• Reduce Page Size (<500Kb) • Enable (Gzip) Compression, even behind Proxies, http://

velocityconf.com/velocity2010/public/schedule/detail/14334

• Reduce the number of roundtrips (<40 per page…) • Structure the page (to improve render & download)

– CSS First – Javascript last

• Lossy Images, http://www.phpied.com/overlooked-optimizations-images/

• Cache, Cache, Cache

Web Performance Group @ Meetup

21

Impact?

• Your page download times will drop by ~50%

Web Performance Group @ Meetup

22

Toolbelt

Web Performance Group @ Meetup

23

Client-side

• ySlow (Firefox)

• PageSpeed (Firefox)

• Firebug (Firefox)

• HTTPWatch (Firefox & IE)

• Dynatrace Ajax Edition (IE only, Firefox)

Web Performance Group @ Meetup

24

Check first

• Analysis the waterfall graph – Look for render start time – Script blocking – # objects, http://mir.aculo.us/dom-monster/

• Headers– Not Gzip’d – No Expires or Cache Control Headers – 2 seconds Keep-Alive??

Web Performance Group @ Meetup

25

Online• WebPageTest.org, http://www.webpagetest.org/ • Showslow, http://www.showslow.com/ • Pagespeed Online, http://

pagespeed.googlelabs.com/pagespeed/ • Smush It (image analysis) - http://www.smushit.com/

ysmush.it/• Browsermob, https://browsermob.com/

performance-testing • HTTP Archive, http://httparchive.org/ • GTMetrix - http://gtmetrix.com/ • Yottaa - http://www.yottaa.com/ • RedBot (cache analysis), http://redbot.org/

Web Performance Group @ Meetup

26

Out of the box

• Google Mod_pagespeed - http://code.google.com/speed/pagespeed/docs/module.html

• Aptimize – www.aptimize.com • Webo - http://www.webogroup.com/home/site-

speedup/ • Strangeloop -

http://www.strangeloopnetworks.com/ • Blaze IO - http://www.blaze.io/ • DSA “Dynamic Site Acceleration” – Cotendo,

Akamai, Limelight, CDNetworks etc

Web Performance Group @ Meetup

27

Reference

• Steve Souder’s blog, http://www.stevesouders.com/blog/ • http://www.phpied.com/category/performance/, Stoyan Stefanov• WebPerformanceToday, http://www.webperformancetoday.com/ • Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/ • Sergey Chernvshev, http://www.sergeychernyshev.com/talks/

Web_Performance • http://zoompf.com/blog, Billy Hoffman• http://developer.yahoo.com/performance/ Yahoo Performance Team• http://velocityconf.com, Conference about performance => Velocity

(awesome slides + videos for free…)• TheOpsMgr Blog - http://theopsmgr.seriticonsulting.com/ • UK Broadband stats -

http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx • Browser Usage Stats - http://www.w3counter.com/globalstats.php • http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-

to-know-about-web-performance/, More stats about impact of Web Performance

Web Performance Group @ Meetup

28

?

Web Performance Group @ Meetup

29

Last words

• Please review the Meetup on Meetup.com

• Next Meetup => Thursday, Oktober 6th 2011