Preload

Preload is a browser resource hint that tells the browser to fetch a specific resource early in the page loading process, before it would naturally discover it. Implemented using <link rel="preload"> in the HTML head or via the HTTP header, preload elevates the priority of critical assets like fonts, hero images, or key scripts that the browser would otherwise find late during parsing. Unlike prefetch, which is for future navigations, preload targets resources needed for the current page. HTTP header, preload elevates the priority of critical assets like fonts, hero images, or key scripts that the browser would otherwise find late during parsing. Unlike prefetch, which is for future navigations, preload targets resources needed for the current page.

Why It Matters for SEO

Page speed directly affects search rankings, and many critical resources are discovered late in the loading process. For example, a web font referenced inside a CSS file is not fetched until after the browser downloads and parses that stylesheet. This delay causes invisible text (FOIT) or layout shifts that harm both user experience and Core Web Vitals scores like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).

By preloading these late-discovered resources, you eliminate unnecessary waiting time and ensure critical content appears faster. This is especially important for hero images, above-the-fold fonts, and scripts that drive interactive elements users see immediately.

How to Implement

Add a preload link tag in your HTML head for any resource that is critical but discovered late:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/images/hero.webp" as="image" />
<link rel="preload" href="/css/critical.css" as="style" />

The as attribute is required and tells the browser what type of resource it is loading, which determines the fetch priority and ensures correct caching behavior. For fonts, always include the crossorigin attribute even if the font is hosted on the same origin.

You can also deliver preload hints via HTTP headers, which can trigger fetching even before the browser parses the HTML:

Link: </fonts/main.woff2>; rel=preload; as=font; crossorigin

Best Practices

• Only preload critical resources: Preloading too many resources competes for bandwidth and can actually slow down the page. Limit preloads to three or four essential assets.
• Always specify the as attribute: Without it, the browser may fetch the resource with low priority or fetch it twice.
• Use for late-discovered resources only: If a resource is already in the HTML head (like a stylesheet link), preloading it adds no benefit and wastes a network connection.
• Combine with font-display: When preloading fonts, also use font-display: swap in your CSS to prevent invisible text while the font loads.
• Audit with Lighthouse: Lighthouse flags resources that would benefit from preloading under the “Preload key requests” opportunity.
• Monitor for unused preloads: Chrome DevTools console warns about preloaded resources that are not used within a few seconds. Remove stale preload tags when you change page resources.

Strategic use of preload ensures your most important assets arrive as early as possible, improving both perceived performance and measurable SEO metrics.