---
title: "Hint only what speeds up the first paint · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/preload-prefetch-preconnect
updated: 2026-10-20
licence: "All rights reserved"
---

# Hint only what speeds up the first paint

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Preload only what the first paint needs, prefetch likely next pages, and preconnect only to other origins you are certain to use.
- How: Preload the LCP image only if the browser can't find it early in the HTML. Use one preload per screen size (`media`), so each device downloads one image. Don't preload fonts unless you have measured that it doesn't delay first paint. Preconnect only to other origins needed during load. Keep hints few. Add each one only after measuring it, and remove hints that don't help.
- Check: Compare first paint and LCP with and without each hint in a browser. Every hint left has a before and after measurement behind it.
- Measured: On a reference site, two font preloads delayed first paint by 80 ms in Chrome at a 100 ms round trip. Lighthouse's simulation reported the opposite. Removing the hero preload and `fetchpriority` left Lighthouse LCP unchanged at 2.1 s, because the image was early in the HTML.

Example:

```html
<!-- only when the hero is not in the HTML (for example a CSS background) -->
<link rel="preload" as="image" href="/hero-768.avif" media="(max-width: 600px)">
<link rel="preload" as="image" href="/hero-1536.avif" media="(min-width: 601px)">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/preload-prefetch-preconnect`.

- Previous: [Load far-down images later](https://agentwranglers.se/playbook/website/performance/lazy-loading)
- Next: [Send early hints only when they help](https://agentwranglers.se/playbook/website/performance/early-hints)
- [Performance](https://agentwranglers.se/playbook/website/performance)