Is there a way to programmatically determine in Chrome the assets (CSS, JS etc) that are blocking the page from rendering. As part of this I am looking for measurements from the browser side. Start render:- Is there any API out there that can give me this metric i.e the time when browser actually started the rendering process and all the assets (CSS/JS) that were blocking that i.e blocking the rendering process for the assets to get downloaded first.

Is there a way to programmatically determine in Chrome the assets (CSS, JS etc) that are blocking the page from rendering. As part of this I am looking for measurements from the browser side. Start render:- Is there any API out there that can give me this metric i.e the time when browser actually started the rendering process and all the assets (CSS/JS) that were blocking that i.e blocking the rendering process for the assets to get downloaded first.

• javascript
• css
• google-chrome
• google-chrome-devtools
• web-performance

2 Answers 2

Yes, in the dev tools you can open the Network tab, which shows you all sorts of statistics, including showing you at what point the page rendered, and later when the load event fired.

For instance, here's a screenshot if I load Stack Overflow with a cleared cache:

Note the vertical lines near the end. The blue one is the point at which the content was loaded; the red one the point the load event fired. Looking at the resources that butt up against those lines tells you what was blocking.

But the tool can do more than that. This article goes into the process in more detail.

For programmatic access, look at window.performance and its getEntries method, e.g.:

window.performance.getEntries()

Here's an example where I typed that into the console and expanded the first entry:

That first entry as text:

connectEnd: 318.01
connectStart: 318.01
domainLookupEnd: 318.01
domainLookupStart: 318.01
duration: 24.845000000000027
entryType: "resource"
fetchStart: 318.01
initiatorType: "script"
name: "http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"
redirectEnd: 0
redirectStart: 0
requestStart: 322.99
responseEnd: 342.855
responseStart: 323.89500000000004
secureConnectionStart: 0
startTime: 318.01
workerStart: 0

That API is described here.

WebPageTest is a free tool that allows you to analyze the network and browser activity of a given page. Using this tool, you can answer this question in a few simple steps.

I ran a test against stackoverflow. for demonstration. Here are the results: http://www.webpagetest/result/151220_VX_ace62f5c0dc195c1b597436a34a9d1e5/1/details/#tableDetails

The first 14 requests are highlighted in green, signifying that they all occurred before the first paint (aka start render) of the page.

Since you ask for a programmatic way to get this information, you can use the WebPageTest API (or the node.js API wrapper) to submit the test and analyze the results.

Using the API would go something like this:

1. Get an API key. This is required to use the API of the public instance. You could also spin up your own private instance, which doesn't require a key and you could test against internal development web servers if you desire.
2. Submit a test against your web page.
3. Poll for the results to be plete.

4. Save the median test run. This will make the next few lines of code easier to read.

   var test = result.data.median.firstView;
   

5. Get the first paint time. For the test with the median load time, you can access this metric at test.firstPaint. The result in the example case is 1517 milliseconds.

   var firstPaintTime = test.firstPaint;
   

6. Iterate through the requests and save each one that starts before the first paint time.

   var blockingRequests = test.requests.filter(function(request) {
     return request.load_start < firstPaintTime;
   });
   

7. Map the list of requests to list of URLs.

   var blockingURLs = blockingRequests.map(function(request) {
     return request.full_url;
   });
   

Voila, you end up with a list of URLs that block rendering:

["http://stackoverflow./", "http://cdn.sstatic/stackoverflow/all.css?v=019092e20b09", "https://i.sstatic/tKsDb.png", "http://cdn.sstatic/Js/stub.en.js?v=2ad47c1cbf74", "http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js", "https://i.sstatic/uE37r.png", "https://i.sstatic/BfCOt.png", "https://i.sstatic/sCwbu.png", "https://i.sstatic/atMwl.png", "http://cdn.sstatic/img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic/stackoverflow/img/sprites.svg?v=a7723f5f7e59", "http://cdn.sstatic/Img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic/img/favicons-sprite16.png?v=5f1c9ad029b2ea2d9d06ae792ba589ab", "http://cdn.sstatic/Js/full-anon.en.js?v=5552791d9794"]

If you want to find out more about how to use WebPageTest to do things like this, check out my book Using WebPageTest.