HubSpot Tech Talk - DIY Synthetic

Slide 1

Slide 1 text

DIY Synthetic: Private WebPagetest Magic HubSpot Tech Talk Jonathan Klein @jonathanklein Wednesday, December 11, 13

Slide 2

Slide 2 text

Slides, Links jkle.in/hubspot Wednesday, December 11, 13

Slide 3

Slide 3 text

About Me Wednesday, December 11, 13

Slide 4

Slide 4 text

About Me • Performance Engineer At Etsy Wednesday, December 11, 13

Slide 5

Slide 5 text

About Me • Performance Engineer At Etsy • I write the Etsy Site Performance Reports Wednesday, December 11, 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, December 11, 13

Slide 7

Slide 7 text

Etsy Stats Wednesday, December 11, 13

Slide 8

Slide 8 text

Etsy Stats • World’s largest handmade marketplace Wednesday, December 11, 13

Slide 9

Slide 9 text

Etsy Stats • World’s largest handmade marketplace • 1.5 billion page views/month Wednesday, December 11, 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, December 11, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Synthetic Monitoring Wednesday, December 11, 13

Slide 13

Slide 13 text

Wednesday, December 11, 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, December 11, 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, December 11, 13

Slide 21

Slide 21 text

$$$$ Wednesday, December 11, 13

Slide 22

Slide 22 text

Wednesday, December 11, 13

Slide 23

Slide 23 text

Background Wednesday, December 11, 13

Slide 24

Slide 24 text

Wednesday, December 11, 13

Slide 25

Slide 25 text

Wednesday, December 11, 13

Slide 26

Slide 26 text

Wednesday, December 11, 13

Slide 27

Slide 27 text

EC2 Test Agents Wednesday, December 11, 13

Slide 28

Slide 28 text

Wednesday, December 11, 13

Slide 29

Slide 29 text

No Built-in Automation Wednesday, December 11, 13

Slide 30

Slide 30 text

Wednesday, December 11, 13

Slide 31

Slide 31 text

Wednesday, December 11, 13

Slide 32

Slide 32 text

wpt-script Wednesday, December 11, 13

Slide 33

Slide 33 text

Wednesday, December 11, 13

Slide 34

Slide 34 text

Motivation Wednesday, December 11, 13

Slide 35

Slide 35 text

Why We Use It Wednesday, December 11, 13

Slide 36

Slide 36 text

Why We Use It • Wanted long term synthetic trending Wednesday, December 11, 13

Slide 37

Slide 37 text

Why We Use It • Wanted long term synthetic trending • Automated tests Wednesday, December 11, 13

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Easy Configuration Wednesday, December 11, 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, December 11, 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, December 11, 13

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Advanced Features Wednesday, December 11, 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, December 11, 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, December 11, 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, December 11, 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 ny-image0.etsy.com 38.106.64.125 setDns ny-image1.etsy.com 38.106.64.125 bypass_cdn.txt Wednesday, December 11, 13

Slide 54

Slide 54 text

Gathering Results Wednesday, December 11, 13

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Wednesday, December 11, 13

Slide 57

Slide 57 text

Wednesday, December 11, 13

Slide 58

Slide 58 text

Wednesday, December 11, 13

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Wednesday, December 11, 13

Slide 61

Slide 61 text

Wednesday, December 11, 13

Slide 62

Slide 62 text

Wednesday, December 11, 13

Slide 63

Slide 63 text

Disadvantages vs. Paid Tools Wednesday, December 11, 13

Slide 64

Slide 64 text

Disadvantages vs. Paid Tools • Harder to set up/maintain Wednesday, December 11, 13

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Advantages vs. Paid Tools Wednesday, December 11, 13

Slide 70

Slide 70 text

Advantages vs. Paid Tools • Cost Wednesday, December 11, 13

Slide 71

Slide 71 text

Advantages vs. Paid Tools • Cost • Flexibility Wednesday, December 11, 13

