Optimisation vidéo: 8 Conseils pour des temps de chargement plus rapides

Les internautes adorent les vidéos de haute résolution. Mais si votre site Web n’est pas optimisé pour les gérer, ce contenu peut entraîner des problèmes de performances. Ce guide d’optimisation vidéo explique comment vous assurez que votre contenu multimédia augmente les conversions au lieu de chasser les utilisateurs.

Pourquoi l’optimisation vidéo est-elle importante?

optimisation-vidéo-intro

Offrir du contenu multimédia est un excellent moyen de maintenir l’engagement des utilisateurs. C’est pourquoi de plus en plus de développeurs ajoutent des vidéos à leurs sites Web. La taille de la page Web moyenne est passée d’environ 1 Mo à plus de 3 Mo grâce en grande partie à une augmentation du contenu vidéo.

La taille de la vidéo Web moyenne est également passée de 204 Ko à 729 Ko au cours des deux dernières années seulement. Si vous avez beaucoup de contenu vidéo sur votre site Web, vous pouvez améliorer considérablement les performances en suivant certaines des meilleures pratiques d’optimisation vidéo.

Quels formats vidéo conviennent le mieux au Web?

Grâce à leur capacité à emballer des vidéos de haute qualité dans de petites tailles de fichiers, MP4 et WebM sont devenus les formats standard pour des plateformes comme YouTube et Vimeo. Les vidéos MP4 sont prises en charge par tous les navigateurs tandis que WebM n’est actuellement entièrement pris en charge que par Chrome et Firefox.

Les fichiers WebM ont également tendance à être plus légers que les fichiers MP4, mais les vidéos MP4 sont légèrement meilleures sur les appareils mobiles.

Introduction à l’optimisation vidéo pour les sites Web

La livraison de contenu vidéo de haute qualité aux utilisateurs est un processus en deux étapes. Vous devez optimiser:

  • Le fichier vidéo afin qu’il ait un effet minimal sur la vitesse de la page.
  • La page Web pour intégrer et afficher correctement le contenu vidéo.
  • Les fichiers vidéo pour les pages Web

Pour de meilleurs résultats, suivez ces conseils avant d’ajouter des vidéos à votre site Web:

1. Utilisez des outils de compression de données

Blazemp-optimisation-vidéo

Des outils de compression de données comme Blazemp et HandBrake réduisent la taille des fichiers vidéo sans dégrader la qualité de l’image. Les fichiers multimédias plus petits se chargent plus rapidement, vous pouvez donc économiser beaucoup de temps aux utilisateurs en compressant toutes vos vidéos.

Essayez de ne pas sacrifier la qualité vidéo lors de vos efforts de compression. Les vidéos de haute qualité rendent votre site Web plus professionnel, mais les vidéos qui ressemblent à des gifs animés peuvent laisser une mauvaise impression aux utilisateurs.

2. Conversion aux formats pris en charge HTML5

Un avantage majeur de HTML5 est que les développeurs peuvent désormais fournir du contenu vidéo sans l’aide d’un plugin. Utilisez un convertisseur vidéo en ligne pour convertir vos fichiers vidéo aux formats HTML5 tels que MP4 et WebM.

3. Supprimer l’audio des vidéos muettes

Si vous avez une vidéo de héros avec le son coupé, vous pouvez réellement supprimer les données audio du fichier vidéo pour économiser sur la taille de la vidéo. Si vous avez réalisé la vidéo vous-même, il peut être possible d’omettre l’audio lors de l’exportation du fichier. Sinon, vous pouvez utiliser un simple outil d’édition vidéo ou FFmpeg pour supprimer l’audio.

4. Diffusez directement depuis votre serveur

À l’ère sombre d’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, la technologie de streaming permet de diffuser des vidéos en petits morceaux prêts à être lus dans le navigateur de l’utilisateur.

5. Utilisez un réseau de diffusion de contenu CDN

Un CDN est un réseau de serveurs qui stockent des copies en cache des actifs statiques de votre site. En plus d’améliorer la redondance, les CDN assurent une livraison de contenu plus rapide. En effet le contenu se sert à partir du serveur de périphérie le plus proche. Ceci est essentiel pour les fichiers volumineux tels que les vidéos. De cette façon, les utilisateurs n’ont pas à attendre indéfiniment que vos vidéos soient téléchargées et mises en mémoire tampon.

L’utilisation d’un CDN peut considérablement améliorer les performances globales de votre site Web.

Optimisation de page Web pour le contenu vidéo

optimisation page web

La sélection du bon format vidéo et l’optimisation de la manière dont les données sont transmises sont un bon début. Cependant, pour garantir une expérience utilisateur fluide, votre site Web doit également être optimisé pour prendre en charge des vidéos de haute qualité.

