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


Tags: javascript,css,google-chrome,google-chrome-devtools,web-performance

Problem :

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", "http://i.stack.imgur.com/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", "http://i.stack.imgur.com/uE37r.png", "http://i.stack.imgur.com/BfCOt.png", "http://i.stack.imgur.com/sCwbu.png", "http://i.stack.imgur.com/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.


    CSS Howto..

    How to override PrimeFace CSS to customize my button?

    how would you set up the GUI for a web-based board game structure?

    How to place 3 different paragraphs next to each other?

    Angularjs: How to *retrieve* css property from element in directive?

    How do display a CMS collection in an ASP.net page using an XSLT file

    How to use the .css function with jQuery

    How to check if a css/js resource is included in head

    How to get a reference to id=“xxx.yyy” in CSS?

    how to move scrollbar from left to right in css?

    how to change height of div to covered the text area (CSS)

    How to put a css tag in an element if another has this element [closed]

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to make a “wrappanel” in html?

    CSS How to apply child:hover but not parent:hover

    How to remove strange border from css-animated clip-path?

    How to detect all events added on a div

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    How to scale canvas and keep its position on screen?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to create a pop up animation with a modal using css?

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How can I add flashing effect to an option tag?

    how to custmize font awasome icons using cheat sheet in css?

    How can I find the css error when I run a jquery plugin on IE8?

    how do I use the :valid and :invalid selectors for css?

    How to make CSS zig-zag borders? [duplicate]

    Markup/Style best practices: How to efficiently distribute style rules over CSS classes?

    How to style the last element before another specific element in CSS? [duplicate]

    How to use Bootstrap Glyphicons in Holder.js images

    How to arrange images at middle of vertical using css?