Search code examples
javascriptcssgoogle-chromegoogle-chrome-devtoolsweb-performance

How to find resources(CSS , JS Etc) that are blocking in Chrome

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.

Solution

  • 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.com for demonstration. Here are the results: http://www.webpagetest.org/result/151220_VX_ace62f5c0dc195c1b597436a34a9d1e5/1/details/#tableDetailsScreenshot of WebPageTest request details

    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 complete.

    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.com/", "http://cdn.sstatic.net/stackoverflow/all.css?v=019092e20b09", "https://i.sstatic.net/tKsDb.png", "http://cdn.sstatic.net/Js/stub.en.js?v=2ad47c1cbf74", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "https://i.sstatic.net/uE37r.png", "https://i.sstatic.net/BfCOt.png", "https://i.sstatic.net/sCwbu.png", "https://i.sstatic.net/atMwl.png", "http://cdn.sstatic.net/img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59", "http://cdn.sstatic.net/Img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/img/favicons-sprite16.png?v=5f1c9ad029b2ea2d9d06ae792ba589ab", "http://cdn.sstatic.net/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.