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.479 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
0 comentarios
6 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
3.479
En SlideShare
0
De insertados
0
Número de insertados
1.207
Acciones
Compartido
0
Descargas
47
Comentarios
0
Recomendaciones
6
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 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

    ×