Les vidéos sont efficaces pour générer des ventes et du trafic, et vous devriez les utiliser dans le développement de vos sites Web. Le contenu textuel est important, mais les éléments visuels, comme les vidéos, donnent vie à votre site Web. En 2019, 87 % des entreprises ont utilisé la vidéo comme outil de marketing. Et selon cette étude, 83 % des marketeurs ont confirmé que la vidéo leur apporte un bon ROI.

Mais ces avantages s’accompagnent de défis… L’ajout de vidéos sur votre site web peut parfois être une arme à double tranchant. Les internautes adorent les vidéos haute résolution, mais si votre site web n’est pas optimisé pour les gérer, ce type de contenu peut entraîner des problèmes de performances. Des performances amoindries signifient un plus fort taux de rebond, et une chute du taux de conversion, or c’est l’inverse que nous voulons.

Nous allons donc voir comment optimiser votre site pour qu’il accueille des vidéos, et bien sûr comment optimiser vos vidéos elles-mêmes.

Optimiser vos vidéos pour le web

1. Compresser vos vidéos

Ça alors, c’est pas idiot ! Merci de m’avoir lu, merci bonsoir ! Non, je plaisante. Mais on a évoqué le sujet dans cet article. Je vous le conseille donc fortement.

2. Supprimer l’audio des vidéos qui n’en ont pas

C’est bien de compresser vos vidéos, mais si vous avez une vidéo dont le son est coupé, vous pouvez supprimer les données audio du fichier pour alléger la taille de votre vidéo.

Si vous avez réalisé la vidéo vous-même, il est possible d’omettre l’audio lors de l’exportation du fichier. Sinon, vous devrez utiliser un logiciel d’édition.

3. Utilisez le HTML 5

Au début, les vidéos étaient ajoutées à un site web en intégrant des lecteurs vidéo comme Windows Media Player ou RealPlayer. Ces derniers nécessitaient des plugins de navigateur et des codecs personnalisés. Ensuite on utilisait Quicktime (ou Flash), mais cela ralentissait les navigateurs et nous mettait même en danger niveau sécurité.

Depuis que nous avons le HTML5 il n’est plus nécessaire de compter sur des plugins tiers. Non seulement vous pouvez encoder des vidéos très facilement, mais la qualité du média est enrichie.

Un convertisseur vidéo HTML5 ou un encodeur vidéo HTML5 permet aux développeurs de télécharger une vidéo dans le format retenu.

4. Streamez depuis votre serveur

À l’âge de pierre de l’internet, les fichiers vidéo devaient être entièrement téléchargés sur l’appareil de l’utilisateur avant de pouvoir être visionnés.

Aujourd’hui, le streaming permet de diffuser des vidéos petit à petit, qui sont prêts à être lus dans le navigateur de l’utilisateur. L’option la plus facile consiste à intégrer un lecteur YouTube ou Vimeo. Ils fonctionnent bien, mais si vous souhaitez un meilleur contrôle du lecteur vidéo de votre site web, et comme on l’a vu plus haut, il est préférable d’héberger soit même la vidéo et de la servir de la manière souhaitée à vos visiteurs.

Mieux, utilisez un CDN : c’est un réseau de serveurs qui stockent des copies en cache de certains fichiers de votre site. En plus d’améliorer la redondance, les CDN assurent une diffusion plus rapide du contenu, car celui-ci est servi à partir du serveur le plus proche de la requête. L’utilisation d’un CDN peut améliorer considérablement les performances globales de votre site web.

Optimiser les pages sur lesquelles se trouvent vos vidéos

L’optimisation de vos vidéos est déjà un bon début. Mais pour garantir une expérience utilisateur fluide, votre site doit être optimisé pour prendre en charge des vidéos de haute qualité.

5. Précisez la taille de la vidéo

Dans votre HTML (ou CSS), définissez la largeur et la hauteur des vidéos afin que le navigateur puisse allouer la bande passante nécessaire sans travail supplémentaire.

6. Reportez le chargement des vidéos

Si vous avez une vidéo qui se lance automatiquement lorsqu’on arrive sur une page, reportez son chargement jusqu’à ce que le chargement de la page soit terminé. Vous obtiendrez une meilleure expérience utilisateur.

7. Pensez au « mobile first »

Vous le savez, les sites web qui ne sont pas optimisés pour la téléphonie mobile sont fortement désavantagés. Suivez les principes d’une conception web responsive pour rendre votre site web adaptable à différentes tailles d’écran et résolutions d’affichage. Votre site web doit également être capable de détecter l’orientation de l’appareil afin d’afficher correctement une vidéo.

Lors de l’affichage de vidéos sur mobile, il faut redimensionner sa largeur et tout en conservant son ratio hauteur/largeur. Mais vous devez également vous assurer que le spectateur puisse voir la vidéo en plein écran.

Les appareils mobiles peuvent ne pas être capables de gérer des arrière-plans vidéo. Vous pouvez opter pour un changement d’arrière-plan sur les mobiles.

Conclusion

Inclure des vidéos sur votre site ne devrait pas influencer ses performances. Si c’est le cas, appliquez les conseils de cet article ou trouvez un freelance sur Codeur.com pour améliorer les performances de votre site.