SlideShare a Scribd company logo
1 of 54
Download to read offline
Understanding and measuring
                        web performance

                               Bogdan Gâza

                          Mechanic at


 CodeCamp NOV’12                                 Bogdan Gâza
Monday, November 19, 12
Agenda




                           }
           What is
           Measuring               web performance
           Take aways



 CodeCamp NOV’12                               Bogdan Gâza
Monday, November 19, 12
Agenda




                           }
           What is
           Measuring               web performance
           Take aways



 CodeCamp NOV’12                               Bogdan Gâza
Monday, November 19, 12
Web performance is the time perceived
       by an user when loading a web resource.




 CodeCamp NOV’12                           Bogdan Gâza
Monday, November 19, 12
Click   Load

 CodeCamp NOV’12                  Bogdan Gâza
Monday, November 19, 12
Click   Load

 CodeCamp NOV’12                  Bogdan Gâza
Monday, November 19, 12
Human perception of time is both
                              subjective and variable

                                                             actual

                                                       expected

                                                       perceived

                                                     remembered


 CodeCamp NOV’12                                               Bogdan Gâza
Monday, November 19, 12
Human perception of time is both
                              subjective and variable
                             Delay              User reaction

                           0 - 100 ms              Instant

                           0 - 300 ms           Feels sluggish

                          0 - 1000 ms        Machine is working

                              1s+           Mental context switch

                             10s+            I’ll come back later

 CodeCamp NOV’12                                                    Bogdan Gâza
Monday, November 19, 12
Human perception of time is both
                              subjective and variable
                             Delay              User reaction

                           0 - 100 ms              Instant

                           0 - 300 ms           Feels sluggish

                          0 - 1000 ms        Machine is working

                              1s+           Mental context switch

                             10s+            I’ll come back later

 CodeCamp NOV’12                                                    Bogdan Gâza
Monday, November 19, 12
Bing - negative impacts when adding delay



                               Distinct                                        Time To
                Delay                           Satisfaction
                               Queries                                       Interaction



            1000 ms             - 0.7%             -1.6%                        1900 ms



            2000 ms              -1.8%             -3.8%                        3100ms


                                                    en.oreilly.com/velocity2009/public/schedule/detail/8523

 CodeCamp NOV’12
 Amazon TechO(n)                                                                             Bogdan Gâza
Monday, November 19, 12
Importance of performance


                           Yahoo! - 400ms slower
                            6% drop in full-page traffic



                            Firefox Download page
                          - 2.2s faster avg page load time
                             +15.4% more downloads


 CodeCamp NOV’12
 Amazon TechO(n)                                             Bogdan Gâza
Monday, November 19, 12
Agenda




                           }
           What is
           Measuring               web performance
           Take aways



 CodeCamp NOV’12                               Bogdan Gâza
Monday, November 19, 12
Measuring web performance




                   Click                      Load

 CodeCamp NOV’12                                       Bogdan Gâza
Monday, November 19, 12
Short life of a http request




    Click                                                Load




 CodeCamp NOV’12                                                Bogdan Gâza
Monday, November 19, 12
Short life of a http request




    Click




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Short life of a http request




                 Unload


    Click




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Short life of a http request




                 Unload   DNS


    Click




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Short life of a http request




                 Unload   DNS   TCP


    Click




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Short life of a http request




                 Unload   DNS   TCP       REQUEST



    Click




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Short life of a http request




                 Unload   DNS   TCP     REQUEST          RESPONSE



    Click




 CodeCamp NOV’12                                                    Bogdan Gâza
Monday, November 19, 12
Short life of a http request




QUEST                      RESPONSE        PROCESSING      ONLOAD



                                                                      Load




  CodeCamp NOV’12                                                   Bogdan Gâza
 Monday, November 19, 12
Click
                          Load




 CodeCamp NOV’12                 Bogdan Gâza
Monday, November 19, 12
clickToPageLoaded




     Click
                                          Load




 CodeCamp NOV’12                                 Bogdan Gâza
Monday, November 19, 12
Key metrics




                                        ?
    Click




 CodeCamp NOV’12                            Bogdan Gâza
Monday, November 19, 12
Key metrics

                                        Time to First Byte



                 Unload   DNS   TCP    REQUEST        RESPONSE



    Click




 CodeCamp NOV’12                                                 Bogdan Gâza
Monday, November 19, 12
Key metrics


                                      Render Start Time



QUEST                      RESPONSE            PROCESSING   ONLOAD



                                                                       Load




  CodeCamp NOV’12                                                    Bogdan Gâza
 Monday, November 19, 12
