Preload
Preload is a component from streak/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/components";Example
import { Preload } from "streak/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" media="" />Rendered Output
<link rel="preload" href="/images/hero.jpg" as="image" media="(min-width: 768px)">
<link rel="preload" href="/styles/tailwind.css" as="style" media="">Props
| Prop | Values | Description |
|---|---|---|
href | URL string | URL of the resource to preload |
as | "image" · "font" · "style" · "script" · "video" | Resource type hint for the browser |
media | CSS media query string · "" for unconditional | Restricts preload to matching media conditions |
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