Conseils concernant les outils de développement: débogage de la priorité de récupération

Sofia Emelianova

Le navigateur affiche d'abord le contenu d'une page Web, puis d'autres ultérieurement. Avec l'API Fetch Priority, vous pouvez signaler au navigateur la priorité d'extraction initiale des ressources importantes afin d'optimiser le chargement des ressources.

Regardez la vidéo pour découvrir comment:

• Recherchez la métrique de chargement, Largest Contentful Paint (LCP), dans le panneau Performances.
• Consultez les priorités initiale et finale dans le panneau Network (Réseau) et le canal Network (Réseau) de la trace Performance.
• Utilisez les remplacements locaux pour tester les attributs fetchpriority dans les éléments <img>, <link> et <script>.
• Découvrez la différence entre les attributs loading et fetchpriority.
• Découvrez quand baisser la priorité des ressources.

Attention :N'utilisez l'API Fetch Priority que lorsqu'il y a une bonne raison de le faire. Si tous les éléments ont une priorité élevée, alors rien ne l'est.

Les images LCP peuvent clairement bénéficier de fetchpriority="high". Autre conseil : si le navigateur augmente automatiquement la priorité d'une image, il est donc logique de la définir initialement.

Pour en savoir plus, consultez :

• Optimiser le chargement des ressources avec l'API Fetch Priority
• Afficher les requêtes réseau
• Afficher les codes temporels
• Utiliser des lignes de requêtes volumineuses