O slideshow foi denunciado.

W3C Web Performance - A detailed overview

3.514 visualizações

Publicada em

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

W3C Web Performance - A detailed overview

  1. 1. W3C Web Performance A detailed overview Alois Reitbauer, @AloisReitbauer
  2. 2. about:me Alois Reitbauer @AloisReitbauer alois.reitbauer@compuware.com
  3. 3. Unknown unknowns Or you cannot optimize what you don’t measure
  4. 4. vs
  5. 5. Don’t try this at home It’s too dangerous, seriously
  6. 6. {Code} Page Load Time { <html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: ” + latency); } </script> </head> <body onload="onLoad()"> …… }
  7. 7. {Code} Timing Resources { …… <script type="text/javascript"> downloadStart(“myimg”); </script> <img src=“./myimg.jpg” onload=“downloadEnd(„myimg‟)” /> ….. }
  8. 8. W3C Performance Working Group
  9. 9. Navigation Timing How fast is my page?
  10. 10. { window.performance.timing. }
  11. 11. Works in most browsers http://blog.dynatrace.com/samples/bookmark.html
  12. 12. {Code} Load time of a page { var time = window.performance.timing; (time.loadEventEnd - time.navigationStart)/1000 }
  13. 13. Resource Timing How fast are my resources?
  14. 14. A typical eCommerce Page
  15. 15. without external dependencies # of Domains # of Resources Total Bytes DNS [ms] Connect [ms] With Third Party Content 26 176 2856 Kb 1286,82 1176,09 Without Third Party Content 2 59 897 Kb 0,91 22,25
  16. 16. { window.performance.getEntriesByType(“resource”); }
  17. 17. {Code} Slowest resource { var resources = window.performance.getEntriesByType("resource"); var sort = function (a,b) {return b.duration a.duration}; resources.sort (sort); resources[0].name; }
  18. 18. User Timing Manual Page Instrumentation
  19. 19. {Code} Page Instrumentation { <html> < head> performance.mark(“headStart”); …. <body> performance.mark (“contentStart”); ….. performance.measure(“mainContent”); performance.measure(“overhead”, “headStart”, “contentStart); }
  20. 20. Beyond measurement Building faster applications
  21. 21. Page Visibility Can you see me?
  22. 22. {Code} Page Activity control { function onLoad() { document.addEventListener("webkitvisibilitychange", visibilityChanged, false); } function visibilityChanged() { if (document.webkitHidden) // relax } else // do heavy stuff } * Chrome version
  23. 23. The future More visibility … and faster
  24. 24. Beacon* Calling home * not yet implemented
  25. 25. {Today} No reliable delivery
  26. 26. {Code} Sending Beacon Data { function unload() { return beacon("POST", "/log", analyticsData); } }
  27. 27. Navigation Timing 2 * Turn the radio on * not yet implemented
  28. 28. Sub Millisecond Resolution Unified Interface Link Negotiation Time (Mobile!)
  29. 29. Resource Priorities* Would you mind waiting? * not yet implemented
  30. 30. Visible after Click
  31. 31. {Code} Main content first { <html> …. <body> <img src=“helperLogos.jpg” defer> <img src=“mainHeader.jpg”> ….. }
  32. 32. Below the fold
  33. 33. {Code} Only load when visible { <html> …. <body> <div style=“footer”> <img src=“largeImage.jpg” postpone> </div> <div style=“content”> ….. }
  34. 34. Error Logging * Something went wrong * not yet implemented
  35. 35. Handle situations when page did not load resource did not load
  36. 36. Polyfilling and beyond IE6 and Safari, you can do this too!
  37. 37. Polyfilling for older browsers Page Load Time Resource loading (except JS & CSS) Insight into JavaScript executions Browser Error Reporting Merge with “classical” analytics data
  38. 38. Reality Ahead Cool things from the real world
  39. 39. CDN Performance Monitoring
  40. 40. Third Party Monitoring
  41. 41. Screen size and rendering
  42. 42. Putting it all together
  43. 43. Thank you! Alois Reitbauer @AloisReitbauer alois.reitbauer@compuware.com

×