Performance Recommended

Hint only what speeds up the first paint

Preload only what the first paint needs, prefetch likely next pages, and preconnect only to other origins you are certain to use.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

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.

Example

<!-- only when the hero is not in the HTML (for example a CSS background) -->
<link rel="preload" as="image" href="/assets/hero-768-f0c7bcf5bb.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>

How to check

Compare first paint and LCP with and without each hint in a real 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 real 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.

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.