SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
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 performance




                                                              2
Measuring: User Experience Performance Tracing




   Prior
           Request    Response   Page
   Page




                     Web App




                                                 3
Measuring: User Experience Performance Tracing



           A                    D      F    G




   Prior
               Request    Response   Page
   Page




                         Web App




                                                 3
Measuring: User Experience Performance Tracing


                         B      C        E

           A                        D          F    G




   Prior
               Request        Response       Page
   Page




                             Web App




                                                        3
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
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
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
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
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
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
   Javascript/CSS
       Switch to YUI minifier
       Refactor, migrate to jQuery
       Correctly position CSS & Javascript




                                                                      5
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
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
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
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
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 3.1.1 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 & 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
       http:/billwscott.com/jiffyext




                                                                                    13

Weitere ähnliche Inhalte

Ähnlich wie Improving Netflix Performance Experience

Hpwp Real World.Key
Hpwp Real World.KeyHpwp Real World.Key
Hpwp Real World.Keygueste8cc560
 
MED301 Is My CDN Performing? - AWS re: Invent 2012
MED301 Is My CDN Performing? - AWS re: Invent 2012MED301 Is My CDN Performing? - AWS re: Invent 2012
MED301 Is My CDN Performing? - AWS re: Invent 2012Amazon Web Services
 
Code driven development: using Features effectively in Drupal 6 and 7
Code driven development: using Features effectively in Drupal 6 and 7Code driven development: using Features effectively in Drupal 6 and 7
Code driven development: using Features effectively in Drupal 6 and 7Nuvole
 
Towards secure & dependable storage services in cloud computing
Towards secure & dependable storage services in cloud computingTowards secure & dependable storage services in cloud computing
Towards secure & dependable storage services in cloud computingRahid Abdul Kalam
 
Dev suite integration
Dev suite integrationDev suite integration
Dev suite integrationiemu
 
AWS Update | London - Overview of New Releases
AWS Update | London - Overview of New ReleasesAWS Update | London - Overview of New Releases
AWS Update | London - Overview of New ReleasesAmazon Web Services
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSVisual Engineering
 
Overview of Grails Object Relational Mapping (GORM)
Overview of Grails Object Relational Mapping (GORM)Overview of Grails Object Relational Mapping (GORM)
Overview of Grails Object Relational Mapping (GORM)Chris Richardson
 
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM EuropeBlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM EuropeMariano Carrizo
 
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022Lowering the Barrier to Stream Processing With Alex Morley | Current 2022
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022HostedbyConfluent
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10Chris Schalk
 
Bank of China (HK) Tech Talk 1: Dive Into Apache Kafka
Bank of China (HK) Tech Talk 1: Dive Into Apache KafkaBank of China (HK) Tech Talk 1: Dive Into Apache Kafka
Bank of China (HK) Tech Talk 1: Dive Into Apache Kafkaconfluent
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)Google
 
AWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDKAWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDKCasey Lee
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.jsMek Srunyu Stittri
 

Ähnlich wie Improving Netflix Performance Experience (20)

Hpwp Real World.Key
Hpwp Real World.KeyHpwp Real World.Key
Hpwp Real World.Key
 
MED301 Is My CDN Performing? - AWS re: Invent 2012
MED301 Is My CDN Performing? - AWS re: Invent 2012MED301 Is My CDN Performing? - AWS re: Invent 2012
MED301 Is My CDN Performing? - AWS re: Invent 2012
 
Code driven development: using Features effectively in Drupal 6 and 7
Code driven development: using Features effectively in Drupal 6 and 7Code driven development: using Features effectively in Drupal 6 and 7
Code driven development: using Features effectively in Drupal 6 and 7
 
Towards secure & dependable storage services in cloud computing
Towards secure & dependable storage services in cloud computingTowards secure & dependable storage services in cloud computing
Towards secure & dependable storage services in cloud computing
 
Dev suite integration
Dev suite integrationDev suite integration
Dev suite integration
 
AWS Update | London - Overview of New Releases
AWS Update | London - Overview of New ReleasesAWS Update | London - Overview of New Releases
AWS Update | London - Overview of New Releases
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
 
Ispcms.ppt
Ispcms.pptIspcms.ppt
Ispcms.ppt
 
Using Embulk at Treasure Data
Using Embulk at Treasure DataUsing Embulk at Treasure Data
Using Embulk at Treasure Data
 
Overview of Grails Object Relational Mapping (GORM)
Overview of Grails Object Relational Mapping (GORM)Overview of Grails Object Relational Mapping (GORM)
Overview of Grails Object Relational Mapping (GORM)
 
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM EuropeBlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe
BlackBerry10 apps with Adobe AIR & Apache Flex - BlackBerry JAM Europe
 
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022Lowering the Barrier to Stream Processing With Alex Morley | Current 2022
Lowering the Barrier to Stream Processing With Alex Morley | Current 2022
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10
 
Unit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UMLUnit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UML
 
Offline Html5 3days
Offline Html5 3daysOffline Html5 3days
Offline Html5 3days
 
Bank of China (HK) Tech Talk 1: Dive Into Apache Kafka
Bank of China (HK) Tech Talk 1: Dive Into Apache KafkaBank of China (HK) Tech Talk 1: Dive Into Apache Kafka
Bank of China (HK) Tech Talk 1: Dive Into Apache Kafka
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
 
AWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDKAWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDK
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
 

Mehr von Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsBill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting MomentsBill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill Scott
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastBill Scott
 

Mehr von Bill Scott (20)

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting Moments
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly Webcast
 

Kürzlich hochgeladen

PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 

Kürzlich hochgeladen (20)

PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 

Improving Netflix Performance Experience

  • 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