Preloading tells the browser to fetch resources earlier than it normally would. This is useful for critical resources that are discovered late in the loading process.
Preload syntax
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>
The as attribute
Specifies the resource type:
style- CSS stylesheetsscript- JavaScript filesfont- Web fontsimage- Imagesfetch- API requests
When to preload
Good candidates for preloading:
- LCP images
- Critical fonts
- Key JavaScript modules
- Above-the-fold resources
Preload vs prefetch
- Preload: High priority, needed now
- Prefetch: Low priority, might need soon
Common mistakes
- Preloading too many resources
- Preloading non-critical resources
- Missing
crossoriginfor fonts - Preloading resources already in HTML
Impact on LCP
Preloading your LCP image can significantly improve LCP by starting the download earlier:
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
How VitalSentinel handles this
Preload hints are one of the most direct ways to improve LCP, but a missing or broken preload tag can wipe out the gains overnight. VitalSentinel's synthetic monitoring runs scheduled Lighthouse audits that detect when preload hints disappear or point at the wrong resource, so LCP regressions surface quickly. Your website's revenue insurance against silent LCP drift.
Related Terms
Critical Rendering Path
The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen.
First Contentful Paint (FCP)
A performance metric that measures the time from when the page starts loading to when any part of the page's content is rendered on screen.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.
Render Blocking
Resources that prevent the browser from rendering page content until they are fully downloaded and processed.