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.

WebPagetest Velocity 2010


Published on

WebPagetest slides from Velocity 2010 Lightening Demos

Published in: Technology
  • Be the first to comment

WebPagetest Velocity 2010

  1. <ul><li>Eric Goldsmith </li></ul>
  2. What is <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> Tools </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> </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> </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> </li></ul></ul>- Funded by
  13. Thank you [email_address] [email_address] @GoldsmithEric We’re hiring front-end software engineers.