Improving Netflix Performance Experience

  • 8,256 views
Uploaded on

Given at the Velocity 2008 Conference. Covers some of the ways Netflix is approaching improving performance and lessons learned.

Given at the Velocity 2008 Conference. Covers some of the ways Netflix is approaching improving performance and lessons learned.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,256
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
252
Comments
1
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Improving Netflix Performance Bill Scott Director, UI Engineering Netflix June 23, 2008 1
  • 2. The Plan  Accurately measure the full user experience performance Prior Page Request Response Page Web App  Incrementally improve site performance 2
  • 3. Measuring: User Experience Performance Tracing Prior Request Response Page Page Web App 3
  • 4. Measuring: User Experience Performance Tracing A D F G Prior Request Response Page Page Web App 3
  • 5. Measuring: User Experience Performance Tracing B C E A D F G Prior Request Response Page Page Web App 3
  • 6. Measuring: User Experience Performance Tracing B emits C emits E <HEAD> </BODY> A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired Prior Request Response Page Page Web App 3
  • 7. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page Web App 3
  • 8. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ response for Web App HTML page 3
  • 9. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response Client Render B emits C emits E <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ responses for CSS, JS, HTTP images, etc. request/ response for Web App HTML page 3
  • 10. Measuring: User Experience Performance Tracing Prior Page till Client Rendered Server to Client Render (G-D) + (C-B) Server Response B emits C emits E Client Render ← Logging Database <HEAD> </BODY> After HTML body A D F G service() js:onload() js:unload() <HEAD> getTime() after customer getTime() </BODY> acquired browser render time css loading, asset loading, javascript loading Prior Request Response Page Page HTTP request/ responses for CSS, JS, HTTP images, etc. request/ response for Web App HTML page 3
  • 11. Measuring: Firebug Panel  Created a firebug extension that shows real time values for a given page being measured 4
  • 12. Improve Performance  Apache configuration  gzip, far future expires, etag configuration  Images  far future expires, sprites  move to CSS based buttons, navigation, vignettes, star bars  Javascript/CSS  Switch to YUI minifier  Refactor, migrate to jQuery  Correctly position CSS & Javascript 5
  • 13. Improve Performance: Analysis of Queue Where did the time go (180 item Q) Where did the time go (180 item Q) Images 57.1% 3873 2500 Images 31.7% 3873 Javascript 7.3% 493 300 Star bars 25.4% 1723 CSS 1.3% 91 Javascript 7.3% 493 HTML 23.9% 1624 CSS 1.3% 91 Redirect 5.2% 356 HTML 23.9% 1624 Other 5.1% 346 Redirect 5.2% 356 6783 Other 5.1% 346 6783 Everthing Else 74.6% Star bars 25.4% 1723 Everthing Else 74.6% 5% 5% Images Javascript 24% CSS HTML Redirect 58% Other 1% 7% Lots of Time for Star Bars 25% 6
  • 14. 5% 5% Images Javascript 24% CSS HTML Redirect 58% Other 1% Improve Performance: Analysis of Queue 7% Lots of Time for Star Bars 25% Everthing Else Star bars 75% 5% 5% 33% Images 24% Star bars Javascript CSS HTML Redirect Other 1% 7% 25% 7
  • 15. Improve Performance: Incrementally  Get tracing fully in place  Push performance improvements opportunistically  This allows us to measure and verify  Star bar example • 50+ images originally • Changed to 2 images (sliding sprite) • Performance actually degraded • Request cut in half - GOOD • Extra HTML payload • Event Handlers on each star - BAD 8
  • 16. Improve Performance: Incrementally  Get tracing fully in place  Push performance improvements opportunistically  This allows us to measure and verify  Star bar example • 50+ images originally • Changed to 2 images (sliding sprite) • Performance actually degraded • Request cut in half - GOOD • Extra HTML payload • Event Handlers on each star - BAD 8
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. Interesting Browser Stats (from the Queue)  Safari 3.1.1 is 3x faster than IE6 11
  • 23. 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 & graph trends  Median works best  Make sure your numbers are statistically signficant 12
  • 24. Announcement: Jiffy Firebug Extension  Firebug extension available that works with Jiffy-Web to give you a graphical view of your measurement data  http:/billwscott.com/jiffyext 13