State of the resource timing api
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


State of the resource timing api



Presentation at WebPerfDays Amsterdam, May 18 2013. ...

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 174 134 40



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Yes, true. This needs an update and not just because Opera now supports this API.
    Are you sure you want to
    Your message goes here
  • Note that Opera switched to Blink and now they support NavigationTimng, ResourceTiming and UserTiming.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

State of the resource timing api Presentation Transcript

  • 1. State of the Resource Timing APIAaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18 2013
  • 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. 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: ""redirectEnd: 0redirectStart: 0requestStart: 946.9999999962747responseEnd: 980.9999999706633responseStart: 962.9999999962747secureConnectionStart: 0startTime: 298.0000000097789}
  • 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. 12 things you should knowwhen using the API
  • 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. 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:● scheme + host:● scheme + host + port:
  • 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. 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. 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. 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. DNS lookup & Connect timesunavailable in IE10Values of the 4 relevant attributes arealways zero.Its a bug.
  • 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. 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. 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. 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. 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. Some final remarks
  • 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. if one value doesnt make sense, discard all valuesBe safe
  • 21. Thank you !Aaron Petersaaron@turbobytes.comWebPerfDays Amsterdam, May 18