Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance Testing
With WebPage Test
About Me
Bill Condo (@mavrck)
Mostly have been a LAMP Stack
developer since 1995
Organize ColumbusPHP
Agency & Startup Exp...
What we’re covering
• What is [Front-End] Performance Testing?
• What are the challenges?
• What tooling is available?
• W...
Performance Testing
What are we looking for?
What we’re covering
1. Milestone timings
2. SpeedIndex
3. Quantity based metrics
4. Rule based metrics
- Tim Kadlec (@tkad...
MilestoneS
Examples:
• First Byte
• Start Render
• DOM Elements
• Document Complete
SPEED INDEX
“The Speed Index is the average
time at which visible parts of
the page are displayed. It is
expressed in mill...
Quantity Metrics
Examples:
• Total Requests
• Total Page Weight
• Total Component Weight (Images, Javascript, CSS, Fonts)
Rule Metrics
Examples:
• PageSpeed
• YSlow
Challenges
What are we up against?
Device Overload
bradfrost.com
Brad Frost
@bigmediumjosh
Josh Clark
Manual Labor
-Wikipedia
-Reddit
Physical Location
Today, we’re here
-Google Maps
We want to test
in many places
-Google Maps
Tooling
What can help us?
Hands-On Testing
Easy to do and 100%
real experience
Manually need to time
and record, and not
scalable
Helsinki Open Devi...
Hands-On Testing
Open Device Lab
YSlow (Firefox)
Provides real numbers
for your connection.
Required to manually
visit and run each test.
Not able to test ...
HUBSPOT WEBSITE GRADER
Provides Size, Requests,
and Speed
Required to manually
submit each test
Pingdom Speed Test
Provides Size, Requests,
Speed, and Grade
Required to manually
submit each test
WebPage Test
Provides Size, Requests,
Speed, Grade, Waterfall,
Filmstrip, and Video
Required to manually
submit each test
SpeedCurve
Easy to understand
graphs and numbers
Built on top of WPT
Paid service
WebPage Test
Webpage test
• Public website that you can request a
test for any publicly available website
• Requests limited per day
• ...
History
“WebPagetest is an open source project that is primarily being
developed and supported by Google as part of our ef...
AUTHOR
Patrick Meenan
@patmeenan
Datacenter*
Private Instances
Setting Up an Environment
Our HOST
Intel NUC
500G M-SATA
1TB HDD
32G USB Flash
VMWare ESXi
“Fast” Virtual Machines
“Slow” Virtual Machines
Intel Cor...
Our SETUP
Intel NUC
WPT Host
IE 9 / Win 7
VMWare ESXi 6
Tablet
Phone
WPT Server

Ubuntu 14.04
IE 11 / Win 7
IE 10 / Win 7
Because timing can be different on virtual machines we go 

into this understanding that our results will be off compared ...
Components
WPT Server
• Linux
• Apache
• PHP
WPT Driver
• Windows
• IE/FF/Chrome
• FFmpeg
NodeJS A
• Mobile
• Desktop
INSIDE LOOK
Let’s take a look at a setup.
Next Steps
More HARDWARE
More Devices
More LOCATIONS
Thank You
Bill Condo

bill@billcondo.com
twitter.com/mavrck
https://joind.in/15835
Notes
• WebPagetest Documentation https://sites.google.com/a/webpagetest.org/docs/private-instances
• Tim Kadlec: Budget M...
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Upcoming SlideShare
Loading in …5
×

Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)

901 views

Published on

Today the average website loads more than 1.5MB of assets including images, scripts and other external data. This causes frustrating delays for site visitors and often leads to abandoned visits. As mobile data is expensive in many developing countries, cost for each page view is also significant consideration.

A number of tools exist to help optimize sites and we’ll introduce and setup a private instance of the popular WebPagetest tool. WPT covers load time, web server compression and caching settings, and timeline based screen shots through the duration of the page load.

