mdn/content

Topic on setting HTTP priority of resource requests

Open

#14 803 ouverte le 8 avr. 2022

Voir sur GitHub
 (3 commentaires) (0 réactions) (0 assignés)Markdown (22 427 forks)batch import
Content:Performancedocument not writtenhelp wanted

Métriques du dépôt

Stars
 (8 900 stars)
Métriques de merge PR
 (Merge moyen 7j 3h) (147 PRs mergées en 30 j)

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

Guide contributeur

Direction de recherche
Recherchez l'état actuel de la spécification et la prise en charge des navigateurs pour l'attribut fetchpriority et Request.priority, puis rédigez une nouvelle page de sujet dans la section Web Performance, en intégrant des techniques comme les scripts async, preload et @font face en ligne.
Stack technique
htmlcssjavascript
Domaine
documentationweb dev
Type d'issue
Documentation
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
Basic understanding of web performance
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80