L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment améliorer les performances des médias avec un budget
Le chercheur américain Mason Cooley a décrit avec habileté un fait difficile de la vie: «Un budget enlève le plaisir d'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 revoir fréquemment. Cependant, tout comme les dépenses incontrôlables sont de mauvais augure à long terme, les médias numériques non budgétés réduisent les performances du site.
Un exemple typique: un ralentissement du chargement de pages d'une seconde seulement pourrait coûter Amazon 1,6 $ milliards de dollars de ventes annuelles . Parmi les nombreux facteurs qui affectent la vitesse de chargement des pages, media est un facteur significatif. D'où le besoin urgent de prioriser l'optimisation des médias. En dépensant votre argent directement sur cette tâche et en budgétisant vos médias, vous récolterez des économies et des avantages significatifs à long terme.
Budgets de performance
«Un budget de performance est '… exactement ce que cela ressemble: vous définissez un' budget 'sur votre page et faites ne pas permettre à la page de dépasser cela. Cela peut être un temps de chargement spécifique, mais c'est généralement une conversation plus facile à avoir lorsque vous divisez le budget en nombre de requêtes ou en taille de page. »
Un budget de performance comme mécanisme de planification d'une expérience Web et de prévention de la dégradation des performances, il peut s'agir des critères suivants:
- Poids global de la page,
- Nombre total de requêtes HTTP,
- Temps de chargement de la page sur un réseau mobile particulier,
- ] First Input Delay (FID)
- First Contentful Paint (FCP),
- Cumulative Layout Shift (CLS),
- Largest Contentful Paint (LCP).
Vitaly Friedman a un excellent checklist 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 fixer des objectifs de performance .
Avec des objectifs de performance clairement documentés, diverses é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 métrique autonome peut ne pas être d'une grande aide. C’est pourquoi nous devons mettre en corrélation les performances et les objectifs de l’organisation.
Performances de l’entreprise
Si vous investissez beaucoup d’octets sur des vidéos et des images non optimales, l’expérience rich-media 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. Quiconque est présent sur le Web apprécierait la relation entre l'effet de diverses mesures de performance sur les mesures commerciales.
WPOStats met en évidence littéralement 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. Établir 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 dramatique sur la conversion. Un défi de taille pour les entreprises en ligne est de trouver le bon équilibre entre l'engagement du 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 des médias visuels optimisés. 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 tandis que le texte peut prendre au lecteur moyen plus de 3,3 minutes pour le comprendre, souvent après l'avoir relu et croisé 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.
Appel de vidéos
Lors de vos achats en ligne, nous nous attendons à voir détaillé images de produits . Depuis des années, je préfère parcourir les 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 illustrent des cas d'utilisation réels.
expérience, de nombreuses recherches attestent de l'importance du contenu vidéo:
- 96% des consommateurs trouvent les vidéos utiles pour prendre des décisions d'achat en ligne.
- 79% des acheteurs en ligne préférez 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 de plus de 80% .
Parlant de la livraison de vidéos sur le Web,
«Le poids moyen d'une vidéo augmente considérablement chaque année, davantage sur mobile que sur ordinateur de bureau. 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é à offrir différentes tailles de vidéo en utilisant uniquement HTML. De nombreuses grandes vidéos 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 responsives. »
Le même sentiment a été exprimé par Conviva Q4 2020 State of Streaming (enregistrement requis), qui a noté que les téléphones mobiles ont vu 20% plus de problèmes de mise en mémoire tampon 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, surtout si vous ne pouvez pas livrer 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 aux 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 en 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 tout
Sans aucun doute, aller trop loin avec un contenu attrayant mais non optimisé nuit aux objectifs commerciaux, et c'est là que l'art de l'équilibre entre en jeu.
L'art d'équilibrer la performance avec le contenu multimédia
Même si riche Les médias peuvent favoriser l'engagement des utilisateurs, nous devons équilibrer le coût de leur livraison avec les performances de votre site Web et vos objectifs commerciaux. Une alternative est d'héberger et de diffuser des vidéos 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 ni proposer de personnalisation. Et bien sûr, vous devez héberger et diffuser vos images.
Vous n'êtes pas obligé de décharger votre contenu. Il existe également d'autres options disponibles. Pensez à réorganiser votre système pour une diffusion multimédia optimale en procédant comme suit:
Comprenez votre utilisation actuelle
Étudiez le poids de vos pages Web et la taille de leurs ressources multimédias. L'expert en recherche Web Tammy Everts recommande de s'assurer que la taille des pages est inférieure à 1 Mo pour les mobiles et inférieure à 2 Mo pour tout le reste.
De plus, identifiez les ressources qui sont 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 passer en revue 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 Core Web Vitals (CWVs) dans le cadre de votre boîte à outils avec des outils tels que LightHouse . Vous pouvez également mesurer les CWV grâce à la surveillance de l'utilisateur réel (RUM) comme CrUX . Étant donné que les CWV seront également un signal pour Google pour les robots d'exploration, il est logique de surveiller et optimiser ces mesures : Largest Contentful Paint (LCP), First Input Delay (FID), et Cumulative Layout Shift (CLS).
Servez le bon format
Servez 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'une image CDN à cette fin. Vous pouvez également créer des variantes comme WebM, AVIF, JPEG-XL, HEIC, etc. et servir de manière sélective le type de contenu approprié en fonction des en-têtes User-Agent et Accept.
Pour des conversions ponctuelles, vous pouvez essayer des outils tels que 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 . Voulez-vous essayer de configurer un flux de travail pour gérer la publication vidéo? Consultez les bons conseils de l'article Optimisation de la taille et de la qualité de la vidéo .
Servez la bonne taille
Plus de 41% des images sur les appareils mobiles ne sont pas correctement 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 tels que Lazysizes . Mieux encore, les outils d'IA capables de détecter les zones d'intérêt tout en recadrant des images pourraient vous faire gagner beaucoup de temps et d'efforts. Vous pouvez également tirer parti du chargement paresseux natif pour les images qui se trouvent sous la ligne de flottaison.
Ajoutez des sous-titres à vos vidéos
Près de 85% des vidéos sont lues sans son. L'ajout de 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.
Livrer via plusieurs CDN
Les CDN peuvent réduire 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 explorez 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.
Rendu progressif de la vidéo
Vidéos d'aperçu à lecture automatique sur YouTube a montré pour augmenter la durée de visionnage des vidéos de plus de 90%. La lecture automatique d'une vidéo présente peu d'avantages et de nombreux inconvénients il est donc important de faire attention quand 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 la taille de la page serait de commencer par diffuser uniquement les aperçus vidéo et les images d'affiche créés par l'IA en chargeant le vidéo complète uniquement 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 de prévisualisation au début et laisser le lecteur lire automatiquement la version complète. Une fois la prévisualisation terminée, 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 vérifier une page d'exemple 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 exploiter le CDN pour détecter la vitesse du réseau, sur la base de laquelle votre code client pourrait charger progressivement la vidéo longue durée. [19659067] Wrapping Up
Plus tard, 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 performances ne guide pas vos décisions quant au contenu à afficher. Il s'agit plutôt de la manière dont vous choisissez d'afficher ce contenu. Supprimer complètement un contenu important pour réduire le poids d'une page n'est pas une stratégie de performance. »
C'est un bon conseil à garder à l'esprit.
(vf, yk, il)
Source link