How can I check has link[rel=preconnect] done its job or not?

Question

I append link[rel=preconnect] in my page's HTML code. But how can I check works preconnect or not?

Preconnect does not appear in the Network panel of DevTools, I don't see it in chrome://tracing.

Which tools can I use to see this event?

Apportion

This is not really a good question for Stack Overflow, since it's asking for a tool, but I would think that something like Fiddler (on Windows anyway) would be able to track something like that. – Saltigrade

I'm not sure that this tools are good solution because it's difficult to distinguish a preconnect event and a first request to the host. – Apportion

Some useful advice in here too: stackoverflow.com/questions/39629343 – Talkfest

Answer 1

You can use Chrome DevTools for this, manually. Check timing tab of URI for which you defined preconnect, if DNS-Connect-SSL haven't took time or it negligible small (like, 2-5msec), than you can consider preconnect worked. The only trap here is repeated test, when you connection is not expired yet in browser.

Antoinette

Answer 2

You can see it in the waterfall created by https://www.webpagetest.org/

Here is an example:

Note that your website needs to be accessible online, for WebPageTest to be able to read it.

Makowski

Thanks! But is there some ways to check preconnect if you project is inside an intranet? – Apportion

You can try setting up a temporary tunnel to make the website available outside, ngrok.com is the one I use. But both your main domain and the domain you want to preconnect must be made accessible. So if you tunnel the second domain, you'll need to change your code so that it points to the new tunnel domain. – Halloo

The other solution is to setup your own private instance of WebPageTest inside the intranet. Many companies have they own instance so they can do performance checking before pushing projects to production. – Halloo

Answer 3

This tool from DebugBear shows this, and other useful preload / preconnect data:

https://www.debugbear.com/resource-hint-validator

Musquash