Top Banner
WebPagetest.org Eric Goldsmith
13

WebPagetest Velocity 2010

Dec 04, 2014

Download

Technology

Eric Goldsmith

WebPagetest slides from Velocity 2010 Lightening Demos
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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