WebPagetest Velocity 2010

2,305 views

Published on

WebPagetest slides from Velocity 2010 Lightening Demos

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,305
On SlideShare
0
From Embeds
0
Number of Embeds
208
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebPagetest Velocity 2010

  1. WebPagetest.org <ul><li>Eric Goldsmith </li></ul>
  2. What is WebPagetest.org <ul><li>Core technology developed for internal testing at AOL </li></ul><ul><ul><li>Created and maintained by Pat Meenan </li></ul></ul><ul><ul><li>Open sourced in Jan ‘08 </li></ul></ul><ul><li>Public hosted testing system released in May ’08 </li></ul><ul><ul><li>Also available as DIY, for private or internal testing </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Web page load times in IE (v7 & 8) </li></ul></ul><ul><ul><li>Object-level timing details and visualizations </li></ul></ul><ul><ul><li>Multiple connection speeds & test locations </li></ul></ul><ul><ul><li>Optimization report suggests performance improvements </li></ul></ul><ul><ul><li>Share test results and view historic performance </li></ul></ul>
  3. What’s new? <ul><li>More test locations: </li></ul><ul><li>Custom bandwidth configuration </li></ul><ul><li>Browser resource utilization info (CPU & network bandwidth) </li></ul><ul><li>Visual performance comparisons </li></ul><ul><ul><li>Filmstrip view </li></ul></ul><ul><ul><li>Full-motion video </li></ul></ul><ul><li>HTTP Archive (HAR) export </li></ul>
  4. Using WebPagetest <ul><li>Basic functionality covered in last year’s deck </li></ul><ul><ul><li>assets.en.oreilly.com/1/event/29/Performance Tools Presentation.zip </li></ul></ul><ul><li>Will only cover new functionality here… </li></ul>
  5. Getting started – standard test Enter URL to test Choose test location Choose browser and pre-defined connection type Set custom connection parameters - or -
  6. Test results – resource utilization <ul><li>Waterfall diagram now shows CPU and bandwidth utilization </li></ul>Start Render Doc Complete What’s causing this gap? Here’s a clue … CPU spiked for > 7s
  7. Getting started – visual comparison Enter several URLs to compare Choose from a list of pre-defined pages - or -
  8. Visual comparison options <ul><li>Default test configuration </li></ul><ul><ul><li>For each URL: </li></ul></ul><ul><ul><ul><li>3 first-view tests </li></ul></ul></ul><ul><ul><ul><li>run from 'Dulles, VA - 1.5Mbps ADSL' </li></ul></ul></ul><ul><ul><ul><li>median run used for comparison </li></ul></ul></ul><ul><ul><ul><li>results publically available </li></ul></ul></ul><ul><li>Other configurations possible: </li></ul>Select this option when running tests Then view test history, select the tests and click Compare
  9. Visual comparison – results <ul><li>Filmstrip view </li></ul><ul><ul><li>Start Render for both sites ~ 1.5s – but very different user experiences </li></ul></ul><ul><ul><li>Site 2 doesn’t render until the 6.0s mark </li></ul></ul>
  10. Visual comparison – results cont’d Click label for waterfall diagram Adjust thumbnail size and time granularity
  11. HTTP Archive (HAR) export <ul><li>An open format for archiving and exchanging performance results </li></ul><ul><ul><li>groups.google.com/group/http-archive-specification </li></ul></ul><ul><li>Originally created by Firebug and HTTPWatch </li></ul><ul><ul><li>Now supported by nearly a dozen tools (and growing) </li></ul></ul><ul><ul><li>groups.google.com/group/http-archive-specification/web/har-adopters </li></ul></ul><ul><li>Including WebPagetest… </li></ul>
  12. What’s next? <ul><li>UI redesign – by real UI designers! </li></ul><ul><li>Simultaneously view (and scroll) filmstrip and waterfall </li></ul><ul><li>Even more test locations </li></ul><ul><ul><li>Tentative plans for Brazil, Africa, and India </li></ul></ul><ul><li>HTTP Archive (HAR) import </li></ul><ul><ul><li>Ability to visualize and compare multiple HAR files </li></ul></ul><ul><li>Standardizing interfaces to support integration with other tools </li></ul><ul><ul><li>groups.google.com/group/web-testing-framework </li></ul></ul>- Funded by
  13. Thank you [email_address] [email_address] @GoldsmithEric We’re hiring front-end software engineers. corp.aol.com/careers

×