# How to add resource hints

> Tell the browser what to fetch before it discovers it needs to — preload your hero image, warm up font connections, and predict the visitor's next page.

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

---

A browser discovers what a page needs by reading it top to bottom. Your hero image sits in the markup; the font it needs comes from a stylesheet it hasn't parsed yet. **Resource hints** short-circuit that discovery — they tell the browser up front what's coming, so fetching starts earlier than it otherwise could.

> **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.
>
> *Shortcut: open `wp-admin/admin.php?page=xspeed#/performance/resource-hints` directly.*
>
> ✅ This panel is part of **xSpeed Cache (Free)**. Its SmartPredict tab is ⭐ Pro.

![The Resource Hints panel and its two tabs](https://xspeedcache.com/_astro/resource-hints-tabs.BqNE4xkT.png)

---

## Tabs on this panel

| Tab | Feature | Tier | Guide |
| --- | --- | --- | --- |
| **Hints** | Preload the LCP image, preconnect to font hosts | Free | [How to preload your hero image](https://xspeedcache.com/docs/hints/) |
| **SmartPredict** | Speculation rules that prefetch the likely next page | ⭐ Pro | [How to prefetch the next page](https://xspeedcache.com/docs/smartpredict/) |

Each tab has its own address, so you can link straight to one:

| Tab | URL |
| --- | --- |
| Hints | `#/performance/resource-hints` |
| SmartPredict | `#/performance/resource-hints/speculation` |

---

## Which one should you use?

Both make the browser fetch earlier, but they operate on different timescales.

| | [Hints](https://xspeedcache.com/docs/hints/) | [SmartPredict](https://xspeedcache.com/docs/smartpredict/) |
| --- | --- | --- |
| **Scope** | The page being loaded now | The page the visitor might go to next |
| **What it speeds up** | First paint, Largest Contentful Paint | The *next* navigation |
| **Risk** | Very low — the defaults ship on | Moderate — fetches pages nobody may visit |
| **Tier** | Free | ⭐ Pro |

**[Hints](https://xspeedcache.com/docs/hints/) is on by default and needs no thought.** It's the rare setting that's safe, useful, and requires no configuration — the panel calls its defaults "safe, no-config optimizations that help every theme."

**[SmartPredict](https://xspeedcache.com/docs/smartpredict/)** is a different bet: it spends bandwidth now on a page the visitor *probably* wants, to make that navigation feel instant. Worth it on sites with predictable journeys; wasteful on sites where visitors scatter.

---

## Related

- [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/)