http-early-hints

INSPIRED BY THE RFC 8297 https://www.rfc-editor.org/rfc/rfc8297.txt

http-early-hints

Is a lightweight, zero-dependency Node.js utility for sending HTTP 103 Early Hints headers. It helps improve web performance by allowing browsers to preload resources before the full response is sent.

📦 Installation

You can install the package using npm or yarn:

npm install http-early-hints
Or:

yarn add http-early-hints

Introduction

HTTP 103 Early Hints is an informational status code introduced in RFC 8297. It allows a server to hint to the browser which assets it should start preloading, reducing time-to-first-byte and improving perceived performance.

This utility simplifies the process of sending Early Hints headers in your server application (e.g., Express, Fastify, Node.js).

Getting Started

With Express:

import express from 'express';
import { sendEarlyHints } from 'http-early-hints';

const app = express();

app.get('/', (req, res) => {
  sendEarlyHints(res, [
    '</styles.css>; rel=preload; as=style',
    '</app.js>; rel=preload; as=script',
  ]);

  res.send('Welcome to the homepage!');
});

API Reference

sendEarlyHints(res: ServerResponse, links: string[]): void Sends a 103 Early Hints header with one or more Link headers.

Parameters

Name Type Description res ServerResponse Node.js response object links string[] Array of link headers to preload

Example ts

sendEarlyHints(res, [
  '</main.css>; rel=preload; as=style',
  '</bundle.js>; rel=preload; as=script'
]);

Use Cases

Preloading Styles and Scripts

Improving Time to First Paint

Enhancing Core Web Vitals

Reducing Critical Rendering Path

Examples

Node.js (no framework) ts

import http from 'http';
import { sendEarlyHints } from 'http-early-hints';

http.createServer((req, res) => {
  if (req.url === '/') {
    sendEarlyHints(res, [
      '</main.css>; rel=preload; as=style',
      '</main.js>; rel=preload; as=script',
    ]);

    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Hello, world!</h1>');
  }
}).listen(3000);

Project Structure

http-early-hints/
├── src/
│   └── index.ts           # Source code
├── dist/
│   └── index.js           # Compiled JavaScript
├── package.json           # NPM metadata
├── tsconfig.json          # TypeScript configuration
└── README.md              # Project documentation

Performance Benefits

Sending 103 Early Hints can:

Improve First Contentful Paint (FCP)

Enable browsers to preload assets faster

Reduce page load latency

Increase Core Web Vitals scores

Supported in modern browsers (Chrome, Edge, Safari, etc.)

Roadmap

Add ESM + CommonJS compatibility

Auto-generate link headers from manifest files

Framework integrations (Koa, Hapi, NestJS)

Unit tests and CI

License

This project is licensed under the MIT License.

Author @dav-oss