The slides from my techtalk "Performance from the user's perspective"

1. Performance
from the User‘s perspective
@Orangecoding
http://github.com/orangecoding

2. We m e a s u r e h e r e
But shouldn‘t we
measure here?

3. What we really measure...
Stuff is beeing send to the user
{Server does something}
User hits enter
User can actually use the page
(w3c.org)

4. What we really measure...
Stuff is beeing send to the user
{Server does something} what happens here?
User hits enter
User can actually use the page
(w3c.org)
Yeah,
but when??

5. What we really measure...
Stuff is beeing send to the user
{Server does something} what happens here?
User hits enter
User can actually use the page
(w3c.org)

6. What we really measure...
jQuery(document).onReady(function(){
//measure time
})
Stuff is beeing send to the user
{Server does something} what happens here?
User hits enter
User can actually use the page
(w3c.org)

7. Visibility ends here
Internet
Content Server
rd
3 Party
Proce
ssing

8. Navigation.timing
(http://www.w3.org/TR/navigation-timing/)

9. what happens here?
User hits enter User can actually use the page
(w3c.org)

10. Name Description
navigationStart load/unload Event was triggered
fetchStart Moment just before the browser starts to do anything.
Moment just before browser checks DNS to resolve
domainLookupStart
domain name.
Time when browser starts connecting to the server. If ==
connectStart
cache, value same as domainLookupEnd.
The moment just before browser starts requesting the
requestStart
resource (from server or cache)
Returns the time just after browser receives first byte of
responseStart
the response from server, cache or local resource.
domContentLoadedEventStart The time just before onDocumentReady event is fired,
loadEventStart The time just before onLoad event is fired,

11. ■ Network latency: responseEnd-fetchStart
■ The time taken for page load once the page is received from the server: loadEventEnd-responseEnd
■ The whole process of navigation and page load: loadEventEnd-navigationStart.

12. Can we already use it..?

13. Demo

14. Thanks for listening...
@Orangecoding
http://github.com/orangecoding
Weitere Erklärungen auf HTML5Rocks.com
http://goo.gl/iK0y1
Demo/Bookmarklet (1) © by Kaaes
--> http://kaaes.github.com/timing/