Voici quelques conseils:

1. Spécifiez la taille de la vidéo

Dans votre code HTML ou CSS, assurez-vous de définir la largeur et la hauteur des vidéos afin que le navigateur puisse allouer la bande passante nécessaire sans travail supplémentaire.

2. Différez le chargement des vidéos jusqu’à ce que le chargement de la page soit terminé

Si vous avez une vidéo qui est lue automatiquement lorsqu’un utilisateur arrive sur la page, différez-la du chargement jusqu’à la fin du chargement de la page pour obtenir une expérience utilisateur plus fluide.

3. Prioriser les utilisateurs mobiles

mobile friendly

Chaque jour, de plus en plus de personnes accèdent au Web à partir de tablettes et de smartphones. Les sites Web non optimisés pour les mobiles sont donc fortement désavantagés. Suivez les principes de la conception Web réactive pour rendre votre site Web adaptable à différentes tailles d’écran et résolutions d’affichage. Votre site Web doit également être en mesure de détecter l’orientation de l’appareil afin d’afficher correctement la vidéo.

Même si vous êtes un développeur frontend expert, la conception de pages qui ont fière allure sur toutes les tailles d’écran peut être difficile. Vous pouvez créer une version distincte de votre site Web spécifiquement pour les appareils mobiles, mais cela doublerait vos tâches de maintenance. Heureusement, il existe généralement des moyens plus faciles d’accommoder les utilisateurs mobiles.

Par exemple, supposons que vous ayez une vidéo de héros sur votre page d’accueil, mais elle n’est pas aussi belle sur les appareils mobiles. Vous pouvez empêcher le téléchargement de votre vidéo de héros sur des écrans étroits en ajoutant ce code à votre CSS:

@media screen and (max-width: 650px) {

    # hero-video {

        affichage: aucun;

    }

}

Optimisation vidéo pour le référencement

Des plateformes comme YouTube sont d’excellents outils pour gagner en visibilité, mais si vous souhaitez augmenter le classement de votre site Web sur Google, vous devez héberger votre contenu vidéo sur votre propre domaine. Lorsque vous téléchargez des vidéos sur YouTube avec un lien vers votre site Web dans la description, les moteurs de recherche donnent la préférence à YouTube. Par conséquent, il est possible que quelqu’un recherche le nom de votre entreprise sur Google et se retrouve sur YouTube plutôt que sur votre site Web, ce qui est un scénario que vous souhaitez éviter.

Créez des métadonnées pour faciliter l’indexation de vos vidéos.

Les titres vidéo doivent être descriptifs plutôt que génériques. Gardez les titres courts, mais emballez les détails de votre description avec des mots clés.

La sélection des meilleurs mots clés peut nécessiter des recherches, mais toute information que vous fournissez améliorera vos chances d’apparaître dans les résultats de recherche.

N’oubliez pas de choisir une miniature appropriée.

Effectuez ces étapes après la compression des données afin que vos belles métadonnées ne soient pas effacées pendant le processus.

Bien sûr, le contenu vidéo auto-hébergé nécessite plus de ressources que l’intégration d’une vidéo téléchargée ailleurs.

Si vous avez des fichiers vidéo volumineux et que vous ne voulez pas, ou ne pouvez pas, les héberger sur votre serveur d’origine, utilisez-les pour les télécharger sur un cluster de stockage distinct tel qu’une zone de push KeyCDN ou un compartiment S3 d’Amazon.

Votre site Web a-t-il vraiment besoin de vidéos?

site-web

Les avantages d’avoir du contenu vidéo sur votre site Web l’emportent généralement sur le coût ajouté au chargement de votre page. Cela dit, si votre contenu vidéo n’ajoute pas de valeur à l’expérience utilisateur, il gaspille simplement beaucoup de ressources.

Dans de tels cas, l’augmentation des performances que vous obtiendriez en omettant complètement des vidéos pourrait être plus bénéfique pour vos résultats. Utilisez le contenu multimédia de manière stratégique afin de ne pas submerger de nouveaux visiteurs. Réévaluez régulièrement l’ensemble de votre contenu multimédia pour vous assurer que chaque élément de votre site Web remplit une fonction.

Sommaire

Tant que vous optimisez vos fichiers multimédias et la conception de votre page, l’ajout de vidéos à votre site Web devrait avoir un impact minimal sur les performances. Chaque fois que vous apportez des modifications ou ajoutez du nouveau contenu à votre site Web, notez l’effet qu’il a sur vos conversions. Essayez de placer différentes vidéos à différents endroits. L’optimisation vidéo est relativement facile. Certes faire des vidéos qui maintiennent les intérêts des utilisateurs est une tâche beaucoup plus difficile.

(19)