Understanding and measuring web performance
2 likes1,082 views
The document discusses measuring web performance. It defines web performance as the time perceived by a user when loading a web resource. It explains that human perception of time is subjective and variable. It then covers various metrics for measuring performance like time to first byte and page loaded time. Finally, it discusses different tools and techniques for measuring performance, including JavaScript, browser extensions, server modules, and network sniffing.
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