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.

1. Performance Testing
With WebPage Test

2. About Me
Bill Condo (@mavrck)
Mostly have been a LAMP Stack
developer since 1995
Organize ColumbusPHP
Agency & Startup Experience
Currently running HustleWorks

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. Performance Testing
What are we looking for?

5. What we’re covering
1. Milestone timings
2. SpeedIndex
3. Quantity based metrics
4. Rule based metrics
- Tim Kadlec (@tkadlec)

6. MilestoneS
Examples:
• First Byte
• Start Render
• DOM Elements
• Document Complete

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. Quantity Metrics
Examples:
• Total Requests
• Total Page Weight
• Total Component Weight (Images, Javascript, CSS, Fonts)

9. Rule Metrics
Examples:
• PageSpeed
• YSlow

10. Challenges
What are we up against?

11. Device Overload

12. bradfrost.com
Brad Frost

13. @bigmediumjosh
Josh Clark

14. Manual Labor

15. -Wikipedia

16. -Reddit

17. Physical Location

18. Today, we’re here
-Google Maps

19. We want to test
in many places
-Google Maps

20. Tooling
What can help us?

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. Hands-On Testing
Open Device Lab

23. YSlow (Firefox)
Provides real numbers
for your connection.
Required to manually
visit and run each test.
Not able to test other
locations.

24. HUBSPOT WEBSITE GRADER
Provides Size, Requests,
and Speed
Required to manually
submit each test

25. Pingdom Speed Test
Provides Size, Requests,
Speed, and Grade
Required to manually
submit each test

26. WebPage Test
Provides Size, Requests,
Speed, Grade, Waterfall,
Filmstrip, and Video
Required to manually
submit each test

27. SpeedCurve
Easy to understand
graphs and numbers
Built on top of WPT
Paid service

28. WebPage Test

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. 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. AUTHOR
Patrick Meenan
@patmeenan

32. Datacenter*

33. Private Instances

34. Setting Up an Environment

36. 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

37. 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

39. 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

40. Components
WPT Server
• Linux
• Apache
• PHP
WPT Driver
• Windows
• IE/FF/Chrome
• FFmpeg
NodeJS A
• Mobile
• Desktop

41. INSIDE LOOK
Let’s take a look at a setup.

42. Next Steps

43. More HARDWARE

44. More Devices

45. More LOCATIONS

46. Thank You

47. Bill Condo
bill@billcondo.com
twitter.com/mavrck
https://joind.in/15835

48. 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