Optimiser la priorité de préchargement

Fonctionnalités Web : Priorité de récupération <link rel="preload">

Le préchargement des ressources avec <link rel="preload"> indique au navigateur qu'une ressource sera bientôt nécessaire. Toutefois, les préchargements héritent de la priorité par défaut du type de ressource, qui est faible, en particulier pour les images. L'utilisation de fetchpriority vous permet d'affiner cette priorité relative, en veillant notamment à ce que les préchargements d'images soient préchargés avec une priorité élevée, ce qui leur permet de démarrer plus tôt et d'utiliser davantage de ressources de bande passante.

Mise en œuvre

  1. Identifier les candidats au préchargement : recherchez les ressources qui ne sont pas découvertes rapidement par le navigateur (par exemple, les images d'affiche vidéo ou les images de fond en CSS), mais qui sont essentielles pour l'apparence de la page.
  2. Améliorez les préchargements d'images critiques : pour l'image LCP ou d'autres images critiques qui ne sont pas prioritaires par défaut, utilisez <link rel="preload" fetchpriority="high"> pour vous assurer qu'elles sont prioritaires par rapport aux autres préchargements. Notez que les polices sont déjà prioritaires par défaut.
  3. Définissez une priorité plus faible pour les préchargements non critiques : pour les ressources qui ne sont pas critiques pour l'affichage initial (par exemple, une vidéo en arrière-plan ou des polices secondaires), utilisez <link rel="preload" fetchpriority="low">.
  4. Coordonner avec les types de ressources : notez que les différents types de as ont des priorités par défaut différentes. Utilisez fetchpriority pour remplacer ces valeurs par défaut si nécessaire.

Exemple de code

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Bonnes pratiques

  • OBLIGATOIRE : N'utilisez fetchpriority="high" que sur un ou deux préchargements d'images critiques au maximum pour éviter les conflits réseau et la dilution de l'amélioration de la priorité.
  • OBLIGATOIRE : utilisez fetchpriority="high" sur les images Largest Contentful Paint (LCP).
  • À FAIRE : Limitez le nombre total de préchargements sur une page à deux images et deux ou trois polices essentielles au maximum pour éviter les conflits de bande passante.
  • À FAIRE : Utilisez fetchpriority="low" pour les préchargements que vous souhaitez que le navigateur lance tôt, mais pas au détriment des ressources critiques (en particulier les polices non critiques).
  • À FAIRE : Spécifiez correctement l'attribut as pour vous assurer que le préchargement sera utilisé.
  • À FAIRE : Privilégiez la détection statique des ressources critiques (comme les images LCP) dans le code HTML à l'aide de balises <img> plutôt que de vous appuyer sur des préchargements pour les images de fond.
  • À FAIRE : Assurez-vous que les préchargements de polices comportent toujours l'attribut crossorigin (même s'ils proviennent de la même origine).
  • N'UTILISEZ PAS l'attribut importance obsolète. Il a été remplacé par fetchpriority.

Stratégie de remplacement

L'attribut fetchpriority sur <link rel="preload"> est une amélioration progressive. Les navigateurs qui ne le prennent pas en charge préchargeront toujours la ressource en utilisant leur priorité par défaut pour ce type de ressource. Pour garantir la compatibilité, indiquez toujours les attributs as et type appropriés.