Comparison
PrefetchvsPreload
Prefetch
you fetched the next page's code at low priority while the user was still reading this one.
A hint that a resource will probably be needed for a future navigation, fetched at the lowest priority when the browser is idle. It is speculative by design, which makes it right for likely next steps and wrong for anything on the current page. Prefetching aggressively costs the user bandwidth and battery for pages they may never visit, which matters more on mobile than the timing charts suggest.
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 →