Preloading and Resource Hints

  6 min read 

Resource hints tell the browser about important files early, so it can start fetching them sooner. xSpeed Cache uses them to make your largest image appear faster and to connect to font hosts ahead of time.

What this does

When a page loads, the browser has to read your HTML and CSS before it knows which files it needs. That waiting slows down the moment your main content appears.

The Resource Hints feature adds two kinds of hints to your page:

LCP image preload. It finds the largest image near the top of the page (your hero image) and adds a <link rel="preload" as="image" fetchpriority="high"> for it in the <head>. It also adds fetchpriority="high" to the image itself, so the browser loads it right away instead of waiting.
Preconnect. When it sees Google Fonts on the page, it adds <link rel="preconnect"> for fonts.googleapis.com and fonts.gstatic.com, so the DNS lookup and secure connection happen before the fonts are requested. You can also add your own origins, such as a CDN.

The hints are written into your cached HTML, so they show up on every cached page load. When page caching is off, xSpeed Cache processes the page itself instead.

Why use it

Your main image (the largest thing people see first) shows up sooner. This is the biggest single fix for Largest Contentful Paint (LCP).
Fonts load faster because the connection is opened early.
It works on every theme with no setup. The safe defaults are on out of the box.

How to set it up

Go to the xSpeed Cache dashboard in your WordPress admin.
Open the Resource Hints page and its Hints tab.
Make sure Enable Resource Hints is on. It is on by default.
Leave Preload LCP Image and Preconnect to Font Hosts on for most sites.
Add extra preconnect hosts only if you serve above-the-fold assets from another origin.

Settings explained

Setting	What it does	Default
Enable Resource Hints	Master switch for the whole feature (LCP preload and preconnect)	On (`true`)
Preload LCP Image	Detects the largest above-the-fold image and preloads it with high priority	On (`true`)
Images to Preload	How many of the first images on the page to preload (range 0-3)	1
Exclude From Preload	Substring patterns (filename or class) that keep an image from being treated as the hero	Empty list
Preconnect to Font Hosts	Preconnects to Google Fonts hosts when they are detected	On (`true`)
Extra Preconnect Hosts	Your own origins to preconnect, one per line	Empty list

Enable Resource Hints. The main on/off switch. When off, none of the hints are added. Leave it on unless you have a reason to turn everything off. Default is on.

Preload LCP Image. Finds the largest image near the top and tells the browser to fetch it early with high priority. It also removes any loading="lazy" on that image, because a lazy image cannot be preloaded effectively. This is the highest-impact setting for LCP. Default is on.

Images to Preload. Sets how many of the first images to preload, from 0 to 3. One is right for most sites, since there is usually a single hero. Raise it only if the top of your page shows a small gallery. Setting it to 0 turns off image preloading. Default is 1.

Exclude From Preload. A list of substring patterns. If a pattern matches part of an <img> tag (its filename or a class name), that image is skipped and will not be treated as the hero. Use it for tracking pixels, spacers, or a decorative first image that is not your real hero. Default is an empty list.

Preconnect to Font Hosts. When Google Fonts are detected on the page, this adds preconnect links for fonts.googleapis.com (the stylesheet) and fonts.gstatic.com (the font files). Default is on.

Extra Preconnect Hosts. Add one origin per line, such as https://cdn.example.com. These are preconnected in addition to the auto-detected font hosts. Use this for a CDN or third-party origin that serves images or files near the top of your page. Default is an empty list.

How the hero image is chosen

xSpeed Cache does not just grab the first image in the page. It skips images that look like site chrome (a logo, icon, avatar, spinner, or emoji) and images that are small in both width and height. It also reads through lazy-load placeholders: many page builders put a tiny placeholder in src and the real image in data-src, and xSpeed Cache follows the real one.

Note: If both width and height are missing from an image tag, xSpeed Cache cannot tell its size, so it lets that image compete as the hero. Adding width and height to your images helps it pick correctly.

Tip: You can mark an image so it is never chosen as the hero by adding a data-no-lcp attribute to it, or by adding a matching pattern under Exclude From Preload.

Best practices

Keep the defaults on. They are safe for every theme.
Use one image for preload unless your fold really shows several. Preloading too many images competes for bandwidth and can slow the real hero down.
Add a CDN origin under Extra Preconnect Hosts only when it serves assets shown at the top of the page. Preconnecting a host you barely use wastes a connection.
Give your hero image real width and height attributes so it is picked reliably.

Troubleshooting

The wrong image is being preloaded. Add a substring from the correct hero’s filename or class, or add the unwanted image’s pattern to Exclude From Preload so it is skipped. You can also add data-no-lcp to the image you want ignored.
A logo is being preloaded instead of the hero. xSpeed Cache already skips images with logo, icon, avatar, and similar markers, and images that are small in both dimensions. If a logo still slips through, add its filename or class to Exclude From Preload.
My builder hero is not being preloaded. Some builders hide the real URL behind data-src. xSpeed Cache reads that, but if the image has no real raster URL (only a data placeholder), it cannot preload it.
The preconnect for fonts is not showing. Preconnect for Google Fonts is only added when fonts.googleapis.com is actually detected on the page. If your fonts are hosted elsewhere, add that origin under Extra Preconnect Hosts.

FAQ

Is this the same as the Preloader? No. The Preloader warms your server-side page cache. Resource Hints changes the page HTML so the browser fetches your hero image and connects to font hosts sooner. They work at different layers.

Does it need page caching to be on? No. When caching is on, the hints are baked into the cached HTML. When caching is off, xSpeed Cache processes the page itself so the hints still appear.

Will it add a preconnect twice? No. If a host is already preconnected in your page, xSpeed Cache skips it. The same applies to an image that already has a preload link.

GZIP Compression
Lazy Loading Images, Iframes, and Videos
Font Optimization
Image Conversion (WebP and AVIF)

Back to documentation Need more help? Contact support →