What is preload?

Preload is a way to tell a web browser to fetch a file (like a script, style sheet, image, or font) early, before the page actually needs it. By giving the browser a heads‑up, the resource can be downloaded in the background so it’s ready instantly when the page tries to use it.

Let's break it down

  • HTML tag: You add <link rel="preload" href="file.js" as="script"> inside the <head> of your page.
  • href: The URL of the file you want to load early.
  • as: Tells the browser what type of resource it is (script, style, image, font, etc.).
  • Browser action: As soon as the page starts loading, the browser begins downloading that file, even if the normal HTML or CSS hasn’t referenced it yet.
  • When it finishes: The file sits in the browser’s cache, ready to be used instantly when the page finally needs it.

Why does it matter?

  • Speed: Reduces the time users wait for a page to become interactive because the needed files are already on the device.
  • Smooth experience: Prevents “jank” where a script or font suddenly appears and blocks rendering.
  • Better performance scores: Tools like Google PageSpeed and Lighthouse reward pages that use preload correctly.

Where is it used?

  • Large web apps that load heavy JavaScript bundles after the initial HTML.
  • Sites that use custom web fonts and want the font to appear without a flash of invisible text.
  • Pages with critical CSS that should be ready before the rest of the stylesheet loads.
  • Any situation where a resource is known to be needed soon but isn’t referenced early in the markup.

Good things about it

  • Faster perceived load time - users see content quicker.
  • Control over loading order - you decide which files get priority.
  • Improves SEO and Core Web Vitals - better scores can lead to higher search rankings.
  • Works in modern browsers - widely supported with fallback behavior for older ones.

Not-so-good things

  • Over‑preloading - downloading files that the user never ends up needing wastes bandwidth.
  • Incorrect “as” value can cause the browser to block the resource or trigger security warnings.
  • Limited to resources the browser can fetch - you can’t preload everything (e.g., data fetched via JavaScript after page load).
  • Potential for cache bloat - preloaded files stay in cache even if the page is left quickly, using storage space.