Preload : quelles ressources précharger en web performance ?
Lorsqu'une page web est chargée, le navigateur télécharge un fichier HTML depuis un serveur, traite son contenu, et soumet différentes requêtes aux ressources figurant dans le code. En tant qu'utilisateur, vous savez quelles ressources sont importantes. De son côté, le navigateur a besoin d’aide pour identifier les ressources prioritaires afin d’afficher la page le plus rapidement et efficacement possible à l’utilisateur. Pour ce faire, vous pouvez le guider à l’aide de <link rel="preload">.
Comment fonctionne le préchargement ?
Le préchargement est une méchanique moderne utile pour des ressources habituellement découvertes tard par le navigateur.
En préchargeant intelligement certaines ressources, vous indiquez au navigateur que vous souhaitez qu'il charges ces fichiers bien avant qu'il les découvrirait de manière usuelle parce que vous êtes certains qu'ils seront nécessaires au chargement de la page actuelle.
Ce genre de dépendances entre plusieurs fichiers s'appelle une chaine de requêtes critiques : puisqu'un fichier en appelle un autre, et le navigateur n'a aucun moyen de déterminer quels fichiers charger à l’avance sans avoir parsé le précédent.
Pour palier à ce genre de problèmes, il est souvent utile de précharger une ressource à l’aide d’une balise preload :
<link rel="preload" as="script" href="script.js">
Cette balise doit être adaptée en fonction du type de ressources (via l’attribut as) et avec l’URL de la ressource (via l’attribut href). Attention, la valorisation du href est sensible : si un slash ou un querystring diffère, le fichier sera chargé deux fois.
Si l’attribut as n'est pas renseigné, la requête sera considérée comme un appel XHR et sera donc effectuée 2 fois, annulant l’effet du preloading.
Lors de la découverte de cette directive preload, le navigateur va télécharger le fichier dans le cache de l’utilisateur afin qu'il soit disponible quand nécessiare. Les fichiers javascripts ne seront pas exécutés, et le CSS ne sera pas appliqué tant que le fichier n'est pas appelé dans la page.
Si un fichier est défini en preload alors qu'il n'est pas appelé dans les 3 secondes suivant l’évènement load, Chrome lèvera un warning dans la console de développement.
Précharger une police d’écriture : le cas spécifique
Vous tentez de précharger une fonte comme dit précédemment ? Ce cas est un peu particulier. Pour des raisons techniques complexes (confer), les polices d’écriture sont chargées en crossorigin.
Ainsi, pour précharger correctement un fichier woff2 (ou autre format de fonte), il faut ajouter l’attribut crossorigin à votre balise HTML comme suit :
<link rel="preload" href="https://pauld.fr/poppins-v20-latin-700.woff2" as="font" type="font/woff2" crossorigin>
L’effet du préchargement sur les core web vitals
L’utilisation du preload est un atout puissant en optimisation de web performance, le préchargement permet sensiblement d’accélerer le site web. De telles optimisations peuvent amener à des changements flagrants dans les Core Web Vitals. C’est pourquoi il est très intéressant de tester et d’apprendre le fonctionnement du preload.
Le Largest Contentful Paint (LCP)
Le préchargement a un impact important sur le Largest Contentful Paint pour les polices d’écrites et les images, étant donné que les fontes comme les images peuvent être des candidats au LCP. Des images en section hero ou des blocs des textes importants qui dépendent de fichiers de fonte aditionnels peuvent bénéficier de manière importantes à un préchargement réfléchi. L’opportunité de gagner des centaines de millisecondes sur le temps de chargement de la page avec une simple ligne de code est immanquable !
À contratio, il faut faire attention à l’utilisation abusive de balises preload. Si vous préchargez un trop grand nombre de ressources, il en revient au même que de n'en précharger aucune. Un préchargement de trop nombreuses ressources risque de conduire à des problèmes de concurrence de bande passante entre les ressources.
Pour réellement améliorer la web performance d’une page, je conseille de ne précharger que les formats modernes des ressources (WOFF2 pour les polices d’écrite, WebP voire AVIF pour les images) en vérifiant la couverture du format via un site comme .
Le Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift (CLS) est un core web vitals important qui peut être négativement impacté par les polices d’écritures notamment lors de l’utilisation de la propriété CSS font-display pour personnaliser le mode de chargement de la fonte.
Il est important d’expérimenter les différentes valeurs possibles pour le chargement de vos webfonts. Dans le cas où vous préchargez votre fichier de fonte, je vous conseillerais d’utiliser la valeur block pour supprimer tout Layout Shift.
Si vous êtes plus techniques, il est possible d’utiliser des fontes de fallback, calculées à partir de ratios pour permettre d’afficher le texte avec une police d’écriture système, installée sur les ordinateurs de tous vos utilisateurs en attendant le chargement de vos polices personnalisées.
Préloader : une solution obligatoire en webperf en 2024
Pour améliorer la rapidité du site, il est primordial de précharger les ressources importantes de vos pages découvertes tard par le serveur. Le préchargement de l’ensemble de ressources d’une page serait contreproductif, utilisez donc le preloading avec parcimonie et mesurez l’impact sur le terrain.