Comment augmenter les performances des médias sur un budget

Cet article a été aimablement soutenu par nos chers amis de Cloudinary qui aident la communauté à créer, gérer et diffuser rapidement et facilement leurs expériences numériques sur n'importe quel navigateur, appareil et bande passante. Merci!

L'érudit américain Mason Cooley a habilement décrit une dure réalité de la vie : "Un budget enlève le plaisir de l'argent." Incontestablement, les médias animent les sites Web, ajoutant de l'attrait, de l'excitation et de l'intrigue, sans parler des incitations à rester sur une page et à la revisiter fréquemment. Cependant, tout comme les dépenses incontrôlables sont de mauvais augure à long terme, les médias numériques non budgétisés déciment les performances du site.

Un exemple concret : un ralentissement du chargement des pages d'une simple seconde pourrait coûter à Amazon 1,6 milliard de dollars de ventes annuelles. Parmi les nombreux facteurs qui affectent la vitesse de chargement des pages, le support est un facteur important. D'où l'impérieuse nécessité de prioriser l'optimisation des médias. En dépensant votre argent pour cette tâche et en budgétisant vos médias, vous réaliserez des économies et des avantages importants à long terme.

Budgets de performances

"Un budget de performance est '... exactement ce que cela ressemble : vous définissez un 'budget' sur votre page et ne laissez pas la page le dépasser. Cela peut être un temps de chargement spécifique, mais c'est généralement une conversation plus facile à avoir lorsque vous décomposez le budget en nombre de requêtes ou en taille de la page.

—Tim Kadlec

Un budget de performances en tant que mécanisme de planification d'une expérience Web et de prévention de la dégradation des performances peut comprendre les critères suivants :

• Poids total de la page,
• Nombre total de requêtes HTTP,
• Temps de chargement de la page sur un réseau mobile particulier,
• Premier délai d'entrée (FID)
• Première peinture de contenu (FCP),
• Décalage de mise en page cumulé (CLS),
• La plus grande peinture de contenu (LCP).

Vitaly Friedman a une excellente liste de contrôle qui décrit les composants qui affectent les performances Web ainsi que des conseils utiles sur les techniques d'optimisation. Se familiariser avec ces composants vous permettra de définir des objectifs de performance .

Avec des objectifs de performance clairement documentés, différentes équipes peuvent avoir des conversations significatives sur la diffusion optimale du contenu. Par exemple, un budget peut les aider à décider si une page doit contenir cinq images - ou trois images et une vidéo - tout en restant dans les limites prévues.

Cependant, avoir un budget de performance comme mesure autonome peut ne pas être d'une grande aide. C'est pourquoi nous devons corréler la performance aux objectifs organisationnels.

Performance de l'entreprise

Si vous dépensez beaucoup d'octets sur des vidéos et des images non optimales, l'expérience multimédia enrichie ne sera plus aussi riche. Une organisation existe pour obtenir des résultats , comme inciter les gens à acheter, les éduquer, les motiver ou rechercher de l'aide et des bénévoles. Toute personne ayant une présence sur le Web apprécierait la relation entre l'effet de diverses mesures de performance sur les mesures commerciales.

WPOStats met littéralement en évidence des centaines d' études de cas montrant comment une baisse des performances - de quelques centaines de millisecondes à quelques secondes - pourrait entraîner une baisse massive des ventes annuelles. L'établissement de ce type de relation aide grandement à suivre l'effet de la performance sur l'entreprise et, en fin de compte, à créer une culture de la performance pour les organisations.

De même, les sites lents peuvent avoir un impact considérable sur la conversion. Un défi difficile auquel les entreprises en ligne sont confrontées est de trouver le bon équilibre entre engager le public tout en respectant le budget de performance.

Il n'est donc pas surprenant qu'un élément essentiel de l'engagement du public soit un média visuel optimisé , par exemple une vidéo captivante qui tisse une histoire sur votre produit ou service avec des visuels pertinents, intéressants et attrayants.

Selon les neuroscientifiques du MIT, notre cerveau peut absorber et comprendre les médias visuels en moins de 13 millisecondes, alors que le texte peut prendre plus de 3,3 minutes au lecteur moyen pour le comprendre, souvent après l'avoir relu et avoir fait des références croisées à d'autres endroits. Il n'est donc pas étonnant que le contenu microvidéo (généralement de 10 à 20 secondes seulement) offre souvent de gros engagements et des gains de conversion.

Attrait des vidéos

Lors de vos achats en ligne, nous nous attendons à voir des images de produits détaillées . Depuis des années, j'en suis venu à préférer parcourir des produits qui sont complétés par des vidéos qui montrent, par exemple, comment utiliser le produit ou peut-être comment l'assembler, ou qui montrent des cas d'utilisation réels.

