Critical Asset Preload
Problem
Critical fonts, stylesheets, and scripts load too late because browsers discover them only after parsing HTML. The page flashes unstyled content while essential CSS downloads. Above-the-fold content can’t render because key resources aren’t prioritized. Browsers waste time downloading low-priority assets while critical ones wait in the queue.
Solution
Instruct browsers to fetch critical resources like fonts and hero images before they’re discovered during parsing. This eliminates render-blocking delays and improves perceived performance by loading what users see first.
Example
This example demonstrates how to preload critical resources like fonts, styles, and images to improve initial page render performance.
<head>
<!-- Preload critical font to prevent flash of unstyled text -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload critical CSS needed for above-the-fold content -->
<link rel="preload" href="/css/critical.css" as="style">
<!-- Preload hero image visible on initial page load -->
<link rel="preload" href="/images/hero.jpg" as="image">
</head>Benefits
- Eliminates render-blocking delays for critical resources like fonts and CSS.
- Improves perceived performance by loading above-the-fold content faster.
- Prevents flash of unstyled content by prioritizing critical stylesheets.
- Gives explicit control over browser resource loading priorities.
- Can significantly improve Core Web Vitals like LCP and FCP.
Tradeoffs
- Preloading too many resources wastes bandwidth and delays other assets.
- Requires careful analysis to identify truly critical resources.
- Can backfire if non-critical assets are preloaded unnecessarily.
- Needs updating when critical assets change during development.
- May delay discovery and loading of other important resources.