Improving Netflix Performance Bill Scott Director, UI Engineering - - PowerPoint PPT Presentation

▶
improving netflix performance
SMART_READER_LITE
LIVE PREVIEW

Improving Netflix Performance Bill Scott Director, UI Engineering - - PowerPoint PPT Presentation

Aug 27, 2022 781 likes •1.04k views

Improving Netflix Performance Bill Scott Director, UI Engineering Netflix June 23, 2008 1 The Plan Accurately measure the full user experience performance Prior Page Request Response Page Web App Incrementally improve site

slide-1
SLIDE 1

Improving Netflix Performance

Bill Scott

Director, UI Engineering Netflix

June 23, 2008

1

slide-2
SLIDE 2

The Plan

  • Accurately measure the full user experience performance
  • Incrementally improve site performance

Prior Page

Page

Response

Request

Web App

2

slide-3
SLIDE 3

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

3

slide-4
SLIDE 4

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

G F A D

3

slide-5
SLIDE 5

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

G F A D C B E

3

slide-6
SLIDE 6

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

js:unload() js:onload() <HEAD> getTime() getTime() </BODY> service() after customer acquired emits <HEAD> emits </BODY>

G F A D C B E

3

slide-7
SLIDE 7

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

js:unload() js:onload() <HEAD> getTime() getTime() </BODY> service() after customer acquired emits <HEAD> emits </BODY>

G F A D C B 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

slide-8
SLIDE 8

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

js:unload() js:onload() <HEAD> getTime() getTime() </BODY> service() after customer acquired emits <HEAD> emits </BODY>

G F A D C B 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

slide-9
SLIDE 9

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

js:unload() js:onload() <HEAD> getTime() getTime() </BODY> service() after customer acquired emits <HEAD> emits </BODY>

G F A D C B E

HTTP request/ responses for CSS, JS, images, etc. 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

slide-10
SLIDE 10

Measuring: User Experience Performance Tracing

Prior Page Page Response Request Web App

js:unload() js:onload() <HEAD> getTime() getTime() </BODY> service() after customer acquired emits <HEAD> emits </BODY>

G F A D C B E

HTTP request/ responses for CSS, JS, images, etc. 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

  • Logging

Database

3

slide-11
SLIDE 11

Measuring: Firebug Panel

  • Created a firebug extension that shows real time values

for a given page being measured

4

slide-12
SLIDE 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

slide-13
SLIDE 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%

58% 7% 1% 24% 5% 5%

Images Javascript CSS HTML Redirect Other

6

slide-14
SLIDE 14

Improve Performance: Analysis of Queue

Lots of Time for Star Bars 75% 25% Everthing Else Star bars 33% 25% 7% 1% 24% 5% 5% Images Star bars Javascript CSS HTML Redirect Other

7

slide-15
SLIDE 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

slide-16
SLIDE 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

slide-17
SLIDE 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

slide-18
SLIDE 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

slide-19
SLIDE 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

slide-20
SLIDE 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

slide-21
SLIDE 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

slide-22
SLIDE 22

Interesting Browser Stats (from the Queue)

  • Safari 3.1.1 is 3x faster than IE6

11

slide-23
SLIDE 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

slide-24
SLIDE 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