SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
State of the Resource Timing API
Aaron Peters
aaron@turbobytes.com
WebPerfDays Amsterdam, May 18 2013
What is the Resource Timing API?
API in the browser that exposes load time data for page
resources. "Navigation Timing API for for page objects"
How get timing data via the API?
window.performance.getEntriesByType("resource")[1] {
connectEnd: 298.0000000097789
connectStart: 298.0000000097789
domainLookupEnd: 298.0000000097789
domainLookupStart: 298.0000000097789
duration: 682.9999999608845
entryType: "resource"
fetchStart: 298.0000000097789
initiatorType: "css"
name: "http://st.cdnplanet.com/static/fonts/amaranth-bold-webfont.woff"
redirectEnd: 0
redirectStart: 0
requestStart: 946.9999999962747
responseEnd: 980.9999999706633
responseStart: 962.9999999962747
secureConnectionStart: 0
startTime: 298.0000000097789
}
Is the API ready for use?
Spec is not final yet. W3C Candidate Recommendation
API currently implemented in a few browsers:
● IE10
● Chrome, Chrome Mobile, Chrome Frame
Does it behave constistently & according to the spec?
12 things you should know
when using the API
When does the API make data
available for a resource?
While it's loading (OMG!)
Bug? Yes, but useful
"Did main.css finish
loading within 5 seconds?"
After the resource has
finished loading
This is according to spec
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/
Detect browser disk cache hits
Yes, you can!
if(
requestStart == fetchStart &&
requestStart == responseStart &&
responseStart != responseEnd
) { // disk cache hit }
Note: IE10 Dev Tools shows 304 when
actually is a disk cache hit.
Yes, you can!
if(
domainLookupStart != 0 &&
requestStart == 0
) { //disk cache hit }
Chrome says it's a bug, I
say it is a feature
Browser memory cache hits?
Not exposed by the API:
there is no data for the
resource
This is a bug
???
I have no idea how to test
for a memory cache hit in
IE10
Detect 4xx/5xx responses?
Not exposed by the API:
there is no data for the
resource
This is a bug
Data available via API
Looks same as cross-origin
200 response without
valid T-A-O header: all
timing attributes equal
zero, except startTime,
fetchStart, duration and
responseEnd
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! }
DNS lookup & Connect times
unavailable in IE10
Values of the 4 relevant attributes are
always zero.
It's a bug.
IE10, y u no show SSL time?
sslTime = connectEnd -
secureConnectionStart
Chrome's behavior is in
line with Navigation
Timing API behavior, but
Resource Timing spec has
conflicting info. That will
be fixed.
Not exposed by the API
secureConnectionStart
attribute is not present !
Actually, the attribute is
optional according to the
spec
Track 'wait time'
How long is a resource in queue, waiting to be fetched?
If many resources have high waitTime, there is an
optimization opportunity (domain sharding?)
if(connectEnd == fetchStart){
waitTime = requestStart - connectEnd
} else {
waitTime = domainLookupStart - fetchStart
}
duration is useless
Same origin resource ||
valid T-A-O header
Has no added value.
What specific insight can
be gained from duration?
Cross-origin resource
No insight in split between
'wait time' and 'load time',
so how can duration
possibly be informative?
duration = responseEnd - startTime
Ignore all data in Chrome Frame
Data is exposed by the API, but it's bad data.
Objects fetched over network 'look' like browser disk
cache hits
if(!window.externalHost){ // not Chrome Frame }
Bytesize is not exposed :(
You can't know how many bytes were transferred.
A deliberate 'feature', for security reasons.
I strongly disagree. Knowing the bytesize is essential
for 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!
Some final remarks
Chrome currently uses a vendor prefix, eg.
webkitGetEntriesByType("resource")
When they switch to Blink, the prefix will be gone
Firefox will support the API soon(-ish), likely sans prefix.
Low activity on bug 822480
Safari & Opera will likely not have the API anytime soon:
they don't even support Navigation Timing API !
Future browser support
if one value doesn't make sense, discard all values
Be safe
Thank you !
Aaron Peters
aaron@turbobytes.com
WebPerfDays Amsterdam, May 18 2013
www.aaronpeters.nl/blog/state-of-resource-timing-api

Weitere ähnliche Inhalte

Was ist angesagt?

@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web SitesSteve Souders
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
Your Script Just Killed My Site
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My SiteSteve Souders
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...MilanAryal
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At NetflixRyan Anklam
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Matt Raible
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425Media Gorod
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsAndy Davies
 

Was ist angesagt? (20)

@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
do u webview?
do u webview?do u webview?
do u webview?
 
Your Script Just Killed My Site
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My Site
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Metrics of Joy
Metrics of JoyMetrics of Joy
Metrics of Joy
 
Cache is King
Cache is KingCache is King
Cache is King
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At Netflix
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
 

Ähnlich wie State of the resource timing api

Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) SOASTA
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Cliff Crocker
 
Performance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumPerformance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumMark Watson
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
Sherlock Homepage - A detective story about running large web services - WebN...
Sherlock Homepage - A detective story about running large web services - WebN...Sherlock Homepage - A detective story about running large web services - WebN...
Sherlock Homepage - A detective story about running large web services - WebN...Maarten Balliauw
 
Sherlock Homepage (Maarten Balliauw)
Sherlock Homepage (Maarten Balliauw)Sherlock Homepage (Maarten Balliauw)
Sherlock Homepage (Maarten Balliauw)Visug
 
Sherlock Homepage - A detective story about running large web services (VISUG...
Sherlock Homepage - A detective story about running large web services (VISUG...Sherlock Homepage - A detective story about running large web services (VISUG...
Sherlock Homepage - A detective story about running large web services (VISUG...Maarten Balliauw
 
Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Web Directions
 
Sherlock Homepage - A detective story about running large web services - NDC ...
Sherlock Homepage - A detective story about running large web services - NDC ...Sherlock Homepage - A detective story about running large web services - NDC ...
Sherlock Homepage - A detective story about running large web services - NDC ...Maarten Balliauw
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocratJonathan Linowes
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsNicholas Jansma
 
Measuring User Experience in the Browser
Measuring User Experience in the BrowserMeasuring User Experience in the Browser
Measuring User Experience in the BrowserAlois Reitbauer
 
Play framework productivity formula
Play framework   productivity formula Play framework   productivity formula
Play framework productivity formula Sorin Chiprian
 
Build a Node.js Client for Your REST+JSON API
Build a Node.js Client for Your REST+JSON APIBuild a Node.js Client for Your REST+JSON API
Build a Node.js Client for Your REST+JSON APIStormpath
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaYevgeniy Brikman
 
Web Standards Support in WebKit
Web Standards Support in WebKitWeb Standards Support in WebKit
Web Standards Support in WebKitJoone Hur
 
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac DawsonCODE BLUE
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHPKing Foo
 
Comet from JavaOne 2008
Comet from JavaOne 2008Comet from JavaOne 2008
Comet from JavaOne 2008Joe Walker
 

Ähnlich wie State of the resource timing api (20)

Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
 
Performance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumPerformance Metrics in a Day with Selenium
Performance Metrics in a Day with Selenium
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Sherlock Homepage - A detective story about running large web services - WebN...
Sherlock Homepage - A detective story about running large web services - WebN...Sherlock Homepage - A detective story about running large web services - WebN...
Sherlock Homepage - A detective story about running large web services - WebN...
 
Sherlock Homepage (Maarten Balliauw)
Sherlock Homepage (Maarten Balliauw)Sherlock Homepage (Maarten Balliauw)
Sherlock Homepage (Maarten Balliauw)
 
Sherlock Homepage - A detective story about running large web services (VISUG...
Sherlock Homepage - A detective story about running large web services (VISUG...Sherlock Homepage - A detective story about running large web services (VISUG...
Sherlock Homepage - A detective story about running large web services (VISUG...
 
Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5
 
Sherlock Homepage - A detective story about running large web services - NDC ...
Sherlock Homepage - A detective story about running large web services - NDC ...Sherlock Homepage - A detective story about running large web services - NDC ...
Sherlock Homepage - A detective story about running large web services - NDC ...
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
 
Using Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsUsing Modern Browser APIs to Improve the Performance of Your Web Applications
Using Modern Browser APIs to Improve the Performance of Your Web Applications
 
Measuring User Experience in the Browser
Measuring User Experience in the BrowserMeasuring User Experience in the Browser
Measuring User Experience in the Browser
 
Play framework productivity formula
Play framework   productivity formula Play framework   productivity formula
Play framework productivity formula
 
Build a Node.js Client for Your REST+JSON API
Build a Node.js Client for Your REST+JSON APIBuild a Node.js Client for Your REST+JSON API
Build a Node.js Client for Your REST+JSON API
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
 
Web Standards Support in WebKit
Web Standards Support in WebKitWeb Standards Support in WebKit
Web Standards Support in WebKit
 
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson
[CB16] 80時間でWebを一周:クロムミウムオートメーションによるスケーラブルなフィンガープリント by Isaac Dawson
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHP
 
Comet from JavaOne 2008
Comet from JavaOne 2008Comet from JavaOne 2008
Comet from JavaOne 2008
 

Kürzlich hochgeladen

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 

Kürzlich hochgeladen (20)

20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 

State of the resource timing api

  • 1. State of the Resource Timing API Aaron Peters aaron@turbobytes.com WebPerfDays Amsterdam, May 18 2013
  • 2. What is the Resource Timing API? API in the browser that exposes load time data for page resources. "Navigation Timing API for for page objects"
  • 3. How get timing data via the API? window.performance.getEntriesByType("resource")[1] { connectEnd: 298.0000000097789 connectStart: 298.0000000097789 domainLookupEnd: 298.0000000097789 domainLookupStart: 298.0000000097789 duration: 682.9999999608845 entryType: "resource" fetchStart: 298.0000000097789 initiatorType: "css" name: "http://st.cdnplanet.com/static/fonts/amaranth-bold-webfont.woff" redirectEnd: 0 redirectStart: 0 requestStart: 946.9999999962747 responseEnd: 980.9999999706633 responseStart: 962.9999999962747 secureConnectionStart: 0 startTime: 298.0000000097789 }
  • 4. Is the API ready for use? Spec is not final yet. W3C Candidate Recommendation API currently implemented in a few browsers: ● IE10 ● Chrome, Chrome Mobile, Chrome Frame Does it behave constistently & according to the spec?
  • 5. 12 things you should know when using the API
  • 6. When does the API make data available for a resource? While it's loading (OMG!) Bug? Yes, but useful "Did main.css finish loading within 5 seconds?" After the resource has finished loading This 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: www.aaronpeters.nl ● scheme + host: http://www.aaronpeters.nl/ ● scheme + host + port: http://www.aaronpeters.nl: 80/
  • 8. Detect browser disk cache hits Yes, you can! if( requestStart == fetchStart && requestStart == responseStart && responseStart != responseEnd ) { // disk cache hit } Note: IE10 Dev Tools shows 304 when actually is a disk cache hit. Yes, you can! if( domainLookupStart != 0 && requestStart == 0 ) { //disk cache hit } Chrome says it's a bug, I say it is a feature
  • 9. Browser memory cache hits? Not exposed by the API: there is no data for the resource This is a bug ??? I have no idea how to test for a memory cache hit in IE10
  • 10. Detect 4xx/5xx responses? Not exposed by the API: there is no data for the resource This is a bug Data available via API Looks same as cross-origin 200 response without valid T-A-O header: all timing attributes equal zero, except startTime, fetchStart, duration and responseEnd
  • 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 times unavailable in IE10 Values of the 4 relevant attributes are always zero. It's a bug.
  • 13. IE10, y u no show SSL time? sslTime = connectEnd - secureConnectionStart Chrome's behavior is in line with Navigation Timing API behavior, but Resource Timing spec has conflicting info. That will be fixed. Not exposed by the API secureConnectionStart attribute is not present ! Actually, the attribute is optional according to the spec
  • 14. Track 'wait time' How long is a resource in queue, waiting to be fetched? If many resources have high waitTime, there is an optimization opportunity (domain sharding?) if(connectEnd == fetchStart){ waitTime = requestStart - connectEnd } else { waitTime = domainLookupStart - fetchStart }
  • 15. duration is useless Same origin resource || valid T-A-O header Has no added value. What specific insight can be gained from duration? Cross-origin resource No insight in split between 'wait time' and 'load time', so how can duration possibly be informative? duration = responseEnd - startTime
  • 16. Ignore all data in Chrome Frame Data is exposed by the API, but it's bad data. Objects fetched over network 'look' like browser disk cache hits if(!window.externalHost){ // not Chrome Frame }
  • 17. Bytesize is not exposed :( You can't know how many bytes were transferred. A deliberate 'feature', for security reasons. I strongly disagree. Knowing the bytesize is essential for 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!
  • 19. Chrome currently uses a vendor prefix, eg. webkitGetEntriesByType("resource") When they switch to Blink, the prefix will be gone Firefox will support the API soon(-ish), likely sans prefix. Low activity on bug 822480 Safari & Opera will likely not have the API anytime soon: they don't even support Navigation Timing API ! Future browser support
  • 20. if one value doesn't make sense, discard all values Be safe
  • 21. Thank you ! Aaron Peters aaron@turbobytes.com WebPerfDays Amsterdam, May 18 2013 www.aaronpeters.nl/blog/state-of-resource-timing-api