Topic on setting HTTP priority of resource requests
- 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
Assessment
This issue has not been assessed yet.