Resource Hints: A Complete Guide for 2026

Resource hints are small instructions you give the browser to prepare for resources it will need soon, so they load faster when the moment comes. They include preconnect, dns-prefetch, preload, and prefetch. Used well, resource hints shave time off page loads by starting key work early, before the browser would otherwise discover it needs to.

Key takeaways

• Resource hints tell the browser to start preparing for a resource ahead of time rather than waiting until it is requested in the normal flow.
• The four main hints are preconnect, dns-prefetch, preload, and prefetch, each suited to a different stage of preparation.
• Preload is for critical resources the current page needs soon, while prefetch is for resources a likely next page will need.
• Preconnect and dns-prefetch speed up connections to third-party origins like fonts, analytics, and embedded media.
• The biggest mistake is overusing hints, which wastes bandwidth and can slow down the resources that actually matter.
• Hosted platforms like Framer apply sensible hints automatically, so most site owners benefit without hand-writing them.

What resource hints are

When a browser loads a page, it discovers resources progressively. It reads the HTML, finds a stylesheet, requests it, parses it, finds a font referenced inside, requests that, and so on. This discovery process is sequential and can introduce delays, because the browser only learns it needs a resource once it reaches the line that references it. Resource hints break that pattern by telling the browser about important resources earlier.

A resource hint is a small directive, usually placed in the head of the document, that nudges the browser to do preparatory work in advance. That work might be resolving a domain name, opening a connection, downloading a file, or fetching an entire page the user is likely to visit next. By front-loading these steps, the browser is ready the instant the resource is actually needed, rather than starting from scratch at that point.

The four hints worth knowing are preconnect, dns-prefetch, preload, and prefetch. They differ in how much work they trigger and when the resource is expected to be used. Choosing the right one for each situation is what separates a hint that helps from one that wastes effort. Used precisely, they are a sharp tool. Used carelessly, they create noise that competes with genuinely critical work.

Why resource hints matter

Page speed is often lost in the gaps between discovering a resource and being able to use it. Establishing a connection to a third-party server, for example, involves several steps that each take time: looking up the domain, negotiating a secure connection, and confirming it is ready. If the browser only starts this when it reaches the resource, the user waits. A preconnect hint moves that setup earlier, so by the time the font or script is requested, the connection is already open.

This matters most for the resources that block rendering or sit on the critical path. Getting fonts, key scripts, and the hero image ready sooner improves how quickly the page becomes visible and usable, which feeds directly into your Core Web Vitals. Largest Contentful Paint in particular benefits when you preload the resource responsible for the main content, because the browser fetches it without waiting to discover it through normal parsing.

Resource hints are a precision instrument within a broader performance practice. They do not replace the fundamentals covered in a full website speed optimization approach, such as compressing assets and reducing payload. Instead they fine-tune the order and timing of loading once those fundamentals are in place. The largest wins usually come from sending less and sending it efficiently. Hints then squeeze out the remaining gaps.

The four resource hints explained

dns-prefetch

The dns-prefetch hint asks the browser to resolve a domain name ahead of time. Domain resolution is the first step in connecting to any server, and it can add a small but real delay, especially for third-party origins. By prefetching the DNS lookup for a domain you know you will connect to, you remove that delay from the critical moment. It is the lightest hint, doing only the lookup and not the full connection, which makes it a safe choice for origins you are fairly but not certainly going to use.

preconnect

Preconnect goes further than dns-prefetch by performing the full connection setup in advance, including the domain lookup and the secure handshake. This is more powerful but also more costly, so it should be reserved for origins you are confident the page will use, such as the source of your fonts or a critical embedded service. Because each preconnect ties up resources, the guidance is to use it sparingly on a small number of high-value origins rather than scattering it across every external domain.

preload

Preload tells the browser to fetch a resource the current page will definitely need soon, with high priority. It is ideal for assets the browser would otherwise discover late, such as a font referenced deep inside a stylesheet or the hero image that defines your largest contentful paint. Preload changes the loading order so these critical resources arrive early. The catch is that a preloaded resource that is not actually used soon is wasted bandwidth, so reserve it for genuinely critical, current-page assets.

prefetch

Prefetch is forward-looking. It fetches a resource that a future navigation is likely to need, at low priority, during idle time. If you can reasonably predict the next page a visitor will go to, prefetching its key resources means that next page loads almost instantly. Because prefetch is low priority, it does not compete with the current page’s critical work, which makes it a gentle way to make subsequent navigation feel immediate without harming the page in front of the user.

How to measure the impact of hints

Resource hints should earn their place by improving real metrics, so measure before and after rather than adding them on faith.

