Download - Improving Netflix Performance - O'Reilly Mediaassets.en.oreilly.com/1/event/7/Improving Netflix Performance... · Improving Netflix Performance Bill Scott Director, UI Engineering

Transcript

Improving Netflix PerformanceBill ScottDirector UI EngineeringNetflix

June 23 2008

1

The Plan Accurately measure the full user experience performance

Incrementally improve site performance

PriorPage PageResponseRequest

Web App

2

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

The Plan Accurately measure the full user experience performance

Incrementally improve site performance

PriorPage PageResponseRequest

Web App

2

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP request

response for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

3

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring User Experience Performance Tracing

PriorPage

PageResponseRequest

Web App

jsunload() jsonload()ltHEADgtgetTime()

getTime()ltBODYgt

service()after customeracquired

emits ltHEADgt

emits ltBODYgt

GFA D

CB E

HTTP requestresponses for CSS JS

images etcHTTP

requestresponse for HTML page

browser render time

css loading asset loading javascript loading

Server Response

Client Render

After HTML body

Server to Client Render (G-D) + (C-B)

Prior Page till Client Rendered

LoggingDatabase

3

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Measuring Firebug Panel Created a firebug extension that shows real time values

for a given page being measured

4

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improve Performance Apache configuration

gzip far future expires etag configuration

Images

far future expires sprites

move to CSS based buttons navigation vignettes star bars

JavascriptCSS

Switch to YUI minifier

Refactor migrate to jQuery

Correctly position CSS amp Javascript

5

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improve Performance Analysis of QueueWhere did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

6

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improve Performance Analysis of Queue

Where did the time go (180 item Q) Where did the time go (180 item Q)

Images 571 3873 2500 Images 317 3873

Javascript 73 493 300 Star bars 254 1723

CSS 13 91 Javascript 73 493

HTML 239 1624 CSS 13 91

Redirect 52 356 HTML 239 1624

Other 51 346 Redirect 52 356

6783 Other 51 346

6783

Everthing Else 746

Star bars 254 1723 Everthing Else 746

58

7

1

24

55

Images

Javascript

CSS

HTML

Redirect

Other

Lots of Time for Star Bars

75

25

Everthing Else

Star bars

33

25

7

1

24

55

Images

Star bars

Javascript

CSS

HTML

Redirect

Other

7

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improve Performance Incrementally Get tracing fully in place

Push performance improvements opportunistically

This allows us to measure and verify

Star bar example

bull 50+ images originally

bull Changed to 2 images (sliding sprite)

bull Performance actually degraded

bull Request cut in half - GOOD

bull Extra HTML payload

bull Event Handlers on each star - BAD

8

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Improving Performance Gzip Payload reduced in some cases 15x (typically in half)

User experience performance improvement 13 - 25

Network outbound traffic cut in half

9

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Queue Refactor Queue was completely re-written from scratch

Changed from Java generated HTML to JSP generated HTML

Moved to jQuery

Performance slightly degraded for page load

But interactivity ready time improved dramatically (5-10x)

Gzip bought back any loss in larger payload (white space) and then some

10

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Interesting Browser Stats (from the Queue) Safari 311 is 3x faster than IE6

11

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Lessons Most of the Yahoo recommendations are a sure bet (far futures gzip etag etc)

Not all pages are created equal

A lot of time is spent fetching images

Nothing beats simple design separation of concerns clean architecture

The surest way to improve performance is to measure measure measure

Use some way to capture the full user experience time

Be able to log amp graph trends

Median works best

Make sure your numbers are statistically signficant

12

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13

Announcement Jiffy Firebug Extension Firebug extension available that works with Jiffy-Web to give you a graphical

view of your measurement data

httpbillwscottcomjiffyext

13