Key metrics


                                       DomContentLoaded



QUEST                      RESPONSE         PROCESSING    ONLOAD



                                                                     Load




  CodeCamp NOV’12                                                  Bogdan Gâza
 Monday, November 19, 12
Key metrics

                                                         Page Loaded
                                                            Time



QUEST                      RESPONSE         PROCESSING   ONLOAD



                                                                    Load




  CodeCamp NOV’12                                                 Bogdan Gâza
 Monday, November 19, 12
High Level Metrics


                  clickTo BusinessRelevantEvent
                            aboveTheFold
                              FirstClick
                              FirstScroll



    Click                               Load    BusinessRelevant
                                                     Event


 CodeCamp NOV’12                                               Bogdan Gâza
Monday, November 19, 12
High Level Metrics




                           clickToFirstTweet
 CodeCamp NOV’12                               Bogdan Gâza
Monday, November 19, 12
Aggregation




                                     AVG



                          Average is not always relevant

 CodeCamp NOV’12                                           Bogdan Gâza
Monday, November 19, 12
Context

                            Time of day               Operating System

                             Browser                     Antivirus

                             Location                     Devise

                          Connection type                Resolution

                              Latency                        ...


 CodeCamp NOV’12                                                         Bogdan Gâza
Monday, November 19, 12
Measuring web performance

                Subjective (qualitative)        Objective (quantitative)

                          Focus Groups                 JavaScript

                          Case Studies            Navigation timings

                           Interviews            Browser Extensions

                               ...                Web Server Mods

                               ...                 Network sniffing

 CodeCamp NOV’12                                                       Bogdan Gâza
Monday, November 19, 12
Measuring web performance using JavaScript

       unLoadEvent                   Store start in a       Load next
     start timestamp                     cookie               page



                                                             loadEvent
                                                          stop timestamp


                            Send a beacon               Page Load Time
                              beacon.gif?                    (PLT)
                              time=PLT                    stop - start


 CodeCamp NOV’12                                                   Bogdan Gâza
Monday, November 19, 12
Measuring web performance using JavaScript

                          Pro’s                     Con’s


                          Simple                  JavaScript


               Simple Custom Metrics       Accurate for the 2nd page


                            ...                Observer effect


 CodeCamp NOV’12                                                  Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Navigation
                                   Timings

                                              domainLookupStart
                 navigationStart
                                            domainLookupEnd



                 Unload   DNS      TCP       REQUEST          RESPONSE

                                                                         ...
    Click                                 connectStart

                                         connectEnd


 CodeCamp NOV’12                                                         Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Navigation
                                    Timings



                                                      domLoadComplete


QUEST                      RESPONSE      PROCESSING         ONLOAD



                                                                       Load


                                              domContentLoaded



  CodeCamp NOV’12                                                    Bogdan Gâza
 Monday, November 19, 12
Measuring web performance using Navigation
                                   Timings




 CodeCamp NOV’12                                               Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Navigation
                                   Timings

                              Pro’s                Con’s


                             Simple               JavaScript


                          Lots of metrics      Page Level Only


                             Accurate       Needs browser support


 CodeCamp NOV’12                                                 Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Browser
                                    Extensions




 CodeCamp NOV’12                                               Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Browser Extension

                             Pro’s                  Con’s


           Very complete metrics           Getting users to install it


                          No JavaScript   Not natively cross browser


                    Not only page level                ...


 CodeCamp NOV’12                                                    Bogdan Gâza
Monday, November 19, 12
Measuring web performance using a web
                                       server mod




                                         Web server




 CodeCamp NOV’12                                                  Bogdan Gâza
Monday, November 19, 12
Measuring web performance using a web
                                       server mod



                                         Performance module



                                         Web server




 CodeCamp NOV’12                                                  Bogdan Gâza
Monday, November 19, 12
Measuring web performance using a web
                                       server mod



                                         Performance module



                                         Web server




 CodeCamp NOV’12                                                  Bogdan Gâza
Monday, November 19, 12
Measuring web performance using a web
                                       server mod



                                         Performance module
                                                                Registers
                                                              timestamps
                                         Web server




 CodeCamp NOV’12                                                       Bogdan Gâza
Monday, November 19, 12
Measuring web performance using a web
                                       server mod



                                         Performance module
                                                                Registers
                                                              timestamps
                                         Web server


                                                              Collects &
                                                              aggregates




 CodeCamp NOV’12                                                       Bogdan Gâza
