Preload (rel=preload)

Preload is a resource hint, written as <link rel="preload"> or a Link HTTP header, that tells the browser to start downloading a specific file immediately at high priority, before the parser or stylesheet would normally discover it.

Why it matters

Some critical files are found late: a font referenced inside CSS, a hero image set by a stylesheet, or a script requested by another script. Preload moves their request to the start of the page load, which can improve LCP and avoid font flashes. It must be used sparingly, because preloaded files compete with other high-priority requests.

Example

<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

The as attribute sets the priority and lets the browser match the request with the later use. Fonts always need crossorigin, even from the same origin.

Common mistakes

• Omitting as or crossorigin, so the preloaded file is fetched twice.
• Preloading files the page never uses; Chrome warns in the console after a few seconds.
• Preloading many files, which delays the truly critical ones.
• Confusing it with prefetch, which is for future navigations.

Related

• Prefetch
• Preconnect
• LCP
• Early Hints (103)

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.