Lorsque vous ouvrez une page Web, le navigateur demande le document HTML à un serveur, analyse son contenu, puis envoie des demandes distinctes pour les ressources référencées. En tant que développeur, vous connaissez déjà toutes les ressources dont votre page a besoin et vous connaissez les plus importantes. Vous pouvez utiliser ces connaissances pour demander à l'avance les ressources critiques et accélérer le processus de chargement. Cet article vous explique comment y parvenir avec <link rel="preload">.
Fonctionnement du préchargement
Le préchargement est particulièrement adapté aux ressources généralement découvertes tard par le navigateur.
<ph type="x-smartling-placeholder">
@font-face. Le navigateur ne charge le fichier de police qu'une fois le téléchargement et l'analyse de la feuille de style terminés.En préchargeant une ressource donnée, vous indiquez au navigateur que vous souhaitez la récupérer plus tôt que ce qu'il pourrait découvrir autrement, car vous êtes certain qu'elle est importante pour la page en cours.
<ph type="x-smartling-placeholder">
La chaîne de requête critique représente l'ordre des ressources qui sont hiérarchisées et récupérées par le navigateur. Lighthouse identifie les composants du troisième niveau de cette chaîne comme découverts tard. L'audit Précharger les demandes de clés vous permet d'identifier les ressources à précharger.
Vous pouvez précharger les ressources en ajoutant une balise <link> avec rel="preload" à l'en-tête de votre document HTML:
<link rel="preload" as="script" href="critical.js">
Le navigateur met en cache les ressources préchargées afin qu'elles soient disponibles immédiatement si nécessaire. (Il n'exécute pas les scripts et n'applique pas les feuilles de style.)
Les optimisations de ressources (preconnect et prefetch, par exemple) sont exécutées selon les besoins du navigateur. En revanche, preload est obligatoire pour le navigateur. Les navigateurs récents sont déjà assez performants pour hiérarchiser les ressources. Il est donc important d'utiliser preload avec parcimonie et de ne précharger que les ressources les plus critiques.
Les préchargements inutilisés déclenchent un avertissement dans la console dans Chrome, environ trois secondes après l'événement load.
Cas d'utilisation
Préchargement des ressources définies dans CSS
Les polices définies avec des règles @font-face ou les images de fond définies dans des fichiers CSS ne sont pas détectées tant que le navigateur n'a pas téléchargé et analysé ces fichiers CSS. Le préchargement de ces ressources garantit qu'elles sont extraites avant le téléchargement des fichiers CSS.
Préchargement des fichiers CSS
Si vous utilisez l'approche CSS essentielle, vous devez diviser votre CSS en deux parties. Le CSS essentiel pour afficher le contenu au-dessus de la ligne de flottaison est intégré dans la propriété <head> du document. Les CSS non critiques sont généralement chargés en différé avec JavaScript. Attendre l'exécution de JavaScript avant de charger un CSS non critique peut retarder l'affichage lorsque les utilisateurs font défiler la page. Il est donc conseillé d'utiliser <link rel="preload"> pour lancer le téléchargement plus tôt.
Préchargement des fichiers JavaScript
Étant donné que les navigateurs n'exécutent pas de fichiers préchargés, le préchargement est utile pour séparer l'extraction de l'exécution, ce qui peut améliorer des métriques telles que le délai avant interactivité. Le préchargement fonctionne mieux si vous divisez vos groupes JavaScript et ne préchargez que les fragments critiques.
Comment implémenter rel=preload
Le moyen le plus simple d'implémenter preload consiste à ajouter une balise <link> à la section <head> du document:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
L'attribut as permet au navigateur de définir la priorité de la ressource préchargée en fonction de son type, de définir les en-têtes appropriés et de déterminer si la ressource existe déjà dans le cache. Les valeurs acceptées pour cet attribut sont les suivantes: script, style, font, image et others.
Certains types de ressources, tels que les polices, sont chargés en mode anonyme. Pour celles-ci, vous devez définir l'attribut crossorigin avec preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Les éléments <link> acceptent également un attribut type, qui contient le type MIME de la ressource associée. Les navigateurs utilisent la valeur de l'attribut type pour s'assurer que les ressources ne sont préchargées que si leur type de fichier est compatible. Si un navigateur n'accepte pas le type de ressource spécifié, il ignorera <link rel="preload">.
Vous pouvez également précharger n'importe quel type de ressource via l'en-tête HTTP Link:
Link: </css/style.css>; rel="preload"; as="style"
Spécifier preload dans l'en-tête HTTP présente un avantage : le navigateur n'a pas besoin d'analyser le document pour le découvrir, ce qui peut apporter de légères améliorations dans certains cas.
Précharger les modules JavaScript avec webpack
Si vous utilisez un bundler de module qui crée les fichiers de compilation de votre application, vous devez vérifier s'il prend en charge l'injection de tags de préchargement. Avec webpack 4.6.0 ou version ultérieure, le préchargement est compatible avec l'utilisation de commentaires magiques dans import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Si vous utilisez une ancienne version de webpack, utilisez un plug-in tiers tel que preload-webpack-plugin.
Effets du préchargement sur les métriques Core Web Vitals
Le préchargement est une fonctionnalité puissante d'optimisation des performances qui influe sur la vitesse de chargement. Ces optimisations peuvent entraîner des modifications des Core Web Vitals de votre site. Il est donc important de les prendre en compte.
Largest Contentful Paint (LCP)
Le préchargement a un impact important sur Largest Contentful Paint (LCP) en ce qui concerne les polices et les images, car les images et les nœuds de texte peuvent être des candidatures LCP. Les images héros et les longues séries de texte rendus à l'aide de polices Web peuvent considérablement bénéficier d'un indice de préchargement bien positionné. Ils doivent être utilisés lorsqu'il est possible de fournir plus rapidement ces extraits de contenu importants à l'utilisateur.
Toutefois, vous devez faire attention au préchargement et à d'autres optimisations. Évitez tout particulièrement de précharger trop de ressources. Si trop de ressources sont hiérarchisées, en fait, aucune d’entre elles ne l’est. Les effets des indications de préchargement excessives sont particulièrement nuisibles pour les réseaux plus lents, sur lesquels les conflits de bande passante sont plus évidents.
Concentrez-vous plutôt sur quelques ressources de grande valeur qui bénéficieront d'un préchargement adapté. Lorsque vous préchargez des polices, assurez-vous de les diffuser au format WOFF 2.0 afin de réduire autant que possible le temps de chargement des ressources. Étant donné que WOFF 2.0 est compatible avec une excellente compatibilité des navigateurs, l'utilisation de formats plus anciens tels que WOFF 1.0 ou TrueType (TTF) retardera votre LCP si le LCP candidat est un nœud texte.
Lorsqu'il s'agit de LCP et de JavaScript, assurez-vous d'envoyer le balisage complet à partir du serveur afin que l'outil d'analyse de préchargement du navigateur fonctionne correctement. Si vous proposez une expérience qui s'appuie entièrement sur JavaScript pour afficher le balisage et ne peut pas envoyer de code HTML affiché sur le serveur, il peut être intéressant de prévoir une étape dans laquelle l'outil d'analyse du préchargement du navigateur ne peut pas précharger des ressources qui ne seraient autrement visibles qu'une fois le chargement et l'exécution du code JavaScript terminés.
Cumulative Layout Shift (CLS)
Le CLS (Cumulative Layout Shift) est une métrique particulièrement importante en ce qui concerne les polices Web. Le CLS a une interaction significative avec les polices Web qui utilisent la propriété CSS font-display pour gérer le chargement des polices. Pour minimiser les décalages de mise en page liés à la police Web, envisagez les stratégies suivantes:
- Préchargez les polices en utilisant la valeur
blockpar défaut pourfont-display. Il s'agit d'un équilibre délicat. Le blocage de l'affichage des polices sans création de remplacement peut être considéré comme un problème d'expérience utilisateur. D'une part, le chargement de polices avecfont-display: block;élimine les décalages de mise en page liés aux polices Web. D'un autre côté, vous souhaitez toujours que ces polices Web soient chargées dès que possible si elles sont cruciales pour l'expérience utilisateur. Combiner un préchargement avecfont-display: block;peut constituer un compromis acceptable. - Préchargez les polices lorsque vous utilisez la valeur
fallbackpourfont-display.fallbackest un compromis entreswapetblock, dans la mesure où il présente une période de blocage extrêmement courte. - Utilisez la valeur
optionalpourfont-displaysans préchargement. Si une police Web n'est pas essentielle à l'expérience utilisateur, mais qu'elle est tout de même utilisée pour afficher une grande quantité de texte sur la page, envisagez d'utiliser la valeuroptional. Dans des conditions défavorables,optionalaffichera le texte de la page dans une police de remplacement pendant le chargement de la police en arrière-plan pour la prochaine navigation. Dans ces conditions, le résultat net est amélioré, car les polices système s'affichent immédiatement, tandis que les chargements de page suivants chargent la police immédiatement, sans décalage de mise en page.
Le CLS est une métrique difficile à optimiser pour les polices Web. Comme toujours, effectuez des tests dans l'atelier, mais faites confiance à vos données réelles pour déterminer si vos stratégies de chargement de polices améliorent le CLS ou l'aggravent.
Interaction to Next Paint (INP, Interaction to Next Paint)
Interaction to Next Paint est une métrique qui évalue la réactivité aux entrées utilisateur. La majeure partie de l'interactivité sur le Web étant déterminée par JavaScript, le préchargement de JavaScript, qui génère des interactions importantes, peut aider à réduire l'INP d'une page. Toutefois, sachez que le préchargement d'une trop grande quantité de JavaScript au démarrage peut avoir des conséquences négatives inattendues si un trop grand nombre de ressources est en concurrence pour la bande passante.
Vous devez également faire attention à la façon dont vous procédez à la scission du code. La division du code constitue une excellente optimisation pour réduire la quantité de code JavaScript chargé au démarrage. Toutefois, les interactions peuvent être retardées si elles s'appuient sur JavaScript chargé au début de l'interaction. Pour remédier à ce problème, vous devez examiner l'intent de l'utilisateur et injecter un préchargement pour le ou les fragments de JavaScript nécessaires avant que l'interaction n'ait lieu. Il peut s'agir, par exemple, de préchargement du code JavaScript nécessaire pour valider le contenu d'un formulaire lorsque l'un des champs du formulaire est sélectionné.
Conclusion
Pour améliorer la vitesse des pages, préchargez les ressources importantes détectées en retard par le navigateur. Tout précharger serait contre-productif. Par conséquent, utilisez preload avec parcimonie et mesurez l'impact dans le monde réel.