performance from the user's perspective
DESCRIPTION
The slides from my techtalk "Performance from the user's perspective"TRANSCRIPT
![Page 1: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/1.jpg)
Performancefrom the User‘s perspective
http://github.com/orangecoding
@Orangecoding
![Page 2: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/7.jpg)
Internet
3 Partyrd
Content Server
Processing
Visibility ends here
![Page 8: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/8.jpg)
Navigation.timing(http://www.w3.org/TR/navigation-timing/)
![Page 9: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/9.jpg)
User hits enter(w3c.org)
User can actually use the page
what happens here?
![Page 10: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/11.jpg)
■ 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](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/12.jpg)
Can we already use it..?
![Page 13: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/13.jpg)
Demo
![Page 14: Performance from the user's perspective](https://reader034.vdocuments.net/reader034/viewer/2022052321/55620a74d8b42a7d028b4a4d/html5/thumbnails/14.jpg)
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