Monday, November 19, 12
Measuring web performance using Web Server mod

                          Pro’s               Con’s

       Good for measuring back-end
                                          Limited metrics
              performance

                                        Possible web server
                Can be easy to deploy
                                         performance hits

                                        Concept of a page is
                           ...
                                           problematic


 CodeCamp NOV’12                                               Bogdan Gâza
Monday, November 19, 12
Measuring web performance using network sniffing




                                     Web app
                          Network




 CodeCamp NOV’12                                        Bogdan Gâza
Monday, November 19, 12
Measuring web performance using network sniffing




                                        Web app
                          Network



                                    Web perf appliance




 CodeCamp NOV’12                                         Bogdan Gâza
Monday, November 19, 12
Measuring web performance using network sniffing




                                              Web app
                          Network



                                       Web perf appliance

                                    Promiscuous mode
                                    Assembles packets
                                    Assembles http into pages
                                    Collects data


 CodeCamp NOV’12                                                Bogdan Gâza
Monday, November 19, 12
Measuring web performance using network sniffing

                          Pro’s                Con’s


                No observer effect         Limited metrics


               Used in appliance based
                                          Not cloud friendly
                      solutions

                                         Concept of a page is
                           ...
                                            problematic


 CodeCamp NOV’12                                                Bogdan Gâza
Monday, November 19, 12
Take aways

                      Performance is subjective, context is critical
                      Observations vs Experiments
                      W3C Nav Timings
                      Speed (latency) an important feature



 CodeCamp NOV’12                                                       Bogdan Gâza
Monday, November 19, 12
Q/A

 CodeCamp NOV’12                Bogdan Gâza
Monday, November 19, 12
Thanks!



 CodeCamp NOV’12                    Bogdan Gâza
Monday, November 19, 12

More Related Content

More from Bogdan Gaza

[TW] CSS Files Optimization
[TW] CSS Files Optimization[TW] CSS Files Optimization
[TW] CSS Files OptimizationBogdan Gaza
 
RailsAdmin - the right way of doing data administration with Rails 3
RailsAdmin - the right way of doing data administration with Rails 3RailsAdmin - the right way of doing data administration with Rails 3
RailsAdmin - the right way of doing data administration with Rails 3Bogdan Gaza
 
De ce sa nu folosim Ruby On Rails?
De ce sa nu folosim Ruby On Rails?De ce sa nu folosim Ruby On Rails?
De ce sa nu folosim Ruby On Rails?Bogdan Gaza
 
NoSQL in the context of Social Web
NoSQL in the context of Social WebNoSQL in the context of Social Web
NoSQL in the context of Social WebBogdan Gaza
 

More from Bogdan Gaza (6)

[TW] Node.js
[TW] Node.js[TW] Node.js
[TW] Node.js
 
[TW] CSS Files Optimization
[TW] CSS Files Optimization[TW] CSS Files Optimization
[TW] CSS Files Optimization
 
Fosdem2011
Fosdem2011Fosdem2011
Fosdem2011
 
RailsAdmin - the right way of doing data administration with Rails 3
RailsAdmin - the right way of doing data administration with Rails 3RailsAdmin - the right way of doing data administration with Rails 3
RailsAdmin - the right way of doing data administration with Rails 3
 
De ce sa nu folosim Ruby On Rails?
De ce sa nu folosim Ruby On Rails?De ce sa nu folosim Ruby On Rails?
De ce sa nu folosim Ruby On Rails?
 
NoSQL in the context of Social Web
NoSQL in the context of Social WebNoSQL in the context of Social Web
NoSQL in the context of Social Web
 

