DIY Synthetic: Private WebPagetest Magic

Slide 1

Slide 1 text

DIY Synthetic: Private WebPagetest Magic Velocity NY 2013 Jonathan Klein @jonathanklein Wednesday, October 16, 13

Slide 2

Slide 2 text

Slides, Links jkle.in/wpt Wednesday, October 16, 13

Slide 3

Slide 3 text

About Me Wednesday, October 16, 13

Slide 4

Slide 4 text

About Me • Performance Engineer At Etsy Wednesday, October 16, 13

Slide 5

Slide 5 text

About Me • Performance Engineer At Etsy • I write the Etsy Site Performance Reports Wednesday, October 16, 13

Slide 6

Slide 6 text

About Me • Performance Engineer At Etsy • I write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group Wednesday, October 16, 13

Slide 7

Slide 7 text

Etsy Stats Wednesday, October 16, 13

Slide 8

Slide 8 text

Etsy Stats • World’s largest handmade marketplace Wednesday, October 16, 13

Slide 9

Slide 9 text

Etsy Stats • World’s largest handmade marketplace • 1.5 billion page views/month Wednesday, October 16, 13

Slide 10

Slide 10 text

Etsy Stats • World’s largest handmade marketplace • 1.5 billion page views/month • Almost $1B in sales last year Wednesday, October 16, 13

Slide 11

Slide 11 text

+160k to a page = +12% bounce rate on mobile Wednesday, October 16, 13

Slide 12

Slide 12 text

Synthetic Monitoring Wednesday, October 16, 13

Slide 13

Slide 13 text

Wednesday, October 16, 13

Slide 14

Slide 14 text

Synthetic Monitoring Real User Monitoring Browser Instrumentation Navigation Timing API Consistent trending over time Highly variable Largely in your control Last mile difﬁculties Great for identifying regressions Great for comparing across geographies/browsers Not super realistic “Real User Monitoring” Wednesday, October 16, 13

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Wednesday, October 16, 13

Slide 21

Slide 21 text

$$$$ Wednesday, October 16, 13

Slide 22

Slide 22 text

Wednesday, October 16, 13

Slide 23

Slide 23 text

Background Wednesday, October 16, 13

Slide 24

Slide 24 text

Wednesday, October 16, 13

Slide 25

Slide 25 text

Wednesday, October 16, 13

Slide 26

Slide 26 text

Wednesday, October 16, 13

Slide 27

Slide 27 text

EC2 Test Agents Wednesday, October 16, 13

Slide 28

Slide 28 text

Wednesday, October 16, 13

Slide 29

Slide 29 text

No Built-in Automation Wednesday, October 16, 13

Slide 30

Slide 30 text

Wednesday, October 16, 13

Slide 31

Slide 31 text

Wednesday, October 16, 13

Slide 32

Slide 32 text

wpt-script Wednesday, October 16, 13

Slide 33

Slide 33 text

Wednesday, October 16, 13

Slide 34

Slide 34 text

Motivation Wednesday, October 16, 13

Slide 35

Slide 35 text

Why We Use It Wednesday, October 16, 13

Slide 36

Slide 36 text

Why We Use It • Wanted long term synthetic trending Wednesday, October 16, 13

Slide 37

Slide 37 text

Why We Use It • Wanted long term synthetic trending • Automated tests Wednesday, October 16, 13

Slide 38

Slide 38 text

Why We Use It • Wanted long term synthetic trending • Automated tests • More control Wednesday, October 16, 13

Slide 39

Slide 39 text

Why We Use It • Wanted long term synthetic trending • Automated tests • More control • Low cost Wednesday, October 16, 13

Slide 40

Slide 40 text

Easy Configuration Wednesday, October 16, 13

Slide 41

Slide 41 text

{ "server": "http://www.yourwptinstall.com", "pending_dir": "private", "locations": ["US_East_wptdriver:Firefox", "US_East_wptdriver:Chrome"], "urls": { "label": "http://www.example.com", "other_label": "http://www.anotherexample.com" }, "graphite": "graphite.example.com", "logging_ns": "webpagetest.private", "splunkLog": "/var/log/webpagetest/results.log" } Wednesday, October 16, 13

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

# Run Test */25 * * * * php run.php Wednesday, October 16, 13

Slide 47

Slide 47 text

# Run Test */25 * * * * php run.php -c foo.conf Wednesday, October 16, 13

