Précharger l’audio et la vidéo pour une lecture rapide

Plus la lecture démarre vite, plus les visiteurs regardent votre vidéo ou écoutent votre contenu audio jusqu’au bout. Un démarrage lent, ponctué de mises en mémoire tampon, fait fuir l’audience. Précharger activement les ressources permet d’offrir une lecture quasi immédiate, au bon moment et selon le cas d’usage.

Pour le SEO, l’intérêt est double. D’une part, un média prêt à jouer améliore l’engagement et le temps passé sur la page. D’autre part, un préchargement maîtrisé, dans la lignée des autres indices de ressources, évite de gaspiller la bande passante au mauvais moment, ce qui protège le chargement initial et donc les Core Web Vitals. Il existe trois grandes méthodes, chacune avec ses forces et ses contraintes.

La première, l’attribut preload de la balise vidéo, est simple pour un fichier unique hébergé sur un serveur, mais le navigateur peut l’ignorer et la récupération ne démarre qu’après l’analyse du document. La deuxième, le préchargement par lien, proche de la technique pour précharger les ressources critiques, force une requête sans bloquer l’événement load et fonctionne avec les segments de fichiers, mais reste réservée aux petits fichiers. La troisième, la mise en mémoire tampon manuelle, offre un contrôle total au prix d’une gestion d’erreurs plus complexe.

L’attribut preload accepte plusieurs valeurs. La valeur metadata, devenue la valeur par défaut, ne récupère que les métadonnées (dimensions, durée, pistes) : idéale quand la vidéo n’est pas centrale. La valeur auto autorise le navigateur à mettre en cache assez de données pour une lecture sans interruption. La valeur none n’anticipe rien. Attention : ce n’est qu’un indice, et le navigateur peut le contourner, par exemple en forçant none lorsque l’Économiseur de données est actif, ou metadata sur une connexion mobile.

Le préchargement par lien est une récupération déclarative : il télécharge la ressource en priorité selon son type, sans bloquer l’événement load, puis la garde en réserve jusqu’à ce que le DOM, le JavaScript ou le CSS la réclame. C’est parfait pour préchauffer le cache de la session en cours. Réservez-le aux petits fichiers et veillez aux en-têtes CORS pour les ressources d’autres origines, sous peine de ne pas pouvoir alimenter l’élément vidéo. Notez que la compatibilité de cette approche a évolué selon les navigateurs : testez la prise en charge avant de vous y fier.

Avec la mise en mémoire tampon manuelle, vous contrôlez tout : il devient alors essentiel de précharger avec discernement. Tenez compte du niveau de batterie pour ne pas l’épuiser, respectez le mode Économiseur de données via l’en-tête Save-Data, et adaptez-vous au type de réseau, en gardant à l’esprit ce qui distingue une connexion lente pour éviter de consommer la data mobile sans prévenir. Pour anticiper plusieurs choix possibles, vous pouvez pré-mettre en cache les premiers segments de plusieurs vidéos avec l’API Cache, sans créer une multitude d’éléments masqués.