Slide 72

Slide 72 text

Advantages vs. Paid Tools • Cost • Flexibility • People know the tool Wednesday, December 11, 13

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Our Use Cases Wednesday, December 11, 13

Slide 76

Slide 76 text

WebPagetest Catchpoint Wednesday, December 11, 13

Slide 77

Slide 77 text

WebPagetest Catchpoint • Multi-page flows Wednesday, December 11, 13

Slide 78

Slide 78 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests Wednesday, December 11, 13

Slide 79

Slide 79 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing Wednesday, December 11, 13

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

WebPagetest Catchpoint • Multi-page flows • Scripted tests • High volume testing • Ad-hoc tests • DNS • API Wednesday, December 11, 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, December 11, 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, December 11, 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, December 11, 13

Slide 86

Slide 86 text

Future Work Wednesday, December 11, 13

Slide 87

Slide 87 text

Improving the Process Wednesday, December 11, 13

Slide 88

Slide 88 text

Improving the Process • Manage disk space Wednesday, December 11, 13

Slide 89

Slide 89 text

Improving the Process • Manage disk space • Multiple regions Wednesday, December 11, 13

Slide 90

Slide 90 text

Improving the Process • Manage disk space • Multiple regions • More canned scripts Wednesday, December 11, 13

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Leveraging WebPagetest Wednesday, December 11, 13

Slide 93

Slide 93 text

Leveraging WebPagetest • Front-end SPOF Wednesday, December 11, 13

Slide 94

Slide 94 text

Leveraging WebPagetest • Front-end SPOF • User Timings Wednesday, December 11, 13

Slide 95

Slide 95 text

Leveraging WebPagetest • Front-end SPOF • User Timings • Speed Index Wednesday, December 11, 13

Slide 96

Slide 96 text

Wednesday, December 11, 13

Slide 97

Slide 97 text

Speed Index Wednesday, December 11, 13

Slide 98

Slide 98 text

Speed Index • Synthetic only Wednesday, December 11, 13

Slide 99

Slide 99 text

Speed Index • Synthetic only • Used heavily inside Google Wednesday, December 11, 13

Slide 100

Slide 100 text

Speed Index • Synthetic only • Used heavily inside Google • The best metric for perceived load time Wednesday, December 11, 13

Slide 101

Slide 101 text

Speed Index • Synthetic only • Used heavily inside Google • The best metric for perceived load time • (this is what we care about) Wednesday, December 11, 13

Slide 102

Slide 102 text

Improving WebPagetest Wednesday, December 11, 13

Slide 103

Slide 103 text

WebPagetest + Vagrant Wednesday, December 11, 13

Slide 104

Slide 104 text

WebPagetest + Vagrant • Install VirtualBox Wednesday, December 11, 13

Slide 105

Slide 105 text

WebPagetest + Vagrant • Install VirtualBox • Install Vagrant Wednesday, December 11, 13

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Wednesday, December 11, 13

Slide 110

Slide 110 text

800MB Wednesday, December 11, 13

Slide 111

Slide 111 text

WebPagetest Relay -- locations.ini [WPT_Dulles_IE8] browser=IE 8 label="WebPagetest.org Dulles, VA - IE8" relayServer="http://www.webpagetest.org/" relayKey= relayLocation=Dulles_IE8 Wednesday, December 11, 13

Slide 112

Slide 112 text

webpagetest-api Wednesday, December 11, 13

Slide 113

Slide 113 text

Wednesday, December 11, 13

Slide 114

Slide 114 text

Both Are Good Options Wednesday, December 11, 13

Slide 115

Slide 115 text

Results > Tools Wednesday, December 11, 13

Slide 116

Slide 116 text

Thanks! Wednesday, December 11, 13

Slide 117

Slide 117 text

@jonathanklein [email protected] www.meetup.com/Web-Performance-Boston/ Get in Touch Wednesday, December 11, 13