Your homepage should load sharp and fast, and it starts with your hero image. This quick guide shows you how to preload it in WordPress, step-by-step. You’ll reduce LCP, speed up paint time, and improve your Core Web Vitals, all in just a few steps.
Preload your hero image for faster homepage speed
Your hero image is often the Largest Contentful Paint (LCP) element. Preloading it tells the browser to fetch it earlier, reducing perceived load time.
Find your LCP image using PageSpeed or DevTools
Open PageSpeed Insights or Chrome DevTools. Look for the first large .webp or .jpg image near the top of the waterfall chart, this is likely your Largest Contentful Paint (LCP) element.
Copy the full image path
In most WordPress setups, you’ll see something like:
/wp-content/uploads/2025/08/home-hero.webpIf your image is served from a CDN, make sure it’s properly integrated, or upload it directly to your media folder.
To optimise all your non-hero images, use lazy loading to defer them until needed – follow our lazy loading guide for WordPress.
The Quick Fix for a Slow, Heavy Site
We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.
Add a preload tag to your site’s <head>
This tells the browser to fetch your hero image early, improving perceived load time.
Use the correct preload syntax
Paste this into your site’s <head> section:
<link rel="preload" as="image" href="/wp-content/uploads/2025/08/home-hero.webp" fetchpriority="high" type="image/webp"> - For
.jpgfiles, usetype="image/jpeg"instead. - Avoid preloading more than 1–2 assets per page, it can slow everything else down.
⚠️ IMPORTANT: Replace the href value with your own hero image path
For detailed best practices on preloading images and improving LCP, see Google’s official guidance on Largest Contentful Paint
Add it with a code snippet (no theme edits required)
If you’re not editing your theme’s header.php directly, use a plugin to insert the preload tag safely.
Use the Code Snippets plugin
Install Code Snippets from the plugin directory. Create a new snippet and add the following code:
add_action('wp_head', function() { if (is_front_page()) { echo '<link rel="preload" as="image" href="/wp-content/uploads/2025/08/home-hero.webp" fetchpriority="high" type="image/webp">'; } }); ⚠️ IMPORTANT: Replace the href value with your own hero image path –
⚠️ ALSO: Don’t double up preload tags – check your theme or caching plugins before adding this.
Prefer a plugin? Use built-in preload options
If you already use a performance plugin, check if it supports LCP image preload.
Enable image preload in your caching plugin
- Perfmatters: Go to Assets → Preloading, and add your hero image URL.
- WP Rocket: Automatically preloads LCP image if lazy loading is enabled.
- FlyingPress: Automatically preloads featured images.
- LiteSpeed Cache: Enable image lazy load, then exclude the hero image from lazy loading in the media excludes tab to trigger automatic preload.
Check that lazy loading is disabled for your LCP image – otherwise preload won’t help.
Test that your preload tag is working
Now test that the image is actually preloading, and making a difference.
Check in PageSpeed or Chrome DevTools
- Re-run your site through PageSpeed Insights.
- Or use Chrome DevTools → Network tab → Reload.
- Your hero image should now load earlier, with
fetchpriority=highvisible.
LCP should now drop by 200–400 ms, sometimes more. Open Chrome DevTools → Network tab → Reload the page.
Optimise your hero image for maximum impact
Preloading a heavy image doesn’t help. Keep it lean and fast.
Compress and convert
Use tools like Squoosh or TinyPNG to shrink your image without hurting quality.
- Convert to WebP if you haven’t – it’s ~30% lighter than JPEG.
- Aim for under 100 KB if possible.
Want to cut more weight? Swap out Google Fonts too – here’s how to use system fonts in WordPress
Apply and test the result
Preloading your hero image is one of the fastest ways to improve LCP, often with a single line of code. Apply the steps now, then re-run your speed test and watch your homepage load faster and smoother.
