Quick Guides 3 min read · April 9, 2026

How Do I Preload AVIF Hero Images in WordPress to Pass the LCP Threshold?

Switching your hero image to AVIF cuts file size by up to 50% — but if the browser still discovers it late in the render pipeline, your LCP score won't budge. A single <link rel="preload"> hint injected into wp_head tells the browser to start the download before any CSS or JavaScript has been parsed.

Quick answer: Add a preload hint for your AVIF hero image in functions.php using wp_head. Set fetchpriority="high" so the browser treats it as the highest-priority network request on the page.

Why AVIF alone isn't enough

AVIF gives you the smallest file at the highest quality of any widely-supported format in 2026. WordPress 6.5 added native AVIF upload support, so serving it is no longer a challenge. The problem is discovery timing.

When a browser loads a WordPress page it parses the HTML, builds the DOM, then fetches stylesheets, then — only after the CSS is parsed and the render tree is constructed — does it find the hero image URL buried in a CSS background-image rule or an <img> tag deep in the template. By that point, you've burned 300–600 ms of latency before the image download even starts.

Google's LCP threshold is 2.5 seconds. On a typical shared-hosting WordPress site with a theme that loads 6–12 stylesheets, discovering the hero image late is the single biggest contributor to a failing LCP score — even when the image itself is small.

Preload the hero image

Open your theme's functions.php (or a site-specific plugin) and add the following. Replace the URL with the path to your AVIF file in the WordPress Media Library.

functions.php PHP
add_action( 'wp_head', function () {
    if ( ! is_front_page() ) {
        return;
    }
    echo '<link
        rel="preload"
        as="image"
        href="' . esc_url( get_template_directory_uri() . '/images/hero.avif' ) . '"
        type="image/avif"
        fetchpriority="high"
    >';
}, 1 );

The priority of 1 passed to add_action ensures the hint is output at the very top of <head>, before any stylesheets or scripts. The browser's preload scanner picks it up immediately and begins the AVIF download in parallel with everything else.

The is_front_page() guard limits the hint to the homepage. If your hero changes per template (category pages, landing pages), duplicate the action with the appropriate conditional and the correct URL for each context.

Check the result

  1. Run PageSpeed Insights on your homepage URL. The "Preload Largest Contentful Paint image" audit should no longer appear as an opportunity.
  2. Check the waterfall in Chrome DevTools (Network tab). Your AVIF file should now start downloading near the top of the waterfall — alongside your HTML — rather than after stylesheets resolve.
  3. Confirm LCP in the Core Web Vitals report. Field data takes 28 days to update in Search Console, but lab data (Lighthouse, PageSpeed) updates immediately.

A preloaded AVIF hero typically moves LCP discovery 300–600 ms earlier. Combined with the 40–50% file-size reduction from AVIF over standard JPEG, most WordPress sites with a hero-image LCP element comfortably hit the 2.5s "Good" threshold after both changes.

Try Mochify for AVIF conversion

Convert your hero image to AVIF at mochify.app — no account required, processed in RAM, never stored. Download the .avif file and upload it directly to your WordPress Media Library.

Convert to AVIF

Related Guides