Lien rel=preload : hiérarchiser les ressources pour une meilleure vitesse du site

En 2016, w3c, avec Yoav Weiss, a publié un nouveau standard Web pour Chrome appelé link rel="preload" ouvrant de nouvelles voies vers des temps de chargement plus rapides.

Six ans plus tard, le préchargement est la technique de priorisation des ressources n°1 adoptée par les sites de premier plan pour améliorer la vitesse de chargement et l'expérience utilisateur.

Diagramme à barres montrant l'adoption de rel="preload" segmenté par rang CrUX. Source : Web Almanach 2021

La popularité croissante du lien rel=preload prouve à quel point il peut être efficace. Ce qui le rend également sujet aux abus.

En raison de sa flexibilité, le préchargement de ressources importantes nécessite des connaissances plus approfondies si vous voulez faire plus de bien que de mal.

Dans cet article, vous apprendrez :

• Comment fonctionne la priorisation des ressources
• Quelle est la précharge du lien rel
• Quels éléments de page Web vous pouvez précharger
• Quand vous devriez (et ne devriez pas) utiliser le lien rel=preload
• Quels sont les améliorations apportées au préchargement des métriques Core Web Vitals
• Les avantages du lien rel=preload dans les sites Web réels

Plongeons directement dedans !

Voyez à quel point votre site Web peut être plus rapide avec NitroPack

Hiérarchisation des ressources expliquée

La hiérarchisation manuelle des ressources est votre façon d'éliminer les conjectures que les navigateurs modernes font du processus de chargement des pages.

Cependant, avant de commencer à influencer comment et quand les ressources sont chargées, nous devrions couvrir quelques notions de base.

Par défaut, les navigateurs essaieront de déterminer quels actifs demander et dans quel ordre. Lorsqu'un navigateur télécharge une ressource, une priorité lui est toujours attribuée : la plus élevée, la plus élevée, la moyenne, la plus faible ou la plus faible.

Les priorités dépendent du type de ressource (par exemple, texte, image, feuille de style, script, vidéo) et de l'emplacement de la référence de ressource dans le document.

Lorsque vous choisissez les actifs à précharger, vous devez être conscient des ressources bloquant le rendu et ne pas empêcher les navigateurs de les télécharger en premier. Sinon, vous pourriez finir par afficher une page vierge au lieu de la charger plus rapidement.

Optimisez les ressources critiques sur le pilote automatique ! Visualisez votre site avec NitroPack.

Qu'est-ce que le lien rel=preload ?

En termes simples, link rel=preload est une commande pour indiquer aux navigateurs que vous souhaitez qu'ils récupèrent une ressource importante plus tôt qu'ils ne le découvriraient normalement.

Contrairement à d'autres techniques de hiérarchisation des ressources telles que prefetch et preconnect , le préchargement n'est pas simplement un indice mais un déclaratif. Cela signifie que les navigateurs sont obligés de récupérer la ressource dont vous savez qu'elle est cruciale pour l'expérience de la page.

Vous pouvez précharger des ressources en ajoutant une balise de lien avec rel="preload" à l'en-tête de votre document HTML :

< lien rel ="preload" as ="script" href ="critical.js">

Ne vous inquiétez pas, nous reviendrons un peu sur les détails.

Quels navigateurs prennent en charge le lien rel=preload ?

Le préchargement est pris en charge par tous les principaux navigateurs, ce qui permet aux propriétaires et aux développeurs de sites d'offrir des temps de chargement plus rapides et une expérience utilisateur sans limite.

Pour une ventilation détaillée des versions de navigateur prises en charge, consultez ce tableau par "Puis-je utiliser".

Le lien rel=preload est-il nécessaire ?

Le préchargement des ressources cruciales vous donne un contrôle granulaire pour définir une logique de chargement personnalisée. Que votre site en ait besoin ou non dépend des résultats de vos audits.

Pour une évaluation de haute qualité des demandes clés, nous vous recommandons d'explorer les tests manuels de vitesse des pages Web et les données de laboratoire de terrain collectées en interne.

Hyper-jump to : comment vérifier les ressources à précharger.

Le lien rel=preload bloque-t-il le rendu ?

La balise de préchargement peut interférer avec le bon rendu de la page lorsqu'elle est utilisée pour des fichiers non essentiels en grande quantité. Dans ce cas, au lieu de se concentrer sur d'importantes ressources bloquant le rendu, le navigateur est occupé par de nombreux fichiers de faible priorité.

Par exemple, la page d'accueil d'Asana comporte 26 balises de préchargement pour les fichiers JavaScript de faible importance. Cela entraîne des retards importants dans le rendu de la page, ce qui nuit à l'expérience utilisateur.

