Nuxt module that adds HTTP header resource hints for resources in your Nuxt App.
Resource hints allow the browser to discover and request resources earlier in the page loading process for faster page loading.
See the example below.
You can learn more about resources hints at: https://web.dev/learn/performance/resource-hints
- 🚀 Faster Page Loading
- ✅ SSR Support
- ✅ SSG Support
Install the module to your Nuxt application with one command:
npx nuxi module add nuxt-resource-hintsThat's it! You can now use Nuxt Resources Hints in your Nuxt app
Nuxt Resources Hints adds hints to the web browser of upcoming resources. To hint at the render blocking CSS the link header is added to the response.
Identifying the resources required early in HTTP headers allows the browser can request these resources simultaneously while waiting for the HTML parser to identify these resources.
The longer the parser takes to parse the page document, the more time is need for fetching resources for the document.
The Link header on line 4 for the resources on line 26 and 27 are added to the Link header.
Extract of the HTTP response from the server:
Link: </_nuxt/entry.CULgFwK1.css>; rel="prefetch"; as="style"; crossorigin; fetchpriority="high", </_nuxt/ContentToc.Di3Xiqq1.css>; rel="prefetch"; as="style"; crossorigin; fetchpriority="high"The Link header is telling the browser to prefetch the specified CSS files with high priority, enabling faster page load times when those styles are needed.
CSS files identified:
/_nuxt/entry.CULgFwK1.css/_nuxt/ContentToc.Di3Xiqq1.css
Extract of the HTTP response's contents from the server as HTML:
<link rel="stylesheet" href="/_nuxt/entry.CULgFwK1.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/ContentToc.Di3Xiqq1.css" crossorigin>The HTML link code for the styles identified on line 4.
CSS files identified:
/_nuxt/entry.CULgFwK1.css/_nuxt/ContentToc.Di3Xiqq1.css
HTTP/2.0 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Link: </_nuxt/entry.CULgFwK1.css>; rel="prefetch"; as="style"; crossorigin; fetchpriority="high", </_nuxt/ContentToc.Di3Xiqq1.css>; rel="prefetch"; as="style"; crossorigin; fetchpriority="high"
<!DOCTYPE html>
<html lang="en" data-capo="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<meta ...>
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<link rel="stylesheet" href="/_nuxt/entry.CULgFwK1.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/ContentToc.Di3Xiqq1.css" crossorigin>
<link rel="preload" as="fetch" crossorigin="anonymous"
href="/docs/community/contribution/_payload.json?6afb007e-bd17-4be8-9ad0-cf237cb47582">
<link rel="modulepreload" as="script" crossorigin href="/_nuxt/CRzzB7A9.js">
<link rel="modulepreload" as="script" crossorigin href="/_nuxt/BIeF1yTG.js">
...In this example the styles have been shortened for readability, the browser will have to read past all these styles and other head contents before identifying the styles. As the styles resources are retrieved prior with the Link header's prefetch parameters, page rendering has the resources sooner.
The current Performance Analysis is out dated.
The expected savings for Largest Contentful Paint (LCP) is could be between 10ms and 30ms. The new system is no longer shown in Fulfilled By.
Outdated Performance Analysis
Test sample size of 1
The below image shows the Network fetching the styles ahead of the parser identifying the required resources.
The parser's requests for the styles are marked as Fulfilled by with (prefetch cache).
CPU:
No throttling, Network:4G Fast, Settings:Big request rows, Columns:Priority,Fulfilled By
The below image shows the Performance diagram, where the network requests start and end and what time the HTML parser starts and ends. The browser requests the styles before the parser starts, the parser later identifies the styles with note they are render blocking while the browser is already downloading the styles from the resource hints.
Local development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release- Test Safari
- Test Firefox
- Test Regular SSR
- Test hook execution order