Slide 48

Slide 48 text

# Run Test */25 * * * * php run.php -c foo.conf # Get Results * * * * * php get_results.php Wednesday, October 16, 13

Slide 49

Slide 49 text

Advanced Features Wednesday, October 16, 13

Slide 50

Slide 50 text

{ "server": "http://example.com", "pending_dir": "private", "locations": ["US_East_wptdriver:Firefox", "US_East_wptdriver:Chrome"], "urls": { "label": "http://www.example.com", "other_label": "http://www.webpagetest.org" }, "graphite": "graphite.example.com", "logging_ns": "webpagetest.private", "splunkLog": "/var/log/webpagetest/results.log", "prepend": "Login", "username": "someuser", "password": "somepassword", "run_options": { "video": 0 } } Wednesday, October 16, 13

Slide 51

Slide 51 text

{ "server": "http://example.com", "pending_dir": "private", "locations": ["US_East_wptdriver:Firefox", "US_East_wptdriver:Chrome"], "urls": { "label": "http://www.example.com", "other_label": "http://www.webpagetest.org" }, "graphite": "graphite.example.com", "logging_ns": "webpagetest.private", "splunkLog": "/var/log/webpagetest/results.log", "prepend": ["BlockThirdParty", "bypass_cdn.txt"], "run_options": { "video": 0 } } Wednesday, October 16, 13

Slide 52

Slide 52 text

foreach ($prepends as $prepend) { if (file_exists($scripts_dir . $prepend)) { $script .= file_get_contents($scripts_dir . $prepend); } elseif (method_exists($this, $prepend)) { $script .= $this->$prepend(); } } Wednesday, October 16, 13

Slide 53

Slide 53 text

setDns site.etsystatic.com 38.106.64.123 setDns img0.etsystatic.com 38.106.64.125 setDns img1.etsystatic.com 38.106.64.125 setDns img2.etsystatic.com 38.106.64.125 setDns img3.etsystatic.com 38.106.64.125 setDns ny-image0.etsy.com 38.106.64.125 setDns ny-image1.etsy.com 38.106.64.125 setDns ny-image2.etsy.com 38.106.64.125 setDns ny-image3.etsy.com 38.106.64.125 bypass_cdn.txt Wednesday, October 16, 13

Slide 54

Slide 54 text

Gathering Results Wednesday, October 16, 13

Slide 55

Slide 55 text

log($result); } // Graphite $grapher = new Grapher($config['graphite'], $logging_ns); $grapher->graphResults($results); Wednesday, October 16, 13

Slide 56

Slide 56 text

Wednesday, October 16, 13

Slide 57

Slide 57 text

Wednesday, October 16, 13

Slide 58

Slide 58 text

Wednesday, October 16, 13

Slide 59

Slide 59 text

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics Wednesday, October 16, 13

Slide 60

Slide 60 text

Wednesday, October 16, 13

Slide 61

Slide 61 text

Wednesday, October 16, 13

Slide 62

Slide 62 text

Wednesday, October 16, 13

Slide 63

Slide 63 text

Disadvantages vs. Paid Tools Wednesday, October 16, 13

Slide 64

Slide 64 text

Disadvantages vs. Paid Tools • Harder to set up/maintain Wednesday, October 16, 13

Slide 65

Slide 65 text

Disadvantages vs. Paid Tools • Harder to set up/maintain • Functionality Wednesday, October 16, 13

Slide 66

Slide 66 text

Disadvantages vs. Paid Tools • Harder to set up/maintain • Functionality • Regions Wednesday, October 16, 13

Slide 67

Slide 67 text

Disadvantages vs. Paid Tools • Harder to set up/maintain • Functionality • Regions • Full page oriented Wednesday, October 16, 13

Slide 68

Slide 68 text

Disadvantages vs. Paid Tools • Harder to set up/maintain • Functionality • Regions • Full page oriented • Less consistent Wednesday, October 16, 13

Slide 69

Slide 69 text

Advantages vs. Paid Tools Wednesday, October 16, 13

Slide 70

Slide 70 text

Advantages vs. Paid Tools • Cost Wednesday, October 16, 13

Slide 71

Slide 71 text

Advantages vs. Paid Tools • Cost • Flexibility Wednesday, October 16, 13

Slide 72

Slide 72 text

Advantages vs. Paid Tools • Cost • Flexibility • People know the tool Wednesday, October 16, 13

