Comparison
PreconnectvsPreload
Preconnect
you opened the connection to the image host early so the first request did not pay for DNS and TLS.
A hint to complete DNS resolution, the TCP handshake and the TLS negotiation for an origin before anything is requested from it. On a cross-origin critical resource that saves a hundred milliseconds or more of pure setup. Connections are held open only briefly and each one costs the client and server real resources, so it is worth doing for two or three origins and counterproductive for ten.
Full entry →Preload
you told the browser to fetch the hero font now, at high priority, because it is needed on this page.
A hint that a resource is required by the current page and should be fetched immediately at high priority. It is for things the browser cannot discover early — a font referenced from inside CSS, an image set by script, a chunk needed right after hydration. It requires the `as` attribute to be correct or the resource is fetched twice, and preloading something not actually used is a warning and pure waste.
Full entry →