performance from the user's perspective

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

Upload: orangecoding

Post on 25-May-2015

172 views

Category:

Technology


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Performance from the user's perspective

Performancefrom the User‘s perspective

http://github.com/orangecoding

@Orangecoding

Page 2: Performance from the user's perspective

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 ?

Page 3: Performance from the user's perspective

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

Page 4: Performance from the user's perspective

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??

Page 5: Performance from the user's perspective

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?

Page 6: Performance from the user's perspective

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})

Page 7: Performance from the user's perspective

Internet

3 Partyrd

Content Server

Processing

Visibility ends here

Page 8: Performance from the user's perspective

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

Page 9: Performance from the user's perspective

User hits enter(w3c.org)

User can actually use the page

what happens here?

Page 10: Performance from the user's perspective

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,

Page 11: Performance from the user's perspective

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

Page 12: Performance from the user's perspective

Can we already use it..?

Page 13: Performance from the user's perspective

Demo

Page 14: Performance from the user's perspective

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