Slide 73

Slide 73 text

Advantages vs. Paid Tools • Cost • Flexibility • People know the tool • Multi-page flows Wednesday, October 16, 13

Slide 74

Slide 74 text

Advantages vs. Paid Tools • Cost • Flexibility • People know the tool • Multi-page flows • Scripting Wednesday, October 16, 13

Slide 75

Slide 75 text

Our Use Cases Wednesday, October 16, 13

Slide 76

Slide 76 text

WebPagetest Catchpoint Wednesday, October 16, 13

Slide 77

Slide 77 text

WebPagetest Catchpoint • Multi-page flows Wednesday, October 16, 13

Slide 78

Slide 78 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests Wednesday, October 16, 13

Slide 79

Slide 79 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing Wednesday, October 16, 13

Slide 80

Slide 80 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests Wednesday, October 16, 13

Slide 81

Slide 81 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS Wednesday, October 16, 13

Slide 82

Slide 82 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS • API Wednesday, October 16, 13

Slide 83

Slide 83 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS • API • Single Object Tests Wednesday, October 16, 13

Slide 84

Slide 84 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS • API • Single Object Tests • Multiple locations Wednesday, October 16, 13

Slide 85

Slide 85 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS • API • Single Object Tests • Multiple locations • Comparisons Wednesday, October 16, 13

Slide 86

Slide 86 text

Future Work Wednesday, October 16, 13

Slide 87

Slide 87 text

Improving the Process Wednesday, October 16, 13

Slide 88

Slide 88 text

Improving the Process • Manage disk space Wednesday, October 16, 13

Slide 89

Slide 89 text

Improving the Process • Manage disk space • Multiple regions Wednesday, October 16, 13

Slide 90

Slide 90 text

Improving the Process • Manage disk space • Multiple regions • More canned scripts Wednesday, October 16, 13

Slide 91

Slide 91 text

Improving the Process • Manage disk space • Multiple regions • More canned scripts • Automate upgrades Wednesday, October 16, 13

Slide 92

Slide 92 text

Leveraging WebPagetest Wednesday, October 16, 13

Slide 93

Slide 93 text

Leveraging WebPagetest • Front-end SPOF Wednesday, October 16, 13

Slide 94

Slide 94 text

Leveraging WebPagetest • Front-end SPOF • User Timings (AFT) Wednesday, October 16, 13

Slide 95

Slide 95 text

Leveraging WebPagetest • Front-end SPOF • User Timings (AFT) • Speed Index Wednesday, October 16, 13

Slide 96

Slide 96 text

Wednesday, October 16, 13

Slide 97

Slide 97 text

Improving WebPagetest Wednesday, October 16, 13

Slide 98

Slide 98 text

WebPagetest + Vagrant Wednesday, October 16, 13

Slide 99

Slide 99 text

WebPagetest + Vagrant • Install VirtualBox Wednesday, October 16, 13

Slide 100

Slide 100 text

WebPagetest + Vagrant • Install VirtualBox • Install Vagrant Wednesday, October 16, 13

Slide 101

Slide 101 text

WebPagetest + Vagrant • Install VirtualBox • Install Vagrant • https://gist.github.com/jklein/6992296 Wednesday, October 16, 13

Slide 102

Slide 102 text

WebPagetest + Vagrant • Install VirtualBox • Install Vagrant • https://gist.github.com/jklein/6992296 •vagrant up Wednesday, October 16, 13

Slide 103

Slide 103 text

WebPagetest + Vagrant • Install VirtualBox • Install Vagrant • https://gist.github.com/jklein/6992296 •vagrant up • http://localhost:8080 Wednesday, October 16, 13

Slide 104

Slide 104 text

Wednesday, October 16, 13

Slide 105

Slide 105 text

800MB Wednesday, October 16, 13

Slide 106

Slide 106 text

webpagetest-api Wednesday, October 16, 13

Slide 107

Slide 107 text

Wednesday, October 16, 13

Slide 108

Slide 108 text

Both Are Good Options Wednesday, October 16, 13

Slide 109

Slide 109 text

Results > Tools Wednesday, October 16, 13

Slide 110

Slide 110 text

Thanks! Wednesday, October 16, 13

Slide 111

Slide 111 text

@jonathanklein jonathan@etsy.com www.etsy.com/careers Get in Touch Wednesday, October 16, 13