SlideShare a Scribd company logo
Performance
from the User‘s perspective

   @Orangecoding

   http://github.com/orangecoding
We m e a s u r e h e r e




But shouldn‘t we
 measure here?
What we really measure...




                                           Stuff is beeing send to the user




                       {Server does something}
     User hits enter
                                                           User can actually use the page
       (w3c.org)
What we really measure...


                          Stuff is beeing send to the user




         {Server does something}                   what happens here?
User hits enter
                                                                          User can actually use the page
  (w3c.org)




                                                                Yeah,
                                                             but when??
What we really measure...




                          Stuff is beeing send to the user




         {Server does something}                   what happens here?
User hits enter
                                                                   User can actually use the page
  (w3c.org)
What we really measure...




                    jQuery(document).onReady(function(){
                       //measure time
                    })




                              Stuff is beeing send to the user




         {Server does something}                       what happens here?
User hits enter
                                                                       User can actually use the page
  (w3c.org)
Visibility ends here
                       Internet

                                       Content Server




                                  rd
                                  3 Party

   Proce
         ssing
Navigation.timing
(http://www.w3.org/TR/navigation-timing/)
what happens here?
User hits enter                        User can actually use the page
  (w3c.org)
Name                        Description
navigationStart              load/unload Event was triggered


fetchStart                   Moment just before the browser starts to do anything.

                             Moment just before browser checks DNS to resolve
domainLookupStart
                             domain name.

                             Time when browser starts connecting to the server. If ==
connectStart
                             cache, value same as domainLookupEnd.

                             The moment just before browser starts requesting the
requestStart
                             resource (from server or cache)

                             Returns the time just after browser receives first byte of
responseStart
                             the response from server, cache or local resource.

domContentLoadedEventStart   The time just before onDocumentReady event is fired,


loadEventStart               The time just before onLoad event is fired,
■ Network latency: responseEnd-fetchStart
■ The time taken for page load once the page is received from the server: loadEventEnd-responseEnd
■ The whole process of navigation and page load: loadEventEnd-navigationStart.
Can we already use it..?
Demo
Thanks for listening...
               @Orangecoding

               http://github.com/orangecoding



  Weitere Erklärungen auf HTML5Rocks.com
                  http://goo.gl/iK0y1




         Demo/Bookmarklet (1) © by Kaaes
              --> http://kaaes.github.com/timing/

More Related Content

Similar to Performance from the user's perspective

Think async
Think asyncThink async
Think async
Bhakti Mehta
 
Comet with node.js and V8
Comet with node.js and V8Comet with node.js and V8
Comet with node.js and V8
amix3k
 
Unity and WebSockets
Unity and WebSocketsUnity and WebSockets
Unity and WebSockets
Josh Glover
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Nicholas Jansma
 
Web workers
Web workersWeb workers
Web workers
Surbhi Mathur
 
Web workers
Web workersWeb workers
Web workers
Surbhi Mathur
 
What is Node.js
What is Node.jsWhat is Node.js
What is Node.js
mohamed hadrich
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
SOASTA
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Cliff Crocker
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
Tammy Everts
 
Server-Sent Events (real-time HTTP push for HTML5 browsers)
Server-Sent Events (real-time HTTP push for HTML5 browsers)Server-Sent Events (real-time HTTP push for HTML5 browsers)
Server-Sent Events (real-time HTTP push for HTML5 browsers)
yay w00t
 
Experienced Selenium Interview questions
Experienced Selenium Interview questionsExperienced Selenium Interview questions
Experienced Selenium Interview questions
archana singh
 
Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?
Simon Willison
 
Web server working
Web server workingWeb server working
Web server working
Prem Joshua
 
Comet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way MediumComet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way Medium
Joe Walker
 
GWT Enterprise Edition
GWT Enterprise EditionGWT Enterprise Edition
GWT Enterprise Edition
Gilad Garon
 
J2ee servlet
J2ee servletJ2ee servlet
J2ee servlet
vinoth ponnurangam
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
Ahmed Madkor
 
SevletLifeCycle
SevletLifeCycleSevletLifeCycle
SevletLifeCycle
Chandnigupta80
 
Why is this ASP.NET web app running slowly?
Why is this ASP.NET web app running slowly?Why is this ASP.NET web app running slowly?
Why is this ASP.NET web app running slowly?
Mark Friedman
 

Similar to Performance from the user's perspective (20)

Think async
Think asyncThink async
Think async
 
Comet with node.js and V8
Comet with node.js and V8Comet with node.js and V8
Comet with node.js and V8
 
Unity and WebSockets
Unity and WebSocketsUnity and WebSockets
Unity and WebSockets
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications
 
Web workers
Web workersWeb workers
Web workers
 
Web workers
Web workersWeb workers
Web workers
 
What is Node.js
What is Node.jsWhat is Node.js
What is Node.js
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Server-Sent Events (real-time HTTP push for HTML5 browsers)
Server-Sent Events (real-time HTTP push for HTML5 browsers)Server-Sent Events (real-time HTTP push for HTML5 browsers)
Server-Sent Events (real-time HTTP push for HTML5 browsers)
 
Experienced Selenium Interview questions
Experienced Selenium Interview questionsExperienced Selenium Interview questions
Experienced Selenium Interview questions
 
Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?
 
Web server working
Web server workingWeb server working
Web server working
 
Comet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way MediumComet: Making The Web a 2-Way Medium
Comet: Making The Web a 2-Way Medium
 
GWT Enterprise Edition
GWT Enterprise EditionGWT Enterprise Edition
GWT Enterprise Edition
 
J2ee servlet
J2ee servletJ2ee servlet
J2ee servlet
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
SevletLifeCycle
SevletLifeCycleSevletLifeCycle
SevletLifeCycle
 
Why is this ASP.NET web app running slowly?
Why is this ASP.NET web app running slowly?Why is this ASP.NET web app running slowly?
Why is this ASP.NET web app running slowly?
 

Recently uploaded

Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

Performance from the user's perspective

  • 1. Performance from the User‘s perspective @Orangecoding http://github.com/orangecoding
  • 2. We m e a s u r e h e r e But shouldn‘t we measure here?
  • 3. What we really measure... Stuff is beeing send to the user {Server does something} User hits enter User can actually use the page (w3c.org)
  • 4. What we really measure... Stuff is beeing send to the user {Server does something} what happens here? User hits enter User can actually use the page (w3c.org) Yeah, but when??
  • 5. What we really measure... Stuff is beeing send to the user {Server does something} what happens here? User hits enter User can actually use the page (w3c.org)
  • 6. What we really measure... jQuery(document).onReady(function(){ //measure time }) Stuff is beeing send to the user {Server does something} what happens here? User hits enter User can actually use the page (w3c.org)
  • 7. Visibility ends here Internet Content Server rd 3 Party Proce ssing
  • 9. what happens here? User hits enter User can actually use the page (w3c.org)
  • 10. Name Description navigationStart load/unload Event was triggered fetchStart Moment just before the browser starts to do anything. Moment just before browser checks DNS to resolve domainLookupStart domain name. Time when browser starts connecting to the server. If == connectStart cache, value same as domainLookupEnd. The moment just before browser starts requesting the requestStart resource (from server or cache) Returns the time just after browser receives first byte of responseStart the response from server, cache or local resource. domContentLoadedEventStart The time just before onDocumentReady event is fired, loadEventStart The time just before onLoad event is fired,
  • 11. ■ Network latency: responseEnd-fetchStart ■ The time taken for page load once the page is received from the server: loadEventEnd-responseEnd ■ The whole process of navigation and page load: loadEventEnd-navigationStart.
  • 12. Can we already use it..?
  • 13. Demo
  • 14. Thanks for listening... @Orangecoding http://github.com/orangecoding Weitere Erklärungen auf HTML5Rocks.com http://goo.gl/iK0y1 Demo/Bookmarklet (1) © by Kaaes --> http://kaaes.github.com/timing/