performance from the user's perspective

Performancefrom the User‘s perspective

http://github.com/orangecoding

@Orangecoding

We m e a s u r e h e r e

B u t s h o u l d n ‘ t w e

m e a s u r e h e r e ?

What we really measure...

User hits enter(w3c.org)

Stuff is beeing send to the user

{Server does something}

User can actually use the pageStuff is beeing send to the user

What we really measure...

User hits enter(w3c.org)

Stuff is beeing send to the user

{Server does something}

User can actually use the page

what happens here?

Yeah, but when??

What we really measure...

User hits enter(w3c.org)

Stuff is beeing send to the user

{Server does something}

User can actually use the page

what happens here?

What we really measure...

User hits enter(w3c.org)

Stuff is beeing send to the user

{Server does something}

User can actually use the page

what happens here?

jQuery(document).onReady(function(){ //measure time})

Internet

3 Partyrd

Content Server

Processing

Visibility ends here

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

User hits enter(w3c.org)

User can actually use the page

what happens here?

Name DescriptionnavigationStart load/unload Event was triggered

fetchStart Moment just before the browser starts to do anything.

domainLookupStartMoment just before browser checks DNS to resolve domain name.

connectStartTime when browser starts connecting to the server. If == cache, value same as domainLookupEnd.

requestStartThe moment just before browser starts requesting the resource (from server or cache)

responseStartReturns the time just after browser receives first byte of 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,

■ 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.

Can we already use it..?

Demo

Thanks for listening...

http://github.com/orangecoding

@Orangecoding

Demo/Bookmarklet (1) © by Kaaes --> http://kaaes.github.com/timing/

Weitere Erklärungen auf HTML5Rocks.comhttp://goo.gl/iK0y1