What is Preload
Preload is a Resource Hints directive that tells the browser to load a resource as early as possible, before the HTML parser discovers it in the page code. This is critical for resources needed to render the page early.
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>Why use Preload
The browser parses HTML sequentially. By default, it discovers resources only when it reaches the corresponding tag. Preload tells the browser: “start loading this resource right now; don’t wait.”
Preload helps:
- Improve LCP — hero images load before the
<img>tag is discovered - Fonts — text is displayed in the correct font without FOUT
- Critical scripts — JavaScript loads in parallel with HTML parsing
- CSS — critical styles are available immediately
Preload syntax
<!-- Preload изображения -->
<link rel="preload" href="/hero.jpg" as="image">
<!-- Preload шрифта (crossorigin обязателен!) -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload CSS -->
<link rel="preload" href="/critical.css" as="style">
<!-- Preload JavaScript -->
<link rel="preload" href="/app.js" as="script">
<!-- Preload с fetchpriority для LCP -->
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high">Values of the as attribute
| Value | Resource type |
|---|---|
image | Images (JPG, PNG, WebP) |
font | Web fonts |
style | CSS files |
script | JavaScript files |
document | HTML documents (for iframes) |
fetch | API requests (fetch/XHR) |
FetchPriority for LCP
<!-- Высший приоритет для hero-изображения -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<!-- И сам тег изображения -->
<img src="/hero.webp" fetchpriority="high" alt="Hero">fetchpriority="high" tells the browser to load a resource with the highest priority — more effectively than preload alone.
Preloading fonts
<!-- Preload только реально используемых шрифтов -->
<link rel="preload" as="font" href="/fonts/inter-400.woff2"
type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/fonts/inter-700.woff2"
type="font/woff2" crossorigin="anonymous">crossorigin is required for fonts — without it, the browser will load the font twice.
Resource Hints: Prefetch and Preconnect
In addition to preload, there are other Resource Hints:
<!-- Prefetch: загрузить ресурс для следующей страницы -->
<link rel="prefetch" href="/next-page.js">
<!-- Preconnect: установить соединение заранее -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- DNS Prefetch: разрешить DNS заранее -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com">Common mistakes
Preloading a resource that is not used generates a console warning:
The resource /image.jpg was preloaded using link preload but not used.
Preload only resources that are actually used during the page’s initial rendering.
Check with reChecker
Use Full website check for a comprehensive performance analysis. The tool checks for preload on critical resources and other page-loading speed factors.
FAQ
How many resources can I preload? There is no hard limit, but preloading more than 5-6 critical resources lowers the priority of each one. Preload only what is truly needed for the initial display.
Does Preload work with HTTP/2? Yes. HTTP/2 Server Push is an alternative mechanism (the server sends a resource without a browser request). Preload and HTTP/2 complement each other.
How can I check that preload is working?
Chrome DevTools → Network → sort by Initiator. Preloaded resources are initiated from <head> and have High or Highest priority.