webpagetest velocity 2010

13
WebPagetest.org Eric Goldsmith

Upload: eric-goldsmith

Post on 04-Dec-2014

2.063 views

Category:

Technology


0 download

DESCRIPTION

WebPagetest slides from Velocity 2010 Lightening Demos

TRANSCRIPT

Page 1: WebPagetest Velocity 2010

WebPagetest.orgEric Goldsmith

Page 2: WebPagetest Velocity 2010

p. 2

What is WebPagetest.org Core technology developed for internal testing at AOL

- Created and maintained by Pat Meenan- Open sourced in Jan ‘08

Public hosted testing system released in May ’08- Also available as DIY, for private or internal testing

Features- Web page load times in IE (v7 & 8)- Object-level timing details and visualizations- Multiple connection speeds & test locations- Optimization report suggests performance improvements- Share test results and view historic performance

Page 3: WebPagetest Velocity 2010

p. 3

What’s new? More test locations:

Custom bandwidth configuration

Browser resource utilization info (CPU & network bandwidth)

Visual performance comparisons- Filmstrip view- Full-motion video

HTTP Archive (HAR) export

Page 4: WebPagetest Velocity 2010

p. 4

Using WebPagetest

Basic functionality covered in last year’s deck- assets.en.oreilly.com/1/event/29/Performance Tools Presentation.zip

Will only cover new functionality here…

Page 5: WebPagetest Velocity 2010

p. 5

Getting started – standard test

Enter URL to test

Choose test location

Choose browser and pre-defined connection type

Set custom connection parameters- or -

Page 6: WebPagetest Velocity 2010

p. 6

Test results – resource utilization Waterfall diagram now shows CPU and bandwidth utilization

Start Render

Doc Complete

What’s causing this gap?

Here’s a clue … CPU spiked for > 7s

Page 7: WebPagetest Velocity 2010

p. 7

Getting started – visual comparison

Enter several URLs to compare

Choose from a list of pre-defined pages

- or -

Page 8: WebPagetest Velocity 2010

p. 8

Visual comparison options Default test configuration

- For each URL:

- 3 first-view tests

- run from 'Dulles, VA - 1.5Mbps ADSL'

- median run used for comparison

- results publically available

Other configurations possible:

Select this option when running tests

Then view test history, select the tests and click Compare

Page 9: WebPagetest Velocity 2010

p. 9

Visual comparison – results Filmstrip view

- Start Render for both sites ~ 1.5s – but very different user experiences

- Site 2 doesn’t render until the 6.0s mark

Page 10: WebPagetest Velocity 2010

p. 10

Visual comparison – results cont’d

Click label for waterfall diagram

Adjust thumbnail size and time granularity

Page 11: WebPagetest Velocity 2010

p. 11

HTTP Archive (HAR) export An open format for archiving and exchanging performance results

- groups.google.com/group/http-archive-specification

Originally created by Firebug and HTTPWatch- Now supported by nearly a dozen tools (and growing)- groups.google.com/group/http-archive-specification/web/har-adopters

Including WebPagetest…

Page 12: WebPagetest Velocity 2010

p. 12

What’s next?

UI redesign – by real UI designers!

Simultaneously view (and scroll) filmstrip and waterfall

Even more test locations- Tentative plans for Brazil, Africa, and India

HTTP Archive (HAR) import- Ability to visualize and compare multiple HAR files

Standardizing interfaces to support integration with other tools- groups.google.com/group/web-testing-framework

- Funded by

Page 13: WebPagetest Velocity 2010

p. 13

Thank [email protected]

[email protected]

@GoldsmithEric

We’re hiring front-end software engineers. corp.aol.com/careers