mdn/content

Topic on setting HTTP priority of resource requests

Open

#14,803 opened on Apr 8, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)Markdown (22,427 forks)batch import
Content:Performancedocument not writtenhelp wanted

Repository metrics

Stars
 (8,900 stars)
PR merge metrics
 (Avg merge 7d 3h) (147 merged PRs in 30d)

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() and set the priority in Request.priority.
  • Set the HTTP priority on HTMLLinkElement, HTMLIFrameElement, and HTMLImageElement elements (and associated tags) using the fetchpriority attribute.
  • In future maybe Priority HTTP header. There are also some ideas (from here), 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:

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

Contributor guide

Research direction
Research the current specification status and browser support for fetchpriority attribute and Request.priority, then write a new topic page under the Web Performance section, incorporating techniques like async scripts, preload, and inline @font face.
Tech stack
htmlcssjavascript
Domain
documentationweb dev
Issue type
Documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Basic understanding of web performance
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80