Consider an events page whose first-screen photo comes from an image service. The browser discovers that service only after a stylesheet or application code supplies the image URL. If that connection is on the loading path, the head can name the origin sooner:
<link rel="preconnect" href="https://images.example.com">
images.example.com is a placeholder for the service your page actually contacts. Adding this line to a page with no requests to that origin only creates avoidable work.
Point at the origin that receives the request
An origin includes scheme, hostname, and port. For an image at https://images.example.com/events/hall.webp, the relevant value is https://images.example.com. A path does not select an image for preconnect.
Use the final resource host, which may differ from the service's marketing website or the host that supplies a small CSS response. If a stylesheet from one origin points to a font on another, a connection prepared for the stylesheet host does not automatically prepare the font host.
For a cross-origin font connection, an anonymous connection hint is commonly written as:
<link rel="preconnect"
href="https://fonts.example.com"
crossorigin>
The empty crossorigin attribute selects anonymous CORS settings. Match the consuming resource's request requirements rather than copying the attribute into every hint. The link element reference documents the attribute, and the crossorigin guide explains why client settings and server permission are separate.
Decide whether connection work is the delay
Inspect the real page's Network waterfall. A slow resource may be waiting on connection setup, server response, discovery by JavaScript, or download size. Preconnect addresses connection preparation. It cannot make a large photo smaller, correct a missing URL, or make delayed application code execute sooner.
When the exact critical file is already known and discovered late, a preload may address the more specific problem. Preconnect names an origin; preload names a resource. These are different decisions, so adding both everywhere provides no automatic benefit.
Avoid preconnecting to a long list of third parties. Connections consume resources, and a browser may close an unused connection before the eventual request. Give priority to origins used early on the current page. A service contacted only after someone opens an optional widget is a weaker candidate for an unconditional hint in every page head.
Compare fresh loads on the intended page
In DevTools, preserve the same viewport, network conditions, and route for the comparison. Reload a fresh page and inspect the timing for the resource hosted on the hinted origin. Repeat without the hint. Previously opened connections, caches, browser decisions, and network conditions can change the result; a hint is not a guaranteed timing reduction.
Check the page itself after testing. The photo should still load from the intended host, and the head should not contain duplicate hints inserted by both a template and a component. If a deployment changes the image provider, update or remove the old origin hint with the resource references.
Finish with a short list of origins the current page demonstrably needs early. Keep their resource URLs and permissions correct independently of the connection hint.