Preload
Preload is a component from streak-forge/components that renders a <link rel="preload"> tag. It tells the browser to begin fetching a resource immediately when the HTML is parsed, before the parser discovers it deeper in the document.
Use it inside a widget that renders in <head>.
Import
import { Preload } from "streak-forge/components";Example
import { Preload } from "streak-forge/components";
// In a widget that renders inside <head>:
<Preload href="/images/hero.jpg" as="image" media="(min-width: 768px)" />
<Preload href="/styles/tailwind.css" as="style" />Rendered Output
<link rel="preload" href="/images/hero.jpg" as="image" media="(min-width: 768px)">
<link rel="preload" href="/styles/tailwind.css" as="style">Props
| Prop | Values | Description |
|---|---|---|
href | URL string | Required. URL of the resource to preload |
as | "image" · "font" · "style" · "script" · "video" (any string is accepted) | Required. Resource type hint for the browser |
...rest | Any attribute | Any other prop passed to Preload (e.g. media, crossorigin, type) is spread onto the rendered <link> tag as-is |
href and as are the only props read explicitly by Preload — every other prop you pass is forwarded straight through to the rendered <link> element, so any valid <link rel="preload"> attribute works.
Use Cases
- LCP images — preload the largest above-the-fold image to improve initial render performance
- Critical fonts — preload web fonts to avoid flash of unstyled text
- Above-the-fold CSS — preload critical stylesheets that are not discovered early in the document