En dehors de mon expérience personnelle, de nombreuses recherches attestent de l'importance du contenu vidéo :

• 96 % des consommateurs trouvent les vidéos utiles lorsqu'ils prennent des décisions d'achat en ligne.
• 79 % des acheteurs en ligne préfèrent regarder une vidéo pour obtenir des informations sur un produit plutôt que de lire le texte sur une page Web.
• La bonne vidéo de produit peut augmenter les conversions de plus de 80 %.

Parlant de la livraison de vidéos sur le web,

"Le poids moyen des vidéos augmente considérablement chaque année, plus sur mobile que sur ordinateur. Dans certains cas, cela peut être justifié car les appareils mobiles ont souvent des écrans haute résolution, mais cela peut également être dû à un manque de capacité à proposer différentes tailles de vidéo en utilisant uniquement HTML. De nombreuses vidéos volumineuses sur le Web sont placées à la main dans des pages marketing et ne disposent pas de serveurs multimédias sophistiqués pour fournir des tailles appropriées. J'espère donc qu'à l'avenir, nous verrons des fonctionnalités HTML simples similaires pour la diffusion vidéo que nous voyons dans les images réactives. ”

—Scott Jehl

Le même sentiment a été véhiculé par l'état du streaming du quatrième trimestre 2020 de Conviva (inscription requise), qui a noté que les téléphones mobiles rencontraient 20 % de problèmes de mise en mémoire tampon en plus , un échec de démarrage vidéo 19 % plus élevé et un temps de démarrage 5 % plus long que les autres appareils.

Outre les problèmes de rendu, la diffusion vidéo peut également augmenter les coûts de bande passante, en particulier si vous ne pouvez pas fournir les formats optimaux du navigateur. De plus, si vous n'utilisez pas un réseau de diffusion de contenu (CDN) ou plusieurs CDN pour mapper les utilisateurs vers les régions périphériques les plus proches pour réduire les latences - une pratique appelée routage sous-optimal - vous risquez de ralentir le démarrage de la vidéo.

De même, les images non optimisées étaient la principale cause de gonflement des pages. Selon le Web Almanac, le différentiel d'octets d'image envoyés aux appareils mobiles ou de bureau est très faible, ce qui équivaut à un gaspillage supplémentaire de bande passante pour les appareils qui n'ont pas vraiment besoin de tous les octets supplémentaires.

Sans aucun doute, aller trop loin avec un contenu engageant mais non optimisé nuit aux objectifs commerciaux, et c'est là que l'art de l'équilibre entre en jeu.

L'art d'équilibrer les performances avec le contenu multimédia

Même si les médias enrichis peuvent favoriser l'engagement des utilisateurs, nous devons équilibrer le coût de leur diffusion avec les performances de votre site Web et vos objectifs commerciaux. Une alternative consiste à héberger et diffuser la vidéo via un tiers comme YouTube ou Vimeo.

Malgré les économies de bande passante, cette approche a un coût. En tant que propriétaire de contenu, vous ne pouvez pas créer une expérience de marque entièrement personnalisée ou proposer une personnalisation. Et bien sûr, vous devez héberger et livrer vos images.

Vous n'avez pas à décharger votre contenu. Il existe également d'autres options disponibles. Envisagez de réorganiser votre système pour une diffusion multimédia optimale en procédant comme suit :

Comprendre votre utilisation actuelle

Étudiez le poids de vos pages Web et la taille de leurs actifs médias. L'experte en recherche Web Tammy Everts recommande de s'assurer que les pages ont une taille inférieure à 1 Mo pour le mobile et inférieure à 2 Mo pour tout le reste. En outre, identifiez les ressources affichées sur les pages critiques.

Par exemple, pouvez-vous remplacer un paragraphe de texte et les images associées par une courte vidéo ? Comment cette décision affecterait-elle vos objectifs commerciaux ? À ce stade, vous devrez peut-être revoir votre Real User Monitoring (RUM) et Analytics et identifier les pages critiques qui conduisent à des taux de conversion et d'engagement plus élevés.

Assurez-vous également de suivre de manière synthétique les Core Web Vitals (CWV) de Google dans le cadre de votre boîte à outils avec des outils tels que LightHouse. Vous pouvez également mesurer les CWV via la surveillance de l'utilisateur réel (RUM) comme CrUX. Étant donné que les CWV seront également un signal pour Google aux robots d'exploration, il est logique de surveiller et d'optimiser ces métriques : la plus grande peinture de contenu (LCP), le premier délai d'entrée (FID) et le changement de mise en page cumulé (CLS).

Servir le bon format

