Preloading

Le preloading ou préchargement est un mécanisme qui permet aux ressources d'un navigateur de pouvoir être chargées avant qu'elles soient initialisées via l'interaction d'un utilisateur. Selon la méthode utilisée, il est possible de précharger des images, des fichiers CSS, des polices, des scripts, des vidéos, des frames ou des sites Web entiers. Le support du navigateur est également important puisqu'il existe ici certaines différences décisives. Le préchargement montre des similitudes avec des concepts comme le prefetching, le link prefetching et le prerendering.

Informations générales sur le sujet

En 2015, le preloading était considéré comme une ébauche du W3C, devenant plus tard une recommandation officielle. La spécification est certes accessible publiquement mais n'est pas recommandée à l'utilisation. Si on souhaite implémenter le preloading, on doit prendre en compte que cette spécification n'est pas encore achevée et qu'elle peut encore changer. Selon certaines circonstances, cela pourrait mener à des conflits ou à des incompatibilités. Il existe pourtant des alternatives connues pour précharger des ressources : CSS, JavaScript et la propriété subresource sur quelques navigateurs.

Fonctionnement

Les mécanismes de préchargement fonctionnent selon un principe simple : une consigne dans le texte source d'un site web enclenche le processus et entre en relation avec une ressource qui doit être préchargée. Normalement, l'utilisation doit assigner quand charger les contenus et les scripts et les intégrer dans le document. Dans le preloading, c'est le navigateur qui facilite le rendu d'un site web et qui fait attention aux indications de préchargement. Cette indication peut se rapporter à différents contenus, scripts ou à des fichiers délocalisés qui seront ultérieurement préchargés ou exécutés. Le but est d'augmenter la performance. Cela est d'une part possible avec le préchargement lui-même, et d'autre part grâce à l'optimisation des déroulements lors desquels le moment de récupération est contrôlé.

Préchargement avec rel="preload"

Le preloading peut réduire le temps de chargement des sites web et de leurs fonctions et joue ainsi un rôle dans l’amélioration de l'expérience utilisateur. Pendant qu'un utilisateur visite un site Web, certaines ressources sont chargées dans le cache du navigateur à l'aide des mark-ups déclaratifs. Des contenus peuvent être préchargés avec le mot-clé preload s'ils sont référencés avec un lien attribut. Le mot clé produit un lien de ressource externe (qui est le lien de preloading) qui déclare la ressource et spécifie ses qualités de récupération dans le HTML5. Les ressources doivent être déclarées correctement, afin que le client sache de quelles ressources il s'agit et comment il doit s'en servir.

Différents exemples d'un fichier CSS :

<!-- preload stylesheet resource via declarative markup -->

Alternativement, le fichier peut être appelé via le header HTTP :

Link: <https://example.com/other/styles.css>; rel=preload; as=style

JavaScript peut également être utilisé :

<!-- or, preload stylesheet resource via JavaScript -->

Le preloading est par exemple conseillé quand :

• Différents sites web ont besoin de différents fichiers ou feuilles de styles CSS.
• Les utilisateurs visitent vraisemblablement un site Web qui comporte de nombreuses images ou nécessite des fichiers plus volumineux.
• Des plateformes comme ASP.NET MVC ou AJAX sont utilisées et le navigateur doit recevoir une indication de préchargement pour précharger les ressources.
• Les requêtes de médias sont utilisées pour régler le contenu sur l'appareil de l'utilisateur.

Préchargement de vidéos avec HTML5

Avec le HTML5, on peut précharger des contenus vidéos. La balise

<video></video>

pourra être dotée de paramètres spéciaux. Des paramètres comme autoplay, width/height ou contrôles sont également possibles. Cependant, tous les navigateurs ne supportent pas la balise vidéo dans le HTML5.

<video></video</video>

Préchargement avec JavaScript

Le préchargement peut aussi être réalisé avec différents codes JavaScript, qui sont pour la plupart notés dans la sectiond'un site Web. Pour ce faire, un objet JavaScript est généré et un fichier image est chargé dans l'objet vide. L'objet peut être ensuite utilisé à d'autres emplacements sur le site sans avoir besoin de le recharger puisqu'il se trouve déjà dans le cache et qu'il a déjà été préchargé grâce à l'appel de la fonction. Si les utilisateurs n'ont pas activé JavaScript, cette variante ne fonctionne pas. Un exemple< ref > :

Préchargement avec CSS

Le préchargement avec le CSS se sert d'une astuce : l'image ou les images sont chargées en dehors du domaine visible de l'écran. Le préchargement de l'image peut de plus être initialisé grâce à un effet hover. Un exemple simple dans le CSS et le XHTML :

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Ces balises sont écrites dans le fichier CSS. Le code source suivant est noté à la fin d'un document. Les images peuvent désormais être intégrées aux documents XHTML.

1x1px 1x1px 1x1px

Signification pour la programmation

Le preloading réduit considérablement les temps de chargement d'un site Web dans lequel les ressources sont préchargées. La méthode qui entre en jeu pour cela dépend de plusieurs facteurs : le support d'un navigateur, le balisage utilisé et les fonctionnalités d'un site Web. Une implémentation correcte de chaque code source est cependant importante car même de petits conflits peuvent conduire à des perturbations de l'expérience utilisateur. Les programmateurs et les webdesigners doivent également posséder un certain degré d'expertise pour utiliser ces méthodes. Selon les circonstances, il peut être judicieux d'attendre une spécification valable du HTML5 ou de la tester prudemment.