Networking and resource loading
Preload important resources carefully
Use resource hints to reveal a genuinely important download without preloading everything.
8 minute lesson
preload tells the browser about a resource needed soon:
<link rel="preload" href="/hero.webp" as="image">The as value gives the browser the resource destination. It affects request behavior, priority, and policy checks. Fonts and some cross-origin resources also need matching CORS settings.
Preload only resources that the current page will soon use. An unnecessary preload competes for bandwidth with more important work and may be downloaded without being consumed.
Preload is useful when normal discovery is late, such as a critical font referenced from CSS or an image hidden behind another resource. It does not make a large file cheap or fix a slow server.
Measure the request order in the Network panel before adding a hint. Then add one preload, reload under the same throttling, and compare the resource start time and the page’s visible result.
DevTools warns when a preloaded resource is not used soon after load. Treat that as evidence to review the hint.
Exercise: identify one late-discovered critical resource. Explain why changing markup might be better than adding a preload.
Lesson completed