By Ilya Grigorik, Developer Advocate and Web Performance Engineer under one second , and to get there we need to carefully measure and optimize each and every part of our application: how long the page took to load, how long each resource took to load, where the time was spent, and so on.Navigation Timing API gives us the tools to measure all of the critical milestones for the main HTML document: DNS, TCP, request and response, and even DOM-level timing metrics. However, what about all the other resources on the page: CSS, JavaScript, images, as well as dozens of third party components? Well, that’s where the new Resource Timing API can help! img = window.performance.getEntriesByName("http://mysite.com/mylogo.webp" );
var dns = parseInt(img.domainLookupEnd - img.domainLookupStart),
tcp = parseInt(img.connectEnd - img.connectStart),
ttfb = parseInt(img.responseStart - img.startTime),
transfer = parseInt(img.responseEnd - img.responseStart),
total = parseInt(img.responseEnd - img.startTime);
logPerformanceData("mylogo" , dns, tcp, ttfb, transfer, total);
Measuring network performance of third party assets additional opt-in HTTP header to allow the site to gather detailed network timing data. If the header is absent, then the only available data is the total duration of the request. On that note, great news, we have been working with multiple teams, including at Facebook and Disqus, to do exactly that! You can now use the Resource Timing API to track performance of:User Timing API ) to get detailed performance reports, set up an SLA, and more, for each and every asset on your page. Ilya Grigorik is Developer Advocate at Google, where he spends his days and nights on making the web fast and driving adoption of performance best practices. Posted by Scott Knaster , Editor