Understanding and measuring web performance

  • 1. Understanding and measuring web performance Bogdan Gâza Mechanic at CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 2. Agenda } What is Measuring web performance Take aways CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 3. Agenda } What is Measuring web performance Take aways CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 4. Web performance is the time perceived by an user when loading a web resource. CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 5. Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 6. Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 7. Human perception of time is both subjective and variable actual expected perceived remembered CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 8. Human perception of time is both subjective and variable Delay User reaction 0 - 100 ms Instant 0 - 300 ms Feels sluggish 0 - 1000 ms Machine is working 1s+ Mental context switch 10s+ I’ll come back later CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 9. Human perception of time is both subjective and variable Delay User reaction 0 - 100 ms Instant 0 - 300 ms Feels sluggish 0 - 1000 ms Machine is working 1s+ Mental context switch 10s+ I’ll come back later CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 10. Bing - negative impacts when adding delay Distinct Time To Delay Satisfaction Queries Interaction 1000 ms - 0.7% -1.6% 1900 ms 2000 ms -1.8% -3.8% 3100ms en.oreilly.com/velocity2009/public/schedule/detail/8523 CodeCamp NOV’12 Amazon TechO(n) Bogdan Gâza Monday, November 19, 12
  • 11. Importance of performance Yahoo! - 400ms slower 6% drop in full-page traffic Firefox Download page - 2.2s faster avg page load time +15.4% more downloads CodeCamp NOV’12 Amazon TechO(n) Bogdan Gâza Monday, November 19, 12
  • 12. Agenda } What is Measuring web performance Take aways CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 13. Measuring web performance Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 14. Short life of a http request Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 15. Short life of a http request Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 16. Short life of a http request Unload Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 17. Short life of a http request Unload DNS Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 18. Short life of a http request Unload DNS TCP Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 19. Short life of a http request Unload DNS TCP REQUEST Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 20. Short life of a http request Unload DNS TCP REQUEST RESPONSE Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 21. Short life of a http request QUEST RESPONSE PROCESSING ONLOAD Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 22. Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 23. clickToPageLoaded Click Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 24. Key metrics ? Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 25. Key metrics Time to First Byte Unload DNS TCP REQUEST RESPONSE Click CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 26. Key metrics Render Start Time QUEST RESPONSE PROCESSING ONLOAD Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 27. Key metrics DomContentLoaded QUEST RESPONSE PROCESSING ONLOAD Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 28. Key metrics Page Loaded Time QUEST RESPONSE PROCESSING ONLOAD Load CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 29. High Level Metrics clickTo BusinessRelevantEvent aboveTheFold FirstClick FirstScroll Click Load BusinessRelevant Event CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 30. High Level Metrics clickToFirstTweet CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 31. Aggregation AVG Average is not always relevant CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 32. Context Time of day Operating System Browser Antivirus Location Devise Connection type Resolution Latency ... CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 33. Measuring web performance Subjective (qualitative) Objective (quantitative) Focus Groups JavaScript Case Studies Navigation timings Interviews Browser Extensions ... Web Server Mods ... Network sniffing CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 34. Measuring web performance using JavaScript unLoadEvent Store start in a Load next start timestamp cookie page loadEvent stop timestamp Send a beacon Page Load Time beacon.gif? (PLT) time=PLT stop - start CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 35. Measuring web performance using JavaScript Pro’s Con’s Simple JavaScript Simple Custom Metrics Accurate for the 2nd page ... Observer effect CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 36. Measuring web performance using Navigation Timings domainLookupStart navigationStart domainLookupEnd Unload DNS TCP REQUEST RESPONSE ... Click connectStart connectEnd CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 37. Measuring web performance using Navigation Timings domLoadComplete QUEST RESPONSE PROCESSING ONLOAD Load domContentLoaded CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 38. Measuring web performance using Navigation Timings CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 39. Measuring web performance using Navigation Timings Pro’s Con’s Simple JavaScript Lots of metrics Page Level Only Accurate Needs browser support CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 40. Measuring web performance using Browser Extensions CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 41. Measuring web performance using Browser Extension Pro’s Con’s Very complete metrics Getting users to install it No JavaScript Not natively cross browser Not only page level ... CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 42. Measuring web performance using a web server mod Web server CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 43. Measuring web performance using a web server mod Performance module Web server CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 44. Measuring web performance using a web server mod Performance module Web server CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 45. Measuring web performance using a web server mod Performance module Registers timestamps Web server CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 46. Measuring web performance using a web server mod Performance module Registers timestamps Web server Collects & aggregates CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 47. Measuring web performance using Web Server mod Pro’s Con’s Good for measuring back-end Limited metrics performance Possible web server Can be easy to deploy performance hits Concept of a page is ... problematic CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 48. Measuring web performance using network sniffing Web app Network CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 49. Measuring web performance using network sniffing Web app Network Web perf appliance CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 50. Measuring web performance using network sniffing Web app Network Web perf appliance Promiscuous mode Assembles packets Assembles http into pages Collects data CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 51. Measuring web performance using network sniffing Pro’s Con’s No observer effect Limited metrics Used in appliance based Not cloud friendly solutions Concept of a page is ... problematic CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 52. Take aways Performance is subjective, context is critical Observations vs Experiments W3C Nav Timings Speed (latency) an important feature CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 53. Q/A CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12
  • 54. Thanks! CodeCamp NOV’12 Bogdan Gâza Monday, November 19, 12