State of the Resource Timing APIAaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18 2013
What is the Resource Timing API?API in the browser that exposes load time data for pageresources. "Navigation Timing API f...
How get timing data via the API?window.performance.getEntriesByType("resource")[1] {connectEnd: 298.0000000097789connectSt...
Is the API ready for use?Spec is not final yet. W3C Candidate RecommendationAPI currently implemented in a few browsers:● ...
12 things you should knowwhen using the API
When does the API make dataavailable for a resource?While its loading (OMG!)Bug? Yes, but useful"Did main.css finishloadin...
Timing-Allow-Origin: must be *Spec states: T-A-O must be either origin-list-or-null(RFC 6454) or *In both browsers, only *...
Detect browser disk cache hitsYes, you can!if(requestStart == fetchStart &&requestStart == responseStart &&responseStart !...
Browser memory cache hits?Not exposed by the API:there is no data for theresourceThis is a bug???I have no idea how to tes...
Detect 4xx/5xx responses?Not exposed by the API:there is no data for theresourceThis is a bugData available via APILooks s...
domainLookupStart = 0, huh?Sometimes, in Chrome, domainLookupStart = 0,even when a valid Timing-Allow-Header is present.Th...
DNS lookup & Connect timesunavailable in IE10Values of the 4 relevant attributes arealways zero.Its a bug.
IE10, y u no show SSL time?sslTime = connectEnd -secureConnectionStartChromes behavior is inline with NavigationTiming API...
Track wait timeHow long is a resource in queue, waiting to be fetched?If many resources have high waitTime, there is anopt...
duration is uselessSame origin resource ||valid T-A-O headerHas no added value.What specific insight canbe gained from dur...
Ignore all data in Chrome FrameData is exposed by the API, but its bad data.Objects fetched over network look like browser...
Bytesize is not exposed :(You cant know how many bytes were transferred.A deliberate feature, for security reasons.I stron...
Some final remarks
Chrome currently uses a vendor prefix, eg.webkitGetEntriesByType("resource")When they switch to Blink, the prefix will be ...
if one value doesnt make sense, discard all valuesBe safe
Thank you !Aaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18 2013www.aaronpeters.nl/blog/state-of-resource-tim...
Upcoming SlideShare
Loading in …5
×

State of the resource timing api

3,142 views

Published on

Presentation at WebPerfDays Amsterdam, May 18 2013.

This newish browser API can be used to gain insight in the load time of individual page resources. Does the API behave consistently and as expected? Short answer: no, not really. Long answer: view the presentation ;-)

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
3,142
On SlideShare
0
From Embeds
0
Number of Embeds
123
Actions
Shares
0
Downloads
18
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

State of the resource timing api

  1. 1. State of the Resource Timing APIAaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18 2013
  2. 2. What is the Resource Timing API?API in the browser that exposes load time data for pageresources. "Navigation Timing API for for page objects"
  3. 3. How get timing data via the API?window.performance.getEntriesByType("resource")[1] {connectEnd: 298.0000000097789connectStart: 298.0000000097789domainLookupEnd: 298.0000000097789domainLookupStart: 298.0000000097789duration: 682.9999999608845entryType: "resource"fetchStart: 298.0000000097789initiatorType: "css"name: "http://st.cdnplanet.com/static/fonts/amaranth-bold-webfont.woff"redirectEnd: 0redirectStart: 0requestStart: 946.9999999962747responseEnd: 980.9999999706633responseStart: 962.9999999962747secureConnectionStart: 0startTime: 298.0000000097789}
  4. 4. Is the API ready for use?Spec is not final yet. W3C Candidate RecommendationAPI currently implemented in a few browsers:● IE10● Chrome, Chrome Mobile, Chrome FrameDoes it behave constistently & according to the spec?
  5. 5. 12 things you should knowwhen using the API
  6. 6. When does the API make dataavailable for a resource?While its loading (OMG!)Bug? Yes, but useful"Did main.css finishloading within 5 seconds?"After the resource hasfinished loadingThis is according to spec
  7. 7. Timing-Allow-Origin: must be *Spec states: T-A-O must be either origin-list-or-null(RFC 6454) or *In both browsers, only * works.This does not work today:● host: www.aaronpeters.nl● scheme + host: http://www.aaronpeters.nl/● scheme + host + port: http://www.aaronpeters.nl:80/
  8. 8. Detect browser disk cache hitsYes, you can!if(requestStart == fetchStart &&requestStart == responseStart &&responseStart != responseEnd) { // disk cache hit }Note: IE10 Dev Tools shows 304 whenactually is a disk cache hit.Yes, you can!if(domainLookupStart != 0 &&requestStart == 0) { //disk cache hit }Chrome says its a bug, Isay it is a feature
  9. 9. Browser memory cache hits?Not exposed by the API:there is no data for theresourceThis is a bug???I have no idea how to testfor a memory cache hit inIE10
  10. 10. Detect 4xx/5xx responses?Not exposed by the API:there is no data for theresourceThis is a bugData available via APILooks same as cross-origin200 response withoutvalid T-A-O header: alltiming attributes equalzero, except startTime,fetchStart, duration andresponseEnd
  11. 11. domainLookupStart = 0, huh?Sometimes, in Chrome, domainLookupStart = 0,even when a valid Timing-Allow-Header is present.This is always impossible.if(domainLookupStart < fetchStart){ // abort! }
  12. 12. DNS lookup & Connect timesunavailable in IE10Values of the 4 relevant attributes arealways zero.Its a bug.
  13. 13. IE10, y u no show SSL time?sslTime = connectEnd -secureConnectionStartChromes behavior is inline with NavigationTiming API behavior, butResource Timing spec hasconflicting info. That willbe fixed.Not exposed by the APIsecureConnectionStartattribute is not present !Actually, the attribute isoptional according to thespec
  14. 14. Track wait timeHow long is a resource in queue, waiting to be fetched?If many resources have high waitTime, there is anoptimization opportunity (domain sharding?)if(connectEnd == fetchStart){waitTime = requestStart - connectEnd} else {waitTime = domainLookupStart - fetchStart}
  15. 15. duration is uselessSame origin resource ||valid T-A-O headerHas no added value.What specific insight canbe gained from duration?Cross-origin resourceNo insight in split betweenwait time and load time,so how can durationpossibly be informative?duration = responseEnd - startTime
  16. 16. Ignore all data in Chrome FrameData is exposed by the API, but its bad data.Objects fetched over network look like browser diskcache hitsif(!window.externalHost){ // not Chrome Frame }
  17. 17. Bytesize is not exposed :(You cant know how many bytes were transferred.A deliberate feature, for security reasons.I strongly disagree. Knowing the bytesize is essentialfor understanding resource load time.Why not make it opt-in to expose bytesize?Let the publisher be in control!This discussion with the Working Group is not finished!
  18. 18. Some final remarks
  19. 19. Chrome currently uses a vendor prefix, eg.webkitGetEntriesByType("resource")When they switch to Blink, the prefix will be goneFirefox will support the API soon(-ish), likely sans prefix.Low activity on bug 822480Safari & Opera will likely not have the API anytime soon:they dont even support Navigation Timing API !Future browser support
  20. 20. if one value doesnt make sense, discard all valuesBe safe
  21. 21. Thank you !Aaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18 2013www.aaronpeters.nl/blog/state-of-resource-timing-api

×