<zhead>

Link

preload

Learn how to use the preload rel link tag to improve your site.

The preload link tag is used to instruct the browser to download and cache a specific resource as soon as possible, without blocking the page's load. This is especially useful for resources that are needed early in the page's lifecycle, but are discovered late due to the manner they are called (like fonts, scripts, stylesheets).

Code Examples

<link rel="preload" href="styles.css" as="style">
Preloading a critical CSS file ensuring it is loaded early for speeding up the first paint.
<link rel="preload" href="webfont.woff2" as="font" type="font/woff2" crossorigin>
Preloading a font with proper type and CORS settings for fonts loaded from a third-party server.
<link rel="preload" href="large-image.jpg" as="image">
Preloading a large image that is not critical to the initial rendering can waste bandwidth and delay more important resources.
<link rel="preload" href="script.js" as="script">
Preloading a non-critical script without defer or async, which could block the render.

Recommendations

  • 01
    Prioritize Essential Resources
    Use preload for resources that are crucial for the first paint or critical path of your page to avoid delaying the rendering.
  • 02
    Avoid Overuse
    Preloading too many resources can saturate the user's bandwidth, affecting the load time of high-priority resources. Prioritize and limit usage to essential items.

Related Documentation