The performance report in Google Lighthouse made the following recommendation:
Avoid multiple, costly round trips to any origin
"Avoid multiple, costly round trips to any origin"...It then proceeds to list 8 origins.
So, I added the following code to the top of the <head> section of my site, where the hrefs correspond to each origin.
<link rel='preconnect' href='https://connect.facebook.net' />
<link rel='preconnect' href='https://img.secureserver.net' />
<link rel='preconnect' href='https://advertise.bingads.microsoft.com' />
<link rel='preconnect' href='https://advertiseonbing.blob.core.windows.net' />
<link rel='preconnect' href='https://www.gstatic.com' />
<link rel='preconnect' href='https://js.calltrk.com' />
<link rel='preconnect' href='https://px.ads.linkedin.com' />
<link rel='preconnect' href='https://www.facebook.com' />
<link rel='preconnect' href='https://accounts.google.com' />
I also tried them with <link rel='dns-prefetch' /> and some combination of that and other browser hints.
However, nothing changed in the Lighthouse reports after running it again some time later. Could someone steer me in the right direction so I can resolve that issue in Lighthouse and get one step closer to having a perfect report?!
Edit: I have a guess for why doing this might not make a difference in the Lighthouse Report, and it's that the resources are called in the document before the preconnect has even finished. So even though it technically starts a little sooner and saves some ms, the rest of the document is so small and it requests those resources before the prefetch or preconnect is even completed. Sound logical?
