Use rel=preload

Why It Matters

• It eliminates late-discovered resource delays. Some resources are not discoverable until after the browser has downloaded and parsed other files. Fonts referenced in CSS, images referenced in stylesheets, and scripts loaded by other scripts are all "late discoveries." Preloading these resources starts the download immediately.
• It speeds up critical rendering. When your hero image, primary font, or key stylesheet arrives sooner, the page becomes visually complete faster. Preloading the right resources directly improves First Contentful Paint and Largest Contentful Paint.
• It gives you control over priority. Without preload, the browser decides the loading priority of resources based on type and position. Preload lets you override that and say "this specific resource is critical — prioritize it."
• It works across resource types. Preload supports fonts, images, stylesheets, scripts, and other asset types. You can target exactly the resources that create bottlenecks in your specific loading sequence.

How to Use It

1. Identify your critical resources. Look at your page's loading waterfall and find resources that are discovered late but needed early — typically web fonts, hero images, and above-the-fold stylesheets. These are your best candidates for preloading.
2. Add link preload tags in the head. Use <link rel="preload" href="/..." as="..."> in your document head. The as attribute is required and tells the browser the resource type so it can set the correct priority and headers.
3. Include crossorigin for fonts. Font preloads require the crossorigin attribute even if the font is on your own domain. Without it, the browser downloads the font twice — once from the preload and once when it actually needs it.
4. Preload only what you will use immediately. Preloaded resources that are not used within a few seconds of loading generate browser console warnings and waste bandwidth. Only preload resources that are needed for the initial view.
5. Limit the number of preloads. Three to five preloaded resources is a practical maximum for most pages. More than that, and the preloaded resources start competing with each other and with other critical downloads, potentially slowing everything down.

Common Mistakes

• Preloading too many resources. When everything is high priority, nothing is. Preloading a dozen files creates a traffic jam at the network layer and can actually make loading slower by competing with genuinely critical resources.
• Forgetting the "as" attribute. Without the as attribute, the browser cannot apply the right priority or content security policy checks. The resource may be downloaded twice or blocked entirely.
• Preloading resources that are not used. If you preload a font file but your CSS never references it, or preload a script that only runs on a different page, you waste bandwidth and get a browser warning about unused preloads.
• Confusing preload with prefetch. Preload is for resources needed on the current page, right now. Prefetch is for resources that might be needed on the next page. Using prefetch for critical current-page resources does not give them the priority boost you need.