Published in: Internet
  • Be the first to comment

Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)

  1. 1. Performance Testing With WebPage Test
  2. 2. About Me Bill Condo (@mavrck) Mostly have been a LAMP Stack developer since 1995 Organize ColumbusPHP Agency & Startup Experience Currently running HustleWorks
  3. 3. What we’re covering • What is [Front-End] Performance Testing? • What are the challenges? • What tooling is available? • WebPage Test • How to setup a testing environment • Next Steps
  4. 4. Performance Testing What are we looking for?
  5. 5. What we’re covering 1. Milestone timings 2. SpeedIndex 3. Quantity based metrics 4. Rule based metrics - Tim Kadlec (@tkadlec)
  6. 6. MilestoneS Examples: • First Byte • Start Render • DOM Elements • Document Complete
  7. 7. SPEED INDEX “The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port.” - webpagetest.org
  8. 8. Quantity Metrics Examples: • Total Requests • Total Page Weight • Total Component Weight (Images, Javascript, CSS, Fonts)
  9. 9. Rule Metrics Examples: • PageSpeed • YSlow
  10. 10. Challenges What are we up against?
  11. 11. Device Overload
  12. 12. bradfrost.com Brad Frost
  13. 13. @bigmediumjosh Josh Clark
  14. 14. Manual Labor
  15. 15. -Wikipedia
  16. 16. -Reddit
  17. 17. Physical Location
  18. 18. Today, we’re here -Google Maps
  19. 19. We want to test in many places -Google Maps
  20. 20. Tooling What can help us?
  21. 21. Hands-On Testing Easy to do and 100% real experience Manually need to time and record, and not scalable Helsinki Open Device Lab
  22. 22. Hands-On Testing Open Device Lab
  23. 23. YSlow (Firefox) Provides real numbers for your connection. Required to manually visit and run each test. Not able to test other locations.
  24. 24. HUBSPOT WEBSITE GRADER Provides Size, Requests, and Speed Required to manually submit each test
  25. 25. Pingdom Speed Test Provides Size, Requests, Speed, and Grade Required to manually submit each test
  26. 26. WebPage Test Provides Size, Requests, Speed, Grade, Waterfall, Filmstrip, and Video Required to manually submit each test
  27. 27. SpeedCurve Easy to understand graphs and numbers Built on top of WPT Paid service
  28. 28. WebPage Test
  29. 29. Webpage test • Public website that you can request a test for any publicly available website • Requests limited per day • Can test from locations around the world and from within providers such as Amazon Web Services (AWS) • Provides results from a single test or you can aggregate from multiple runs webpagetest.org
  30. 30. History “WebPagetest is an open source project that is primarily being developed and supported by Google as part of our efforts to make the web faster. WebPagetest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license.” - webpagetest.org
  31. 31. AUTHOR Patrick Meenan @patmeenan
  32. 32. Datacenter*
  33. 33. Private Instances
  34. 34. Setting Up an Environment
  35. 35. Our HOST Intel NUC 500G M-SATA 1TB HDD 32G USB Flash VMWare ESXi “Fast” Virtual Machines “Slow” Virtual Machines Intel Core i5 16G RAM
  36. 36. Our SETUP Intel NUC WPT Host IE 9 / Win 7 VMWare ESXi 6 Tablet Phone WPT Server
 Ubuntu 14.04 IE 11 / Win 7 IE 10 / Win 7
  37. 37. Because timing can be different on virtual machines we go 
 into this understanding that our results will be off compared 
 to real world numbers Quick Note
  38. 38. Components WPT Server • Linux • Apache • PHP WPT Driver • Windows • IE/FF/Chrome • FFmpeg NodeJS A • Mobile • Desktop
  39. 39. INSIDE LOOK Let’s take a look at a setup.
  40. 40. Next Steps
  41. 41. More HARDWARE
  42. 42. More Devices
  43. 43. More LOCATIONS
  44. 44. Thank You
  45. 45. Bill Condo
 bill@billcondo.com twitter.com/mavrck https://joind.in/15835
  46. 46. Notes • WebPagetest Documentation https://sites.google.com/a/webpagetest.org/docs/private-instances • Tim Kadlec: Budget Metrics http://timkadlec.com/2014/11/performance-budget-metrics/ • WPT: Speed Index https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index • Patrick Meenan: WPT Data Center Tour
 http://blog.patrickmeenan.com/2014/09/updated-webpagetest-data-center-tour.html • Patrick Meenan: WebPagetest Private Instances (Slides) http://www.slideshare.net/patrickmeenan/velocity-2014-nyc- web-pagetest-private-instances

×