Definition

Resource hints are signals, usually given as link elements, that inform the browser about connections or resources a page is likely to need. They let the browser do preparatory work — such as resolving a domain or fetching a file — before that work is strictly required.

Common resource hints include dns-prefetch, which resolves a domain name in advance; preconnect, which establishes a full connection including DNS, TCP and TLS to an origin; preload, which fetches a resource needed for the current page at a higher priority; and prefetch, which fetches a resource likely to be needed for a future navigation. Hints are advisory rather than mandatory — the browser may choose not to act on them depending on conditions such as available bandwidth. Used appropriately, preconnect and preload can reduce delays for critical third-party origins and assets.

Examples

• Third-party connection

  A page adds a preconnect hint for a font provider's domain, so the connection is established before the font file is requested.

• Critical asset

  A site uses a preload hint for its hero image so the browser fetches it early, helping its Largest Contentful Paint.

Sources

• web.dev — Establish network connections early with preconnect and dns-prefetch
• web.dev — Preload critical assets to improve loading speed

Related terms

• Page Speed
  How quickly a web page loads and becomes interactive, measured by metrics such as Largest Contentful Paint, Interaction to Next Paint, and Time to First Byte.
• Render-Blocking Resources
  Resources — typically CSS and synchronous JavaScript — the browser must fetch and parse before it can paint the first frame of a page.
• Largest Contentful Paint
  A Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.
• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.
• Content Delivery Network
  A network of geographically distributed servers that cache and deliver web content from a location close to each user.
• Lazy Loading
  A technique that defers loading of off-screen images, iframes, or other resources until the user is about to scroll them into view.

Where QueryCatch uses this

• Page Optimisation
• SEO Audit