Skip to content

docs: clarify that preloads are sent as a Link header on dynamically rendered pages#16309

Open
Nic-Polumeyv wants to merge 3 commits into
sveltejs:version-3from
Nic-Polumeyv:docs-preload-link-header
Open

docs: clarify that preloads are sent as a Link header on dynamically rendered pages#16309
Nic-Polumeyv wants to merge 3 commits into
sveltejs:version-3from
Nic-Polumeyv:docs-preload-link-header

Conversation

@Nic-Polumeyv

Copy link
Copy Markdown
Contributor

closes #16139

The preload docs say the selected files "should be added to the <head> tag". Since #14200 that only happens for prerendered pages. Dynamically rendered pages send a Link response header instead, with no tag in the HTML.

The old wording produced #16139. The reporter enabled font preloading, searched the served HTML for a <link rel="preload" as="font"> tag, and reasonably concluded the feature was broken. Running their reproduction, the font was preloaded the whole time:

link: <./_app/immutable/assets/SUIT-Variable.gqD86R3M.woff2>; rel="preload"; as="font"; type="font/woff2"; crossorigin; nopush

This updates the hooks docs and the ResolveOptions JSDoc to name both delivery paths.


Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

  • Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

@pkg-svelte-dev

pkg-svelte-dev Bot commented Jul 10, 2026

Copy link
Copy Markdown

Install the latest version of @sveltejs/kit from c7528c9:

pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/c7528c901eca5caccdf40122d333d883b764c663

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/kit/pr/16309

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

@changeset-bot

changeset-bot Bot commented Jul 10, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: c7528c9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@teemingc teemingc added the documentation Improvements or additions to documentation label Jul 10, 2026
@svelte-docs-bot

Copy link
Copy Markdown

Comment thread documentation/docs/30-advanced/20-hooks.md Outdated
@teemingc

Copy link
Copy Markdown
Member

Thanks! Can you rebase this on the version-3 branch?

@Nic-Polumeyv Nic-Polumeyv force-pushed the docs-preload-link-header branch from 573ffdf to 7d59e63 Compare July 10, 2026 18:59
@Nic-Polumeyv Nic-Polumeyv changed the base branch from main to version-3 July 10, 2026 18:59
- `transformPageChunk(opts: { html: string, done: boolean }): MaybePromise<string | undefined>` — applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.
- `filterSerializedResponseHeaders(name: string, value: string): boolean` — determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`. By default, none will be included.
- `preload(input: { type: 'js' | 'css' | 'font' | 'asset', path: string }): boolean` — determines what files should be added to the `<head>` tag to preload it. The method is called with each file that was found at build time while constructing the code chunks — so if you for example have `import './styles.css` in your `+page.svelte`, `preload` will be called with the resolved path to that CSS file when visiting that page. Note that in dev mode `preload` is _not_ called, since it depends on analysis that happens at build time. Preloading can improve performance by downloading assets sooner, but it can also hurt if too much is downloaded unnecessarily. By default, `js` and `css` files will be preloaded. `asset` files are not preloaded at all currently, but we may add this later after evaluating feedback.
- `preload(input: { type: 'js' | 'css' | 'font' | 'asset', path: string }): boolean` — determines which files should be preloaded. When a page is rendered dynamically, files are preloaded via the [`Link` response header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link); prerendered pages have `<link>` tags added to the `<head>` tag instead. The method is called with each file that was found at build time while constructing the code chunks — so if you for example have `import './styles.css` in your `+page.svelte`, `preload` will be called with the resolved path to that CSS file when visiting that page. Note that in dev mode `preload` is _not_ called, since it depends on analysis that happens at build time. Preloading can improve performance by downloading assets sooner, but it can also hurt if too much is downloaded unnecessarily. By default, `js` and `css` files will be preloaded. `asset` files are not preloaded at all currently, but we may add this later after evaluating feedback.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The preload resolve-option docs (and the matching JSDoc in public.d.ts / types/index.d.ts) claim dynamically rendered pages always use the Link response header, but on version-3 that is opt-in via output.linkHeaderPreload (default false); by default dynamic pages use <link> tags in the <head>.

Fix on Vercel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Font preloading does not work

2 participants