HTML resource hints: preload only a known critical asset

Use it for a real task

A receipt detail page needs its local stylesheet. Its mark may be the main image above the fold, so a matching preload can help if measurement shows that the image request starts late. A preload is not a general performance badge: if the image is absent, has a different candidate URL, or is hidden on the target route, the early transfer can waste bandwidth.

<head>
  <link rel="stylesheet" href="/assets/receipt-page.css">
  <link rel="preload" as="image" href="/media/receipt-mark-47.webp">
</head>
<body>
  <main>
    <h1>Receipt R-47</h1>
    <img src="/media/receipt-mark-47.webp" alt="Receipt R-47 mark" width="320" height="180">
  </main>
</body>

What the markup guarantees

Both files must exist at the specified local paths. The image preload and the rendered image use the same URL; responsive image selection, credentials, and content type can make a more complex case require more careful matching.

Cost and limits

Preload moves a request earlier; it does not shrink bytes. Compare a real page load before and after, especially on slow connections where an unnecessary preload competes with CSS or text.

Common Mistakes

• Do not preload every image on a long page.
• Do not point a hint at an asset the route never uses.
• Keep stylesheet and image paths aligned with deployed assets.

Connected lessons

• HTML image loading: distinguish a key image from below-fold media
• HTML srcset and sizes: let the browser choose an appropriately sized image
• HTML title and metadata: distinguish document identity from page copy

Continue with HTML modulepreload: fetch a known module before its import is discovered.

Continue with HTML subresource integrity: bind a stylesheet to the bytes you reviewed.