Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance

With just two lines of code you can achieve the optimization shown in the example image, reducing the JavaScript file load time from 1.4 seconds to 0.4 seconds (a 67 % reduction). The article walks through the four resource‑hint APIs that browsers provide to control when resources are fetched.

1. Four Types of Resource Hints

1.1 Prefetch

Prefetch tells the browser to download a resource (JS, CSS, image, font, etc.) when CPU and network bandwidth are idle, storing it in the prefetch cache without executing it. Use a link tag with rel="prefetch" and the target URL in href :

<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" />

The request is made once the tag is inserted into the DOM, and the response is saved in the prefetch cache. The Network panel will show a size label (prefetch cache) . Prefetch works for many resource types, including JS, CSS, images, audio, WASM, fonts, and even HTML documents.

1.2 Preload

Preload raises the priority of a resource that the current page needs immediately, ensuring it loads before other non‑critical assets. It is most commonly used for fonts:

<link rel="preload" as="font" href="/main.woff" />

Resources marked with preload appear with a high Priority value in DevTools, just after the Document itself.

1.3 Preconnect

Preconnect establishes DNS, TCP, and TLS connections to a target domain ahead of time, reducing connection latency for subsequent requests:

<link rel="preconnect" href="https://github.com" />

Use it sparingly (no more than six domains) because each preconnect keeps a network connection open for at least ten seconds.

1.4 DNS‑Prefetch

DNS‑Prefetch resolves the IP address of a domain in advance, without opening a full connection. It is used together with preconnect for maximum benefit:

<link rel="dns-prefetch" href="https://github.com" />

2. Crossorigin Attribute and Security

The crossorigin attribute controls whether a resource is fetched with CORS. Without it, JavaScript error contexts are unavailable. Setting crossorigin="anonymous" allows error reporting but does not send cookies; crossorigin="use-credentials" sends cookies and other credentials.

For cross‑origin resources, the corresponding hint tags must also include the appropriate crossorigin value, e.g.:

<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" crossorigin="anonymous" />

3. Quantitative Results

A table compares load times before and after applying preconnect & DNS‑prefetch, showing a drop from 1400 ms to 451 ms (‑67 %). Screenshots from Chrome DevTools illustrate the timing improvements.

4. Using resource‑hint‑generator in a Project

The npm package resource-hint-generator automates the insertion of these hints. Install it as a dev dependency:

npm install resource-hint-generator --save-dev

Create a configuration file resource-hint-generator-config.js that defines the output path, public CDN path, files to include, and preconnect domains.

// resource-hint-generator-config.js
module.exports = {
  resourcePath: `./dist`,
  projectRootPath: __dirname,
  resourceHintFileName: `resource-hint.js`,
  includeFileTestFunc: (fileName) => {
    return /(main.*js)|(main.*css)/g.test(fileName);
  },
  crossOriginValue: '',
  publicPath: 'https://github.com/JuniorTour',
  preconnectDomains: ['https://preconnect-example.com'],
};

Add a script to package.json so that the generator runs after the build step:

{
  "scripts": {
    "generate-resource-hint": "resource-hint-generator",
    "build": "cross-env NODE_ENV=production webpack && npm run generate-resource-hint"
  }
}

After building, the generated resource-hint.js will contain the appropriate prefetch , preconnect , and dns-prefetch tags.

5. Validation, Monitoring, and Evaluation

Before release, verify the hints in Chrome DevTools by checking the Network panel for the expected Priority , Size , and timing values. Use scripts to programmatically add link tags and observe the results.

Collect web‑vitals (FCP, LCP) and cache‑hit metrics via the Performance API and report them to Grafana. Example code shows how to detect cache hits by measuring entry.duration and reporting values.

Compare metrics before and after deployment: FCP and LCP improvements, as well as a rise in cache‑hit rate from ~40 % to ~70 % after the optimization, confirming the effectiveness of resource‑hint usage.

6. Conclusion

Applying resource‑hint APIs and automating them with resource‑hint‑generator can significantly reduce load times, improve user‑experience metrics, and increase cache efficiency for frontend projects.