View
10.954
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Given at the Velocity 2008 Conference. Covers some of the ways Netflix is approaching improving performance and lessons learned.
Citation preview
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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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
larrLogging
Database
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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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 degradedbull 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