W3C Web
Performance
A detailed overview

Alois Reitbauer, @AloisReitbauer
about:me

Alois Reitbauer

@AloisReitbauer
alois.reitbauer@compuware.com
Unknown unknowns

Or you cannot optimize
what you don’t measure
vs
Don’t try this at home
It’s too dangerous, seriously
{Code} Page Load Time

{

<html>
<head>
<script type="text/javascript">

var start = new Date().getTime();
function onLoad...
{Code} Timing Resources

{
……
<script type="text/javascript">
downloadStart(“myimg”);
</script>
<img src=“./myimg.jpg” onl...
W3C
Performance
Working Group
Navigation Timing
How fast is my page?
{ window.performance.timing.

}
Works in most browsers

http://blog.dynatrace.com/samples/bookmark.html
{Code} Load time of a page

{
var time = window.performance.timing;

(time.loadEventEnd - time.navigationStart)/1000

}
Resource Timing
How fast are my resources?
A typical eCommerce Page
without external dependencies

# of
Domains

# of
Resources

Total
Bytes

DNS
[ms]

Connect
[ms]

With Third Party Content...
{

window.performance.getEntriesByType(“resource”);

}
{Code} Slowest resource

{

var resources =
window.performance.getEntriesByType("resource");

var sort = function (a,b) {r...
User Timing
Manual Page Instrumentation
{Code} Page Instrumentation

{

<html>
< head>

performance.mark(“headStart”);
….
<body>

performance.mark (“contentStart”...
Beyond measurement
Building faster applications
Page Visibility
Can you see me?
{Code} Page Activity control

{

function onLoad() {

document.addEventListener("webkitvisibilitychange",
visibilityChange...
The future
More visibility … and faster
Beacon*
Calling home

* not yet implemented
{Today} No reliable delivery
{Code} Sending Beacon Data

{
function unload() {
return beacon("POST", "/log", analyticsData);
}

}
Navigation Timing 2 *
Turn the radio on

* not yet implemented
Sub Millisecond Resolution
Unified Interface

Link Negotiation Time (Mobile!)
Resource Priorities*
Would you mind waiting?

* not yet implemented
Visible after Click
{Code} Main content first

{

<html>
….

<body>

<img src=“helperLogos.jpg” defer>
<img src=“mainHeader.jpg”>
…..

}
Below the fold
{Code} Only load when visible

{

<html>
….

<body>
<div style=“footer”>

<img src=“largeImage.jpg” postpone>
</div>
<div ...
Error Logging *
Something went wrong

* not yet implemented
Handle situations when
page did not load

resource did not load
Polyfilling and beyond
IE6 and Safari, you can do this too!
Polyfilling for older browsers
Page Load Time
Resource loading (except JS & CSS)

Insight into JavaScript executions
Brows...
Reality Ahead
Cool things from the real world
CDN Performance Monitoring
Third Party Monitoring
Screen size and rendering
Putting it all together
Thank you!
Alois Reitbauer

@AloisReitbauer
alois.reitbauer@compuware.com
Próxima SlideShare
Cargando en…5
×

W3C Web Performance - A detailed overview

3.506 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
  • Sé el primero en 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

×