(Exemple de page d'accueil Asana) La ligne verte dans le graphique en cascade des demandes indique quand la page commence à s'afficher. Source : article de DebugBear

Lien rel = "preload" vs. rel = "prefetch"

Lorsque le préchargement est devenu disponible pour la première fois, de nombreux utilisateurs étaient confus quant à ses avantages par rapport à la directive de prélecture déjà existante.

Prefetch se concentre sur une ressource qui deviendra très probablement essentielle pour les navigations futures (c'est-à-dire après la page en cours). Le préchargement, quant à lui, traite d'une ressource pour la navigation en cours.

Quels éléments de page Web puis-je précharger ?

Comme mentionné précédemment, le préchargement du lien rel convient aux ressources généralement découvertes tardivement par le navigateur.

Les ressources que vous pouvez précharger incluent :

• Fichiers son et musique
• Vidéo (MP4, MP3, WebM)
• Pistes Audio WebVTT
• Fichiers JavaScript
• Feuilles de style CSS
• Polices Web (TTF, EOT, WOFF, WOFF2)
• Images (AVIF, WebP, JPG et JPEG ou PNG)
• XHR et récupérer les requêtes API
• Travailleurs Web
• Intégration multimédia et objet

La directive preload comporte une puissante valeur "as". Il est essentiel d'indiquer aux navigateurs quelle priorité donner à la ressource que vous préchargez sans retarder les fichiers les plus importants ou prendre du retard sur les moins importants.

Voici une liste pratique de valeurs "as" que vous pouvez spécifier :

Yoav Weiss (membre de l'équipe des relations avec les développeurs de Google Chrome) note également :

"... le préchargement ne bloque pas l'événement onload de la fenêtre à moins que la ressource ne soit également demandée par une ressource qui bloque cet événement."

Passons en revue les ressources les plus courantes que les propriétaires et les développeurs de sites choisissent de précharger.

Comment lier des images rel=preload

Il y a toujours au moins une page sur votre site avec une grande image dans la fenêtre accueillant les visiteurs du site dès le début. De telles images sont des candidats parfaits pour le préchargement.

N'oubliez pas de précharger les ressources en ajoutant une balise de lien avec rel="preload" à l'en-tête de votre document HTML. Ainsi:

Le résultat est que votre image se charge plus tôt et améliore l'une des métriques Core Web Vitals les plus difficiles - LCP.

Cependant, pour précharger des images réactives, vous devez utiliser les attributs imagesrcset et imagesizes pour aider les navigateurs à sélectionner l'image appropriée à télécharger en fonction de la taille de l'écran.

Optimisez toutes vos images pour des temps de chargement rapides et une réactivité sur pilote automatique. Visualisez votre site avec NitroPack.

Comment lier rel=preload web fonts

Les polices définies avec les règles @font-face dans les fichiers CSS ne sont pas récupérées tant que les navigateurs n'ont pas téléchargé et analysé les fichiers CSS. C'est pourquoi les polices Web sont le deuxième atout le plus populaire que les sites Web les mieux classés choisissent de précharger.

Voici un exemple d'extrait :

Comment lier les fichiers JavaScript rel=preload

Pour améliorer les métriques de réactivité telles que Time to Interactive, nous vous recommandons de diviser les bundles JavaScript volumineux et de ne précharger que les morceaux critiques.

De cette façon, les navigateurs peuvent séparer la récupération de l'exécution et découvrir cette ressource particulière plus tôt avant de télécharger l'ensemble du bundle JS.

Cela donnerait quelque chose comme ça :

< lien rel ="preload" as ="script" href ="late_discover.js">

Quand dois-je utiliser le préchargement du lien rel ?

C'est un cas de "ça dépend".

La règle générale est de ne précharger que les actifs découverts tardivement dont vous savez qu'ils sont essentiels pour les premières interactions lorsqu'un visiteur arrive sur une page.

Comment vérifier quelles ressources précharger ?

Comme nous l'avons mentionné précédemment, la meilleure façon de déterminer les ressources à précharger consiste à vérifier le chargement de vos pages Web.

Heureusement, vous pouvez identifier les ressources à précharger à l'aide des graphiques Request Waterfall dans Chrome DevTools.

Étape 1 : Visitez la page Web sur laquelle la plupart de vos visiteurs atterrissent et « Inspectez-la »

Étape 2 : Accédez à l'onglet "Réseau" et actualisez la page pour générer le graphique en cascade

Étape 3 : Faites un clic droit sur la section "Nom" pour activer la colonne "Priorité"

Étape 4 : Découvrez comment les ressources ont été chargées et la priorité qui leur a été attribuée afin d'identifier les ressources possibles pour le préchargement

De plus, votre rapport Lighthouse comporte une section « Opportunités » qui signale les actifs découverts tardivement dans votre chaîne de demandes critiques en tant que candidats au préchargement :

Comment savoir si le préchargement fonctionne correctement ?

Après avoir identifié vos candidats pour le préchargement, vous pouvez commencer à tester si votre lien rel=preload fait son travail.

Faites-le en utilisant le même graphique en cascade de requêtes dans DevTools. Si vous avez correctement choisi l'actif pour le préchargement et mis des attributs valides comme indiqué précédemment, vous devriez constater une amélioration des temps de chargement des pages.

Voici un exemple avant et après :

(Avant le préchargement) : le fichier de police « Pacifico-Bold.woff2 » est téléchargé uniquement après la feuille de style « main.css ». (Après avoir préchargé le fichier de police) : le téléchargement de la police se fait en parallèle avec la feuille de style.

Comment ne pas abuser du lien rel=preload

Compte tenu des résultats impressionnants que peuvent afficher quelques balises de préchargement appropriées, il est facile de se laisser emporter.

Mais en raison de la nature du préchargement, une série de problèmes de performances peuvent survenir.

• Interférence indésirable avec le comportement habituel du navigateur
• Utilisation excessive des ressources (c'est-à-dire utiliser la bande passante plus rapidement que d'habitude)
• Impact néfaste sur le chemin de rendu critique empêchant les navigateurs de faire ce qu'il faut

Erreur #1 : précharger trop de ressources

Il n'y a pas de nombre exact que vous devriez viser, mais soyez très attentif lorsque vous choisissez les ressources à précharger. N'oubliez pas que vous devez cibler les ressources découvertes tardivement qui sont essentielles pour les premières interactions avec la page Web.

Erreur #2 : précharger du contenu inutilisé

Le plus souvent, nous trouverions un lien rel=preload dans l'en-tête commun même si la ressource préchargée se trouve sur une seule page Web (par exemple, une page de destination).

Message d'avertissement pour le préchargement du contenu inutilisé

Il peut s'agir d'une simple erreur ou d'un codage insuffisant. Dans ce cas, diviser les groupes généraux en plus petits groupes ciblés pour des modèles spécifiques est une bien meilleure approche.

Erreur #3 : précharger des ressources non essentielles

Le préchargement de n'importe quelle ressource ne vous donnera pas l'augmentation de vitesse que vous désirez. Les actifs qui ne sont pas critiques pour le rendu et l'interactivité de l'expérience au-dessus de la ligne de flottaison sont mieux laissés avec une priorité inférieure.

Au lieu de cela, essayez de trouver les éléments que les navigateurs découvrent plus tard que vous ne le souhaiteriez.

Erreur #4 : précharger du contenu inexistant

Cela arrive rarement, mais quand c'est le cas, le résultat est une page 404. Ceci est interdit lors du préchargement et vous devez toujours vérifier si la ressource est en fait valide.

Quelles métriques Core Web Vital rel=preload améliore-t-il ?

À ce jour, nous avons vu la preuve indéniable du pouvoir d'optimisation de la vitesse du préchargement. Il augmente les temps de chargement, améliore les mesures de performances et la réactivité, et vous aide à faire une bonne première impression.

Voici les métriques qui s'améliorent le plus après un préchargement correct :

• Largest Contentful Paint (LCP) : les grandes ressources au-dessus de la ligne de flottaison (comme les images de héros et les gros morceaux de texte) sont d'excellents candidats LCP. Les livrer plus rapidement peut vous aider à améliorer les sites Web métriques Core Web Vitals qui ont le plus de mal.
• Cumulative Layout Shift (CLS) : le préchargement des polices Web montre une amélioration significative des changements de mise en page liés aux polices, tels que Flash of Unstyled Text (FOUT) et Flash of Invisible Text (FOIT).
• First Input Delay (FID) et Interaction to Next Paint (INP) : le préchargement du JavaScript qui alimente les interactions importantes vous aide à atteindre de meilleurs niveaux de réactivité en ligne avec l'intention de l'utilisateur.

Lien rel = avantages de préchargement dans les sites Web populaires

En 2017, l'équipe Chrome Data Saver (désormais supprimée) a appliqué le préchargement sur les scripts et les feuilles de style CSS et a vu en moyenne 12 % de temps pour les améliorations First Contentful Paint pour les pages concernées.

D'autres exemples de réussite d'amélioration des métriques de chargement avec le lien rel=preload incluent :

1. Shopify avec une amélioration de 50 % (1,2 seconde) du délai avant la prochaine peinture sur le bureau Chrome lors du préchargement des polices Web, ce qui a complètement supprimé Flash of Invisible Text ;
2. Flipkart a réduit une quantité substantielle de threads principaux inactifs en préchargeant leurs ensembles de clés ;
3. Notion avec une amélioration de 10 % des métriques de rendu de page en préchargeant 9 appels d'API de base ;
4. Le Financial Times a réduit d'une seconde le temps d'affichage de l'image du masthead en utilisant un en-tête de préchargement de lien.

Shopify avec préchargement (à gauche) et sans préchargement (à droite). Source : article d'Addy Osmani

Rejoignez le top 31% des sites Internet haut débit ! Voyez l'impact de NitroPack de première main.

Sommaire

Link rel=preload est une technique efficace de priorisation des ressources pour accélérer votre site et offrir une meilleure expérience utilisateur au premier contact.

Utilisez cette directive avec parcimonie et uniquement pour les ressources découvertes tardivement qui sont essentielles pour l'expérience au-dessus de la ligne de flottaison. Assurez-vous d'abord d'analyser comment les navigateurs téléchargent et analysent vos ressources à l'aide de Chrome DevTools et de Lighthouse.

La mise en œuvre correcte de rel="preload" améliorera la réactivité du site et les mesures de performance qui sont vitales pour le succès de votre activité en ligne.