1

I have doubts the rel-prefetch I am using are really performed as expected. Indeed, I don't see on webpagetest the dns part seperated form the rest of the line as it should be (see https://stackoverflow.com/a/40380983/1467802 or by one of the chart here about google analytics https://christoph-rumpel.com/2013/04/front-end-performance-part-01-assets-loading/ loading)

View.html

<link rel="dns-prefetch" href="https://connect.facebook.net" />
<link rel="dns-prefetch" href="https://www.facebook.com" /> 
<link rel="preconnect" href="https://connect.facebook.net" />
<link rel="preconnect" href="https://www.facebook.com" />

In my page I'm calling the following facebook sdk only when a user clicks a button

$('#button").on('click', function(e) {
  window.fbAsyncInit = function() {
      FB.init({
        appId             : fbAppId,
        autoLogAppEvents  : true,
        status            : false,
        xfbml             : true,
        version           : 'v2.11'
      });

    };
    (function(d, s, id){
      console.log('LIBRARY - Loading and initializing Facebook javascript SDK');
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk')
    );
});

So when I load the page and check Chrome Dev Tools, I was expecting not to see the sdk (that's to be expected as it will only load when I click the #button) but at least to see somewhere the dns lookup already but I don't see any sign/hints about this prefetch request on the Network tab nor on the Performance tab. And when I click the #button, a line appears for sdk.js in Network tab but checking the Timing details, I see the dns is just before the rets, there's no "gap" between them ,and it seems it did not occur well before the rest as it should have.

How and where to spot those "dns prefetching" inside Chrome Dev tools.

I'm giving here the example of fb script but for my other scripts it's the same thing.

Mathieu
  • 4,587
  • 11
  • 57
  • 112
  • 3
    You might need to look in `chrome://net-export/`. – Josh Lee Feb 09 '18 at 15:35
  • did not know this tool. just tried, very powerful a lot of info:) I did 2 tests with this tool by loading and recording then analyzing the load of the website. So strange. A first test with all my link rel dns-prefetch (among which the one for fb sdk) : the "DNS" tab shows indeed dns request at the time I loaded the page to facebook.com and https://connect.facebook.net. that's cool, thought it was working since there was a dns call BEFORE i clicked the button( I did not click); but then I removed all the rel dns-prefetch, and i still find in the chrome tool dns requets to fb... – Mathieu Feb 09 '18 at 16:01
  • how can it send dns requets to facebook in the second experiment before I click the button??? so strange .I'm sure the sdk instanciated by javascript is not loaded BEFORE the button is clicked, because before this you don't see it appear on chrome dev tools Network tab but when you click, you see it appear. So the js works fine. – Mathieu Feb 09 '18 at 16:02
  • Is it possible tjs js is loaded so fast that the js code instanciating fb.sdk is parsed and launches a dns requets even BEFORE the link rel-prefetch (which is on top of my just below charset tag) is reached ...so it launches "too fast"? I would doubt that... – Mathieu Feb 09 '18 at 16:05
  • @JoshLee retried to analyze the net-export data, and you were right, it works and proves that the dns calls are made ONLY when I have link rel dns-prefetch. So it proves my link rel dns-prefetch work. Thanks for your help. Would learn one day maybe how to spot the dns request inside the chrome dev tools performance/timeline or maybe it's normal not to see them there. As your answer is the right one, can you put it as an answer so that I can give you some SO points:) – Mathieu Feb 09 '18 at 22:03
  • It sounds like you can post an answer that shows where in the net-export log the dns-prefetch and preconnect are actually seen. I didn't actually check. – Josh Lee Feb 09 '18 at 22:23

1 Answers1

1

Answering an old but still relevant question here.

You can use 'Chrome Network Log Export' combined with 'netlog-viewer'. On his blog Andy Davies wrote a great article on how to do this (and some other methods to analyze preconnect).

Short version

  1. Open a new tab in Chrome with address: chrome://net-export/
  2. Click 'Start logging to disk' and select a location for the log file
  3. Import the log file on https://netlog-viewer.appspot.com/
  4. Open the 'Events' tab
  5. Search for the 'HTTP_STREAM_JOB_CONTROLLER` entry for the required URL
  6. When clicked the event details show is_preconnect = true when pre-connection was used
Jopr
  • 310
  • 3
  • 8