W3C Web Performance - A detailed overview

3,255 views

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,255
On SlideShare
0
From Embeds
0
Number of Embeds
1,207
Actions
Shares
0
Downloads
46
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Title Slide - Lifecycle
  • url parameter zumabschalten der einzelnenseitenelemente
  • 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

    ×