Lorsque vous ouvrez une page Web, le navigateur demande le document HTML à un serveur, analyse son contenu et envoie des requêtes distinctes pour toutes les ressources référencées. En tant que développeur, vous connaissez déjà toutes les ressources dont votre page a besoin et quelles sont les plus importantes. Vous pouvez utiliser ces informations pour demander à l'avance les ressources critiques et accélérer le processus de chargement. Cet article explique comment y parvenir avec <link rel="preload">.
Fonctionnement du préchargement
Le préchargement convient particulièrement aux ressources généralement découvertes tard par le navigateur.
@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 certaine ressource, vous indiquez au navigateur que vous souhaitez l'extraire plus tôt qu'il ne la découvrirait autrement, car vous êtes certain qu'elle est importante pour la page actuelle.
La chaîne de requêtes critique représente l'ordre des ressources qui sont prioritaires et extraites par le navigateur. Lighthouse identifie les actifs du troisième niveau comme ayant été découverts tardivement. Vous pouvez utiliser l'audit Précharger les requêtes de clés pour identifier les ressources à précharger.
Vous pouvez précharger des ressources en ajoutant une balise <link> avec rel="preload" dans 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 en cas de besoin. Elle 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. Le preload, en revanche, est obligatoire pour le navigateur. Les navigateurs modernes sont déjà assez efficaces pour hiérarchiser les ressources. C'est pourquoi il est important d'utiliser preload avec parcimonie et de ne précharger que les ressources les plus importantes.
Les préchargements inutilisés déclenchent un avertissement de la console dans Chrome, environ trois secondes après l'événement load.
Cas d'utilisation
Préchargement des ressources définies en 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 récupérées avant le téléchargement des fichiers CSS.
Préchargement des fichiers CSS
Si vous utilisez l'approche CSS critique, vous devez diviser votre code CSS en deux parties. Le CSS essentiel pour afficher le contenu au-dessus de la ligne de flottaison est intégré dans l'élément <head> du document. Les CSS non essentiels sont généralement chargés de façon différée avec JavaScript. Attendre l'exécution de JavaScript avant de charger du code CSS non critique peut retarder l'affichage lorsque les utilisateurs font défiler la page. Il est donc recommandé 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é (Time to Interactive). Le préchargement fonctionne mieux si vous divisez vos groupes JavaScript et ne préchargez que les fragments critiques.
Implémenter rel=preload
Le moyen le plus simple d'implémenter preload consiste à ajouter une balise <link> au <head> du document:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
Fournir 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 autres.
Certains types de ressources, comme les polices, sont chargés en mode anonyme. Dans ce cas, 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'est pas compatible avec le type de ressource spécifié, il ignore <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 l'avantage de ne pas avoir besoin d'analyser le document pour que le navigateur le découvre, ce qui peut apporter de légères améliorations dans certains cas.
Préchargement des modules JavaScript avec webpack
Si vous utilisez un bundler de module qui crée des fichiers de compilation de votre application, vous devez vérifier s'il prend en charge l'injection de balises de préchargement. À partir de la version 4.6.0 du webpack, le préchargement est pris en charge via l'utilisation de commentaires magiques dans import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Si vous utilisez une ancienne version de webpack, optez pour 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 puissante optimisation des performances qui influe sur la vitesse de chargement. De telles optimisations peuvent entraîner des modifications des Core Web Vitals de votre site. Il est important de les prendre en compte.
Largest Contentful Paint (LCP)
Le préchargement a un effet puissant sur le 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 candidats LCP. Les images héros et les textes volumineux affichés à l'aide de polices Web peuvent bénéficier d'une indication de préchargement bien positionnée. Utilisez-les s'il est possible de fournir ces éléments de contenu importants à l'utilisateur plus rapidement.
Vous devez toutefois faire attention au préchargement et aux autres optimisations. Évitez en particulier de précharger trop de ressources. Si un trop grand nombre de ressources est prioritaire, aucune d'entre elles ne l'est dans les faits. Les effets d'un nombre excessif d'indicateurs de préchargement seront particulièrement préjudiciables aux réseaux plus lents, où les conflits de bande passante sont plus évidents.
Concentrez-vous plutôt sur les ressources à forte valeur ajoutée dont vous savez qu'elles bénéficieront d'un préchargement au bon endroit. Lorsque vous préchargez des polices, assurez-vous qu'elles sont diffusées au format WOFF 2.0 afin de réduire autant que possible le temps de chargement des ressources. WOFF 2.0 étant compatible avec d'excellentes navigateurs, l'utilisation d'anciens formats tels que WOFF 1.0 ou TrueType (TTF) retardera votre LCP si le LCP candidat est un nœud de texte.
En ce qui concerne le LCP et JavaScript, assurez-vous d'envoyer le balisage complet du serveur afin que l'outil de préchargement du navigateur fonctionne correctement. Si vous proposez une expérience qui repose entièrement sur JavaScript pour afficher le balisage et qu'elle ne peut pas envoyer le code HTML affiché par le serveur, il peut être judicieux d'intervenir là où le scanner de préchargement du navigateur ne peut pas précharger les 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 Cumulative Layout Shift (CLS) est une métrique particulièrement importante en ce qui concerne les polices Web. Le CLS interagit de manière 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 aux polices Web, envisagez les stratégies suivantes:
- Préchargez les polices tout en utilisant la valeur
blockpar défaut pourfont-display. Il s'agit d'un équilibre délicat. Bloquer 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 des polices avecfont-display: block;élimine les décalages de mise en page liés aux polices Web. En revanche, vous devez toujours que ces polices Web soient chargées dès que possible si elles sont essentielles à l'expérience utilisateur. La combinaison d'un préchargement avecfont-display: block;peut être un compromis acceptable. - Préchargez les polices lors de l'utilisation de la valeur
fallbackpourfont-display.fallbackest un compromis entreswapetblock, dans la mesure où sa période de blocage est 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 quantité importante de texte sur la page, envisagez d'utiliser la valeuroptional. Dans des conditions défavorables,optionalaffiche le texte de la page dans une police de remplacement pendant qu'il charge la police en arrière-plan pour la prochaine navigation. Dans ces conditions, le résultat net est d'améliorer le CLS, car les polices système s'affichent immédiatement, tandis que les chargements de pages suivants chargent la police immédiatement, sans décalage de mise en page.
Le CLS est une métrique difficile à optimiser en ce qui concerne les polices Web. Comme toujours, effectuez des tests dans l'atelier, mais faites confiance à vos données de terrain pour déterminer si vos stratégies de chargement des polices améliorent le CLS ou les aggravent.
Interaction to Next Paint (INP)
Interaction to Next Paint est une métrique qui évalue la réactivité aux entrées utilisateur. La part du lion de l'interactivité sur le Web étant générée par JavaScript, le préchargement de JavaScript qui génère des interactions importantes peut permettre de réduire l'INP d'une page. Toutefois, sachez qu'un préchargement d'une quantité excessive de code JavaScript au démarrage peut avoir des conséquences négatives inattendues si un trop grand nombre de ressources sont en concurrence pour la bande passante.
Vous devez également faire attention à la façon dont vous divisez le code. Le fractionnement de code est une excellente optimisation pour réduire la quantité de code JavaScript chargé au démarrage. Toutefois, les interactions peuvent être retardées si elles reposent sur le chargement de JavaScript au début. Pour compenser cela, vous devez examiner l'intention de l'utilisateur et injecter un préchargement pour le ou les fragments de JavaScript nécessaires avant que l'interaction n'ait lieu. Par exemple, il peut s'agir du préchargement du code JavaScript requis pour valider le contenu d'un formulaire lorsque l'un des champs du formulaire est sélectionné.
Conclusion
Pour améliorer la vitesse de chargement des pages, préchargez les ressources importantes que le navigateur détecte tardivement. Tout précharger serait contre-productif. Utilisez donc preload avec parcimonie et mesurez l'impact dans le monde réel.