Resource hints and 103 Early Hints for WordPress
WP Core Web Vitals removes the preconnects and dns-prefetches that themes and plugins add, so the first connections go to the few hints you add yourself. Yours can go out as 103 Early Hints, before the first byte of HTML.
Which resource hints does a WordPress site need?
Fewer than it has. Themes and plugins add a dns-prefetch or preconnect for every server they might use, and each one costs a lookup or a connection before the page needs it. Most pages need a preload for the font of the text in the first screen and a preconnect to each server they can't avoid and need early. WP Core Web Vitals removes the theme and plugin dns-prefetches and preconnects; you add the few your pages need.
Fewer hints, sent earlier
Hints compete with each other for the first connections and bandwidth, so every hint you drop leaves more for the font and the LCP image.
Your hints can also leave before the HTML. Set a preload or preconnect to Link / 103 and a CDN that supports 103 Early Hints, such as Cloudflare, passes it to the browser while your server is still working on the page.
The resource hint settings
Your own hints
Your own preloads and preconnects, so the browser starts sooner on what your pages need first. A preload makes the browser fetch a file it would otherwise find late, and a preconnect opens the connection to another server before the page needs it. Start with the font of the text in the first screen: that text then shows in its own font sooner. Every hint goes on every page, so add only what all pages need in the first second.
Where the hint goes:
- Head puts the hint in the HTML of the page.
- Link / 103 also sends it as a
Linkheader. A CDN such as Cloudflare turns preloads and preconnects in that header into 103 Early Hints, so the browser starts on them while your server is still building the page.
The file type can stay on Automatic when the URL ends in a file extension such as .woff2, and font preloads get crossorigin by themselves. Leave the LCP image out: the plugin preloads it itself, per page and per device. Empty
Fine-tuning
- Remove dns-prefetch (On): removes the
dns-prefetchhints that themes and plugins print, each a lookup of a server the page may never call. Most are added automatically and nobody misses them. Your own hints stay, and so does a hint withdata-no-optimize. - Remove preconnect (On): removes the
preconnecthints of themes and plugins. Each one opens a connection to another server at the start of the page load, where it can delay your CSS and your LCP image. When a third-party script needs its server early, add that preconnect to your own hints, where it stays. - Remove prefetch (Off): removes the
prefetchhints of themes and plugins, files or pages they download at low priority for later. Those rarely get in the way of the current page, which is why it's off. Turn it on when a theme or plugin prefetches files or pages nobody opens. Speculative loading keeps working either way. - Remove preload (Off): removes the
preloadhints of themes and plugins. A preload makes the browser fetch the file right away, so a preload for something the page doesn't need early takes bandwidth from the LCP image. Turn it on only when a theme or plugin preloads such files, for example a slider script on a page without a slider. Your own hints and the plugin's preload of the LCP image are added afterwards, so they stay.
When a preload or preconnect makes things worse
A preload for something the page doesn't use in the first second is bandwidth taken from the LCP image. Chrome warns about it in the console ("was preloaded using link preload but not used within a few seconds"). A preconnect to a server the page needs only later holds a connection open for nothing. Before you add a preconnect, try to drop the server: self-host the fonts, move the file to your own domain.
Questions about resource hints in WordPress
How do I fix "Preload key requests" on a WordPress site?
Find the file Lighthouse names, usually a font or the hero image. A font goes into your own hints as a preload; the plugin preloads the hero image itself once your visitors have reported it.
How many preconnects should a page have?
There's no fixed number: one for each server the page needs early and can't avoid.
Does 103 Early Hints work on my host?
Yes, when your CDN or server turns the Link header into a 103 response. The plugin sends the header, also on cached pages; Cloudflare makes the 103 from it when Early Hints is on in its dashboard. Without that, the Link header still works as a normal hint once the response arrives.
The background: 103 Early Hints, the network dependency tree in Lighthouse and resource prioritization.
