How to Preload Key Requests (Fonts & LCP Images)
How to Preload Key Requests (Fonts & LCP Images)
Preloading key resources is one of the most effective techniques for improving
Largest Contentful Paint (LCP) and overall perceived performance in WordPress.
When used correctly, preload tells the browser which resources are critical and should
be fetched as early as possible.
This article explains when and how to preload fonts and LCP images safely,
with production-ready code examples and common pitfalls to avoid.
What Is Preload and Why It Matters
preload is a browser hint that declares:
This resource is critical. Fetch it early.
Unlike prefetch, preload is intended for resources required for the
current page render.
Misusing it can harm performance, so precision is essential.
What Should Be Preloaded
- Primary LCP image (hero image)
- Critical web fonts (above-the-fold text)
- Critical CSS (advanced setups only)
Never preload everything. Preload only what blocks rendering.
Preloading Fonts Correctly
Basic Font Preload Example
<link
rel="preload"
href="/fonts/inter-regular.woff2"
as="font"
type="font/woff2"
crossorigin
>
Key requirements:
as="font"must be specifiedtypemust match the font formatcrossoriginis required for most setups
Adding Font Preload via wp_head
Hardcoding in header.php works, but hook-based insertion is safer and more portable.
<?php
add_action( 'wp_head', function () {
?>
<link
rel="preload"
href=""
as="font"
type="font/woff2"
crossorigin
>
The priority (1) ensures the preload appears early in the document head.
Preloading the LCP Image (Most Important)
For most WordPress sites, the LCP element is the hero image.
If this image is discovered late, LCP will suffer regardless of lazy loading.
Basic LCP Image Preload
<link
rel="preload"
as="image"
href="/images/hero.jpg"
fetchpriority="high"
>
Notes:
as="image"is mandatoryfetchpriority="high"reinforces priority- Do not preload multiple large images
Dynamic LCP Image Preload (Featured Image)
For theme-based sites, dynamically preload the featured image only on singular views.
<?php
add_action( 'wp_head', function () {
if ( ! is_singular() ) {
return;
}
$image_id = get_post_thumbnail_id();
if ( ! $image_id ) {
return;
}
$image = wp_get_attachment_image_src( $image_id, 'full' );
if ( empty( $image[0] ) ) {
return;
}
?>
<link
rel="preload"
as="image"
href=""
fetchpriority="high"
>
This approach ensures:
- No hardcoded URLs
- Only one image is preloaded
- Only when relevant
Interaction with Lazy Loading
Preloading an image does not conflict with lazy loading,
but the LCP image should explicitly disable it.
<img
src="hero.jpg"
loading="eager"
fetchpriority="high"
alt=""
>
If you preload an image but still use loading="lazy",
the browser may delay rendering.
Common Mistakes to Avoid
- Preloading fonts that are never used above the fold
- Preloading multiple large images
- Missing
crossoriginfor fonts - Preloading CSS that is already render-blocking
How to Verify Preload Is Working
- Chrome DevTools → Network → Priority column
- Lighthouse → LCP diagnostics
- PageSpeed Insights → “Preload key requests” audit
A correctly preloaded resource should appear early with High priority.
SEO & Core Web Vitals Impact
Preloading itself does not affect SEO directly, but:
- Improved LCP boosts Core Web Vitals
- Better CWV improves search performance signals
- Faster rendering improves user engagement
When Not to Use Preload
- Below-the-fold images
- Rarely used fonts
- Resources loaded conditionally by JavaScript
Summary
Preloading key requests is a high-impact optimization when used precisely.
For WordPress sites, focus on:
- One LCP image per page
- One or two critical fonts
- Early insertion via
wp_head
Done correctly, preload improves LCP without introducing layout shifts or wasted bandwidth.
🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.