Diffusez des images ou des vidéos dans le format le plus approprié en termes de taille et de résolution pour l'appareil de visualisation ou le navigateur. Vous pourriez avoir besoin d'un CDN d'image à cette fin. Vous pouvez également créer des variantes telles que WebM, AVIF, JPEG-XL, HEIC, etc. et servir de manière sélective le bon type de contenu en fonction des en-têtes User-Agent et Accept.

Pour les conversions ponctuelles, vous pouvez essayer des outils comme Squoosh.app ou avif.io. Une pratique connexe consiste à convertir des GIF animés en vidéos. Pour plus d'informations, consultez cet article Web.dev. Vous voulez essayer de configurer un flux de travail pour gérer la publication vidéo ? Voir les bons conseils dans l'article Optimiser la vidéo pour la taille et la qualité.

Servir la bonne taille

Plus de 41 % des images sur les appareils mobiles sont mal dimensionnées. Ainsi, plutôt que de servir une largeur fixe, recadrez vos images et vidéos pour les adapter à la taille du conteneur avec des outils comme Lazysizes. Mieux encore, les outils d'intelligence artificielle capables de détecter les zones d'intérêt tout en recadrant les images pourraient vous faire gagner beaucoup de temps et d'efforts. Vous pouvez également tirer parti du chargement paresseux natif pour les images situées en dessous du pli.

Ajoutez des sous-titres à vos vidéos

Près de 85% des vidéos sont lues sans son. Leur ajouter des sous-titres ne fournit pas seulement une expérience accessible, mais cela capterait l'attention du public et stimulerait l'engagement. Cependant, la transcription de vidéos peut être un travail fastidieux ; vous pouvez travailler avec un service de transcription basé sur l'IA et l'améliorer à la place pour automatiser le flux de travail.

Diffusez via plusieurs CDN

Les CDN peuvent atténuer la latence du dernier kilomètre, raccourcir l'heure de début d'une vidéo et potentiellement réduire les problèmes de mise en mémoire tampon. Selon une étude de Citrix, une stratégie multi-CDN peut réduire encore plus la latence et offrir une disponibilité continue en cas de pannes localisées dans les nœuds périphériques du CDN.

Au lieu de tirer parti de plusieurs outils discrets, vous pouvez explorer un produit comme Media Optimizer de Cloudinary, qui optimise efficacement et efficacement les médias, offrant le bon format et la bonne qualité via des nœuds périphériques multi-CDN. En d'autres termes, Media Optimizer optimise à la fois la qualité et la taille, offrant une haute fidélité visuelle dans les petits fichiers.

Rendre progressivement la vidéo

La lecture automatique des vidéos d'aperçu sur YouTube a montré une augmentation de plus de 90 % de la durée de visionnage des vidéos. La lecture automatique de vidéos présente peu d'avantages et de nombreux inconvénients, il est donc important de faire attention quand l'utiliser et quand ne pas l'utiliser. Il est important d'avoir la possibilité de mettre la vidéo en pause au minimum.

Un bon moyen d'équilibrer le budget de taille de page serait de ne diffuser d'abord que des aperçus vidéo et des images d'affiche créés par l'IA , en ne chargeant la vidéo complète que si l'utilisateur clique sur la vidéo. De cette façon, vous pouvez éliminer les téléchargements inutiles et accélérer le chargement des pages.

Vous pouvez également charger une vidéo d'aperçu au début et laisser le lecteur lire automatiquement la version complète. Une fois l'aperçu terminé, le lecteur vérifie le type de connexion de l'appareil avec l'API de connexion réseau et, si l'utilisateur dispose d'une bonne connectivité, permute la source de l'aperçu à la vidéo réelle.

Vous pouvez consulter un exemple de page pour une démo. Voici un conseil : étant donné que les CDN peuvent détecter les types de connexion réseau de manière plus fiable, votre code de qualité de production pourrait tirer parti du CDN pour détecter la vitesse du réseau, en fonction de laquelle votre code client pourrait progressivement charger la vidéo longue durée.

Emballer

À l'avenir, grâce à sa remarquable capacité à raconter des histoires d'une manière que les mots ne peuvent pas, les médias visuels continueront d'être un élément dominant pour les sites Web et les applications mobiles. Cependant, déterminer le bon contenu à diffuser dépend à la fois de votre stratégie commerciale et des performances de votre site.

« Un budget de performance ne guide pas vos décisions sur le contenu à afficher. Il s'agit plutôt de la façon dont vous choisissez d'afficher ce contenu. Supprimer complètement du contenu important pour réduire le poids d'une page n'est pas une stratégie de performance.

—Tim Kadlec

C'est un conseil judicieux à retenir.