• Use the browser developer tools Network panel to watch the timing of connections and downloads. With a preconnect in place, the connection setup for that origin should appear early rather than at the moment of request.
• Run Google Lighthouse or PageSpeed Insights, which explicitly suggest preconnect and preload opportunities and flag the resources holding back your Largest Contentful Paint.
• Check for preload warnings. Browsers warn in the console when a preloaded resource is not used quickly, which is your signal that the hint is wasted.
• Compare your key metrics before and after adding hints. If Largest Contentful Paint improves after preloading the right asset, the hint is doing its job.

The most actionable metric is usually Largest Contentful Paint, because the resource responsible for it is often a clear preload candidate. When the tools point to a specific late-discovered asset, that is exactly where a hint will pay off.

How to implement resource hints

Resource hints are declared in the head of the document, each pointing at the origin or resource it concerns. The approach is to start from the data: let your performance tools tell you which connections are slow to establish and which critical resources are being discovered late, then add the matching hint. Add preconnect for the third-party origins on your critical path, preload for the late-discovered critical assets like fonts and the hero image, and consider prefetch only for confidently predicted next pages.

Preload pairs especially well with critical-path techniques. If you are already prioritizing your critical CSS to get the page painting sooner, preloading the fonts that critical CSS depends on prevents a flash of unstyled or invisible text and keeps the early render clean. The two techniques work toward the same goal: getting a correct, styled first paint in front of the visitor as quickly as possible.

Restraint is the governing principle. Each hint consumes bandwidth and browser attention, so a page littered with preconnects and preloads can end up slower than one with a careful few. Add hints deliberately, measure the effect, and remove any that do not move a metric. A short list of well-chosen hints beats a long list of speculative ones every time.

Common mistakes

• Preloading too many resources, which crowds out the truly critical ones and can delay the very thing you wanted to speed up.
• Preconnecting to every external domain instead of the small number on the critical path, wasting connection resources.
• Preloading a resource the page does not use soon, which the browser will flag as wasted bandwidth.
• Confusing preload and prefetch. Preload is for the current page’s critical assets, prefetch is for a likely next page.
• Adding hints without measuring, so you never learn whether they helped or quietly hurt.

Resource hints in Framer

On a Framer site, the most impactful resource hints are handled for you. Framer applies sensible preconnect and preloading behavior for the assets it controls, such as fonts and critical resources, and serves your site through a global content delivery network that already shortens connection times by placing assets close to your visitors. Much of the discovery-and-connection delay that hints exist to fix is reduced at the platform level before any manual hint would be needed.

This is consistent with how managed platforms approach performance: the foundational optimizations are built in so you do not have to hand-tune them. Framer also optimizes images, applies modern compression to text, and delivers over modern protocols, all of which reduce the gaps that resource hints would otherwise patch. With the heavy lifting handled, the remaining opportunities for manual hints tend to be narrow and specific rather than broad and structural.

For a Framer site owner, the sensible posture is to focus on the content and assets you add yourself. If you embed a third-party service or a custom font from an external source, that is where a targeted hint might help, and your performance tools will tell you if it does. Run Lighthouse, look for explicit preconnect or preload suggestions tied to resources you introduced, and act on those specific recommendations. The platform covers the baseline, and you handle the exceptions, which keeps your hints few, deliberate, and effective.

Frequently Asked Questions

What is the difference between preload and prefetch?

Preload tells the browser to fetch a resource the current page needs soon, with high priority, such as a font or the hero image. Prefetch tells the browser to fetch a resource a likely next page will need, at low priority, during idle time. Preload speeds up the page in front of the visitor, while prefetch makes the next navigation feel instant. Using one in place of the other wastes effort.

When should I use preconnect versus dns-prefetch?

Use preconnect for third-party origins you are confident the page will use, because it performs the full connection setup including the secure handshake, which is powerful but costly. Use dns-prefetch for origins you are likely but not certain to use, since it only resolves the domain name and is much lighter. Preconnect should be limited to a small number of high-value origins to avoid wasting connection resources.

Can resource hints slow down my website?

Yes, if overused. Each hint consumes bandwidth and browser attention, so preloading too many resources or preconnecting to every external domain can crowd out the resources that genuinely matter and make the page slower. The fix is restraint: add a few well-chosen hints based on what your performance tools recommend, measure the effect, and remove any that do not improve a metric.

Do I need to add resource hints on a hosted platform like Framer?

Usually not for the core assets. Framer applies sensible preconnect and preloading for the resources it controls and serves your site through a content delivery network that already shortens connection times. The main place a manual hint might help is a third-party service or external font you add yourself, and tools like Lighthouse will flag those specific opportunities so you can act only where it counts.