Optimiser la priorité des scripts

Les navigateurs attribuent des priorités par défaut aux scripts en fonction de leur emplacement dans le document et de la présence d'attributs tels que async ou defer. L'utilisation de fetchpriority permet aux développeurs de contrôler explicitement le chargement des scripts critiques en premier, tandis que les scripts non essentiels sont mis de côté.

Mise en œuvre

1. Identifiez les scripts critiques : déterminez les scripts essentiels à la fonctionnalité de base de la page ou à l'interaction initiale de l'utilisateur.
2. Donnez la priorité aux scripts asynchrones critiques : pour les scripts critiques chargés avec async ou defer, ajoutez l'attribut fetchpriority="high" pour vous assurer qu'ils sont prioritaires lors de la phase de découverte.
3. Définissez une priorité plus faible pour les scripts non essentiels : pour les scripts qui ne sont pas nécessaires immédiatement (par exemple, les analyses, les annonces ou les widgets situés sous la ligne de flottaison), ajoutez fetchpriority="low" et assurez-vous qu'ils ont un attribut async, defer ou module pour éviter tout blocage.
4. Séquencez les scripts bloquant l'analyseur : utilisez fetchpriority="low" sur les scripts bloquant l'analyseur à la fin du corps pour éviter qu'ils ne se disputent la bande passante avec des ressources plus critiques.

Exemple de code

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Bonnes pratiques

• OBLIGATOIRE : N'utilisez fetchpriority="high" que sur un ou deux scripts critiques au maximum pour éviter la contention du réseau et la dilution de l'augmentation de la priorité.
• À FAIRE : Utilisez fetchpriority="high" spécifiquement pour les scripts async connus pour être essentiels à l'Interaction to Next Paint (INP).
• À FAIRE : Définissez une priorité plus faible pour les scripts qui ne sont pas nécessaires à l'expérience utilisateur initiale à l'aide de fetchpriority="low".
• N'UTILISEZ PAS fetchpriority sur chaque tag de script. Il ne doit être utilisé que pour modifier l'heuristique par défaut du navigateur lorsqu'elle est connue comme étant sous-optimale.
• N'UTILISEZ PAS l'attribut importance obsolète. Il a été remplacé par fetchpriority.

Stratégie de remplacement

L'attribut fetchpriority est une amélioration progressive. Les navigateurs qui ne le prennent pas en charge ignoreront l'attribut et utiliseront leur logique de planification interne sans erreur. Aucune détection explicite des fonctionnalités ni logique de remplacement n'est requise pour une utilisation de base.