mdn / mdn/content

Topic on setting HTTP priority of resource requests

Open
#14,803 3 comments 0 reactions 0 assignees View on GitHub
Content:Performance document not written help wanted
Dominant language
Markdown
Stars
11k
Forks
23.2k
Avg merge
2d 9h
Merged PRs (30d)
331

Description

When loading a page with many resources it can be useful to prioritize the requests so that the page appears to render more quickly. It would be useful to have a topic on this.

There are a bunch of ways to do this:
- Use [`fetch()`](/en-US/docs/Web/API/fetch) and set the priority in [`Request.priority`](/en-US/docs/Web/API/Request/priority).
- Set the HTTP priority on [`HTMLLinkElement`](https://developer.mozilla.org//en-US/docs/Web/API/HTMLLinkElement/fetchpriority), [`HTMLIFrameElement`](https://developer.mozilla.org//en-US/docs/Web/API/HTMLIFrameElement/fetchpriority), and [`HTMLImageElement`](https://developer.mozilla.org//en-US/docs/Web/API/HTMLImageElement/fetchpriority) elements (and associated tags) using the `fetchpriority` attribute.
- In future maybe [Priority](https://tools.ietf.org/id/draft-ietf-httpbis-priority-01.html) HTTP header. There are also some ideas ([from here](https://calibreapp.com/blog/critical-request)), some of which may be relevant (e.g. marking the non-critical ones as `async`):
- Mark non-critical scripts as async
- Consider inlining @font-face declarations directly into HTML
- Avoid using CSS background images or @import
- Use preload to retrieve critical resources earlier

Possible locations for such a page are under these:
- https://developer.mozilla.org/en-US/docs/Web/Performance
- https://developer.mozilla.org/en-US/docs/Web/API/fetch ?

This comes out of the discussion here: https://github.com/mdn/content/issues/14561

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.