Preload

Le preload est une technique d’optimisation qui indique au navigateur quelles ressources doivent être chargées en priorité avant même qu’elles ne soient explicitement requises par la page. Cela permet de précharger des fichiers critiques, tels que des polices, des scripts, des styles ou des images, pour accélérer le rendu initial et améliorer la performance globale du site.

Principaux avantages du preload :

  • Amélioration des performances : Le navigateur sait quelles ressources sont essentielles pour l’affichage de la page et les charge en priorité, réduisant ainsi le temps de rendu.
  • Chargement asynchrone des ressources : Le preload permet de charger des ressources nécessaires plus tard dans la page, comme des images ou des polices, avant qu’elles ne soient visibles ou utilisées.
  • Optimisation des ressources critiques : Les fichiers de grande importance pour le rendu de la page ( CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. , JavaScript JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. ) peuvent être préchargés afin de garantir une expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. fluide.

Le preload est particulièrement utile pour les éléments critiques qui impactent directement le First Contentful Paint ( FCP Le First Contentful Paint (FCP) mesure le temps nécessaire pour que le premier élément visible, comme du texte ou une image, apparaisse à l'écran, reflétant ainsi la vitesse de chargement perçue par l'utilisateur. ) ou le Largest Contentful Paint Le Largest Contentful Paint (LCP) mesure le temps qu'il faut pour afficher le plus grand élément visible d'une page web, comme une image ou un bloc de texte, indiquant la rapidité du chargement perçu. (LCP), deux métriques clés pour la performance web. Utilisé judicieusement, il peut significativement améliorer la vitesse de chargement perçue par l’utilisateur, en particulier sur les sites complexes ou gourmands en ressources.

Articles associés

Priority Hints : un essai à transformer
Technique
27 octobre 2021

Priority Hints : un essai à transformer

Historiquement, les développeurs ont eu une certaine influence sur l’ordre de chargement des ressources, mais finalement assez limité. Les Priority Hints viennent s’ajouter au preloadet...
Lire la suite de Priority Hints : un essai à transformer
font d'icônes
Technique
21 juillet 2020

Optimiser les fonts d’icônes

La création de son site internet passe toujours par une phase d’UX puis d’UI pour aboutir à une maquette plus ou moins complète qui contiendra...
Lire la suite de Optimiser les fonts d’icônes