1

Web Performance TestingNoVa Test Automation Interest Group

Patrick MeenanTwitter: @PatMeenanpmeenan@webpagetest.orgblog.patrickmeenan.com

Google Confidential and Proprietary

Front-End vs. Back-End

2

Back-End

This is the HTML that largely contains the content of the page and defines the structure.

Front-End

CSS : Layout and style

Images

Graphical Elements

Waterfall Diagram

Base PageCSS

Images and

Graphical

Elements

Javascript

Start Render Document Complete (onLoad)

Front-End vs Back-End

7

Base Page

Back-End Processing

8

Front-End: 3.2s* Back-End: 0.010s*

*WebPagetest performance as measured by New Relic

Google Confidential and Proprietary

Measuring Performance

9

velocityconf.com/velocity2011/public/schedule/detail/18039

Active Testing

Consistent results

• Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring

Lots of detail

Availability monitoring

Not representative of actual end-user performance

• Usually tested from data centers

• Sometimes co-located with CDN provider equipment

US Broadband Bandwidth

12www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

US Broadband Latency

13www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

Bandwidth/Latency Impact

14www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

(Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)

15

BackboneTesting

ActualUsers

16

DSL – Back-End: 17%

Backbone – Back-End: 52%

When is “Done”?

Easy answer is onLoad

But…

17

When is “Done”?

18

Twitter onLoad (1.9s) Twitter end of activity (6.8s)

Synthetic Browsers

Know HOW your active testing is done

• Some only test the base page

• Synthetic browsers usually not reflective of real browser

• Real browser testing

• Connectivity (backbone, last-mile)

www.engadget.com

• Synthetic Browser: 447 requests

• IE 8: 241 requests

Real User Monitoring (RUM)

Full coverage on all pages visited by users

Real performance information for end-user experience

No availability monitoring

Limited detail

• … but getting better

Navigation Timing – IE9, Chrome, Firefox 7

window.performance.timing

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

Front-End

Back-End

Resource Timing (draft)

22w3c-test.org/webperf/specs/ResourceTiming/

Timing for every network-loaded resource

_gaq.push(['_trackPageLoadTime']);

Back-End Only

Google Confidential and Proprietary

Frontend Single Point Of Failure

27

Asynchronous Javascript

It’s not just good for web performance…

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

vs.

<script type="text/javascript">(function() {

var tw = document.createElement('script'); tw.type = 'text/javascript'; tw.async = true;tw.src = 'http://platform.twitter.com/widgets.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tw, s);

})();</script>

28

It prevents Frontend SPOF

29

User stares at a blank window for 21 seconds (usually < 2 seconds)

What it feels like

30

Testing for Frontend SPOF

blackhole.webpagetest.org (aka 72.66.115.13)

Hosts file:

72.66.115.13 ajax.googleapis.com72.66.115.13 apis.google.com72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net72.66.115.13 platform.twitter.com

WebPagetest.org:

setDnsName platform.twitter.com blackhole.webpagetest.orgnavigate your.url.com

31

Google Confidential and Proprietary

WebPagetest

32

The basics – testing “pages”

• www.webpagetest.org

• Submit an URL….

From multiple locations globally…

34

The basics – get “results”

Performance and optimization information

What it looks like

What it looks like

What if…

Comparing arbitrary tests

The comparison

More advanced capabilities

Automating Rich Applications

• Authenticating into form-protected applications

• Interacting with Web Apps (Mail, Calendar, etc)

• Testing a navigation flow from one page to another

• Execute arbitrary Javascript

REALLY Advanced Options

• Re-writing DNS lookups (directing traffic to a test/staging box)

• Custom User-Agent strings & HTTP Headers

• Pre-populating cookies

• Custom test end conditions

• Capture Dynatrace Ajax Edition sessions

• Tcpdump capture

41

Private Instances

http://sites.google.com/a/webpagetest.org/docs/private-instances

Bulk Testing

EC2 Agent Public AMI’s• US (East/West)

• Europe

• Asia (Singapore/Tokyo)

Public Projects• HTTP Archive

• Blaze Mobitest

REST API

Submit tests (API key required for public instance)

• Check status

• Fetch Result

1.XML

2.HAR

http://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis

WPT Monitor Tony Perkins (Sabre)

http://www.webpagetest.org/forums/forumdisplay.php?fid=21

HTTP Archive

http://httparchive.org/

45