# How to preload your hero image

> Preload the largest above-the-fold image so it starts downloading immediately, and preconnect to font hosts so the handshake is done before the request arrives.

- Category: Optimization
- Canonical: https://xspeedcache.com/docs/hints/

---

Your Largest Contentful Paint is usually the big image at the top of the page — and the browser can't start fetching it until it has parsed down to that point in the markup. **Preloading** tells it immediately. This tab does that, plus warms up the connections to your font hosts, and both defaults are already on.

> **Where to find it**
>
> 1. In your WordPress admin, click **xSpeed Cache** in the left menu.
> 2. In the xSpeed Cache sidebar, open the **Optimization** group.
> 3. Click the **Resource Hints** card, then the **Hints** tab.
>
> *Shortcut: open `wp-admin/admin.php?page=xspeed#/performance/resource-hints` directly.*
>
> ✅ This tab is part of **xSpeed Cache (Free)**.

![Preload settings](https://xspeedcache.com/_astro/hints-preload.xRpP1V4N.png)

1. **Enable Resource Hints** — the master switch.
2. **Preload LCP Image** — fetch the hero image immediately.
3. **Images to Preload** — how many top images to preload.

---

## Settings at a glance

| Setting | Default | What it does |
| --- | --- | --- |
| **Enable Resource Hints** | On | Master switch for preload and preconnect. |
| **Preload LCP Image** | On | Emit a preload link for the largest above-the-fold image. |
| **Images to Preload** | 1 | How many top images to preload. Range 0–3. |
| **Exclude From Preload** | Empty | Patterns exempt from being treated as the LCP image. |
| **Always Preload These Images** | Empty | Image URLs preloaded on every page, for a hero detection can't see. First three used. |
| **Preconnect to Font Hosts** | On | Preconnect to detected Google Fonts hosts. |
| **Extra Preconnect Hosts** | Empty | Additional origins to preconnect to. |

---

## How it works

**Enable Resource Hints** is on by default, and the panel is explicit about why: these are "safe, no-config optimizations that help every theme." Unlike most of the Optimization group, this tab is useful the moment you install and needs nothing from you.

Two mechanisms are at work, and they're often confused:

| Hint | What it does |
| --- | --- |
| **Preload** | Fetches a **specific file** you know the page needs, before the parser reaches it. |
| **Preconnect** | Opens the **network connection** to a host — DNS lookup plus TLS handshake — without fetching anything. |

Preload saves discovery time for a known file. Preconnect saves handshake time for a host you'll request from shortly.

---

## Preloading the LCP image

**Preload LCP Image** detects the largest above-the-fold image and emits a `<link rel="preload" as="image" fetchpriority="high">` in the head, plus `fetchpriority="high"` on the image itself.

It picks mainly by size, and it ignores anything inside the page's `<footer>`, `<nav>` or `<aside>` — site chrome such as a footer brand strip is never treated as the hero. A hero image that doesn't declare its dimensions is also no longer outranked by a smaller logo that does, which used to be the commonest way the wrong image got picked.

The panel calls this "the highest-impact fix for Largest Contentful Paint," and the reason is specific: **it beats lazy-loading the theme applied**. Your theme may have marked that image `loading="lazy"` along with everything else — which is exactly wrong for the one image the metric measures. Preloading overrides that.

That interaction is worth holding onto: [Lazy Loading](https://xspeedcache.com/docs/lazy-loading/) defers images, and this deliberately un-defers the one that matters. The two settings work together rather than against each other, and `Eager-load First N Images` on the lazy-loading tab does the same job from the other direction.

**Images to Preload** defaults to **1**, range **0–3**. One is right for most sites, because most layouts have a single hero. Raise it only if the fold genuinely shows several images — a small gallery, say. Preloading more competes for bandwidth with things the page needs sooner, so this is not a "more is better" dial.

**Exclude From Preload** takes substring patterns — a filename or class — matched against `<img>` tags. Anything matching is exempt from being treated as the LCP image. It exists for the case where the first image on the page isn't the hero: a tracking pixel, a spacer, or a decorative image the detection would otherwise pick.

> ⚠️ **If the wrong image is being preloaded, exclude it rather than turning preloading off.** A tracking pixel detected as your LCP image means you're preloading a 1×1 GIF and *not* preloading the actual hero — worse than doing nothing. One exclusion pattern fixes it.

### Always Preload These Images

![The Always Preload These Images field](https://xspeedcache.com/_astro/hints-always-preload.Dmqo9I3L.png)

1. **Always Preload These Images** — image URLs preloaded on every page; the first three are used.

Some heroes are invisible to detection altogether. The commonest is a hero section whose image is a CSS `background-image`: there's no `<img>` tag, so none of the signals the automatic pick reads are there.

**Always Preload These Images** is the escape hatch. List image URLs — full or site-relative, one per line — and each gets a high-priority preload on every page. Only the first three entries are used, and an image the automatic pick already preloads isn't hinted twice.

> ⚠️ **Keep it to one or two images.** Every image you list gets top network priority, so a long list means they compete with each other and with the page itself. This is for the one hero detection can't find, not a place to list everything above the fold.

---

## Preconnecting to font hosts

![Preconnect settings](https://xspeedcache.com/_astro/hints-preconnect.CJiKjtYI.png)

1. **Preconnect to Font Hosts** — auto-detect Google Fonts.
2. **Extra Preconnect Hosts** — your own origins.

**Preconnect to Font Hosts** is on by default. When Google Fonts are detected it emits `<link rel="preconnect">` for `fonts.googleapis.com` and `fonts.gstatic.com`, so the **DNS lookup and TLS handshake happen ahead of the font request instead of on the critical path**.

Fonts are a good candidate for this because they're discovered late — the browser has to parse CSS before it knows which font files it needs, by which point the handshake cost lands at the worst moment.

**Extra Preconnect Hosts** takes one origin per line, e.g. `https://cdn.example.com`. Use it for a CDN or third-party origin serving above-the-fold assets.

> 💡 **Don't preconnect to everything.** Each preconnect holds open a connection the browser might not use, and a long list wastes resources. Add hosts that serve something needed *early* — the CDN hosting your hero image, not the analytics endpoint that fires after load.

---

## Related

- [How to add resource hints](https://xspeedcache.com/docs/resource-hints/)
- [How to prefetch the next page](https://xspeedcache.com/docs/smartpredict/)
- [How to lazy-load images and video](https://xspeedcache.com/docs/lazy-loading/)
- [How to stop fonts blocking text](https://xspeedcache.com/docs/fonts/)
- [How to run a speed test](https://xspeedcache.com/docs/external-score/)