Optimiser les intégrations de médias sociaux —

Dans cet article, nous examinerons spécifiquement ce que nous pouvons faire pour réduire l'impact des intégrations de médias sociaux et des widgets de partage social – ou même certaines stratégies pour les éviter complètement. Alors que l'accent est mis sur la réduction de l'impact environnemental, bon nombre de ces conseils seront également excellents pour les performances.

La conférence sur le climat COP26 a mis en lumière l'importance de réduire les émissions de carbone dans tous les domaines de notre vie. Tout le monde peut y jouer un rôle, y compris ceux d'entre nous qui travaillent sur le Web.

Mesurer l'empreinte carbone du Web n'est pas une science exacte, mais un rapport de la BBC en 2020 estime que toutes les activités Internet représentent environ 3,7 % des émissions mondiales (similaire à l'industrie du transport aérien), et en augmentation. La taille moyenne des pages Web augmente régulièrement depuis des années et dépasse actuellement les 2 Mo (selon HTTP Archive), et une grande partie de cette augmentation peut être attribuée à Javascript. Ce n'est clairement pas seulement mauvais pour l'environnement – c'est mauvais pour les performances et nuit également à nos utilisateurs. Mais le calcul des émissions de carbone prend en compte bien plus que les octets sur le câble : il y a la puissance utilisée dans le développement, les centres de données qui hébergent nos fichiers, la puissance consommée par les appareils des utilisateurs finaux, et plus encore.

Nous en avons beaucoup. pouvons faire pour atténuer l'impact environnemental des sites que nous construisons. Consultez cet article d'Eric Bailey pour quelques idées. Pour cet article, nous allons approfondir un domaine particulier.

Javascript tiers représente beaucoup de gonflement sur les sites Web, avec des analyses, des chatbots et des widgets intégrés étant des contributeurs communs. En travaillant récemment sur un site, j'ai remarqué qu'une vidéo YouTube intégrée chargeait environ 600 Ko de JS pour tout visiteur que cet utilisateur choisisse ou non de regarder la vidéo . Cela semble inutile. Je me suis également intéressé à cette analyse du site de la COP26 par Fershad Irani, qui montre beaucoup de choses qui pourraient être améliorées pour réduire l'empreinte carbone (relativement importante) du site.

La refonte de la couverture des médias sociaux est brève. mentionné comme un moyen d'économiser environ 1,4 Mo. Cependant, lorsque j'ai visité le site, la quantité de JS apparemment chargée à partir de la section de flux Twitter était encore plus élevée. En y regardant de plus près, il est apparu que d'autres contenus intégrés dans les tweets (vidéo en particulier) contribuaient à cela.

Pour analyser l'impact de différents types d'intégration, j'ai mesuré le JS chargé et temps de blocage total (TBT) sur une connexion mobile pour une simple page HTML avec quelques intégrations courantes. L'impact sur les performances est mesuré avec PageSpeed ​​Insights. Il y a aussi le nombre de requêtes à prendre en compte, qui pour une seule intégration Twitter est beaucoup.

Twitter

Instagram

5YouTube

Ces chiffres sont basés sur le chargement de la première page la mise en cache semble très efficace pour les chargements de pages ultérieurs. Nous pouvons voir que certains types d'intégrations sont plus efficaces que d'autres : les intégrations Instagram se chargent de manière asynchrone par défaut, de sorte qu'elles ne bloquent pas le fil principal. Néanmoins, il est clair qu'une seule page qui contient plusieurs intégrations peut finir par être assez lourde. Dans cet esprit, examinons quelques-unes des façons dont nous pouvons réduire leur impact.

Avez-vous vraiment besoin d'une intégration ?

Le moyen le plus évident de réduire l'impact de ces intégrations est de ne pas les inclure du tout. De nombreux CMS permettent aux clients d'inclure facilement autant d'intégrations qu'ils le souhaitent. Mais cela ne signifie pas qu'ils devraient . Idéalement, le processus de conception devrait prendre en compte les manières dont les clients pourraient souhaiter partager le contenu des médias sociaux. Quels sont les objectifs du client ? Un flux Twitter intégré ajoute-t-il réellement de la valeur, ou est-ce en fait une distraction par rapport au contenu important de la page ? Il vaut la peine de se demander si d'autres options de conception pourraient offrir la même valeur (ou une meilleure). Voici quelques options alternatives :

• Témoignages sélectionnés
  Le client souhaite-t-il simplement afficher les commentaires de clients satisfaits ? Une sélection de témoignages bien conçus pourrait être une meilleure alternative.
• Liens
  Un simple résumé textuel et un lien vers la publication originale sur les réseaux sociaux pourraient être une option viable.
• Webmentions
  Mise en œuvre de Webmentions sur un site vous permet d'afficher des données lorsque quelqu'un mentionne votre URL en ligne. Cet article de Daily Dev Tips explique comment démarrer.

Utilisation d'une API

Si vous devez afficher (par exemple) les cinq derniers tweets de votre profil, cela peut valoir la peine d'être envisagé à l'aide de l'API Twitter. Cela signifie que vous aurez également un contrôle total sur la façon dont ils sont affichés, vous pouvez donc choisir de n'afficher que le contenu textuel d'un tweet, plutôt que les images et vidéos associées, par exemple. Il s'agit d'une option assez exigeante et qui dépasse le cadre de cet article. Consultez le didacticiel Création d'une application pour diffuser des Tweets en temps réel à l'aide de l'API Twitter à titre d'exemple.

Vidéo

Si votre vidéo est courte et agréable, vous pouvez envisager d'utiliser une vidéo HTML native à la place d'une intégration de YouTube. Cela pourrait être une option particulièrement intéressante pour les vidéos d'arrière-plan, qui doivent souvent être bouclées et permettre un contrôle total sur la lecture avec juste une pincée de JS. Une vidéo YouTube, en revanche, ne vous permettra pas de supprimer ou de personnaliser les commandes du lecteur par défaut.

Cela peut ne pas convenir aux vidéos plus longues. YouTube effectue de nombreuses optimisations, en plus de diffuser du contenu à partir d'un CDN, réduisant ainsi la distance que les données doivent parcourir, ce qui, à son tour, réduit les émissions de carbone. (Lisez les avantages des CDN dans cet article de Wholegrain Digital.)

Lazyloading

Si nous concluons que oui, les intégrations de réseaux sociaux sont essentielles à notre site, le moins que nous puissions faire est chargez-les paresseux. Cela signifie que les ressources ne sont pas demandées tant que l'utilisateur n'a pas fait défiler la page jusqu'à ce point. S'ils n'y arrivent jamais, alors la ressource n'est pas chargée du tout. paresseux" attribut. Malheureusement, il n'est pas encore universellement pris en charge – au moment de la rédaction, Firefox ne prend en charge que le chargement paresseux pour les images, et Safari ne le prend pas du tout en charge. L'ajout de loading="lazy" sur les intégrations Twitter dans le HTML n'est pas possible, car l'iframe est ajouté par le script intégré.

Des bibliothèques telles que Lozad.js nous permettent pour charger du contenu paresseux avec la prise en charge de plusieurs navigateurs. Cette démo Codepen montre comment elle peut être utilisée pour charger paresseusement un certain nombre de tweets.

Vous pouvez également lazycharger une vidéo HTML si vous l'utilisez à la place d'une vidéo intégrée.

WordPress

Si vous utilisez WordPress, vous avez le choix entre de nombreux plugins de chargement paresseux pour les vidéos intégrées. Le plugin Lazy Load de WP Rocket est fortement recommandé, et cet article de Sabrina Zeidan démontre la grande différence qu'il peut apporter aux performances. Malheureusement, je ne trouve aucun plugin WordPress pour le chargement paresseux des intégrations de Twitter, Instagram et autres. comme une "façade". Les captures d'écran peuvent être capturées manuellement ou vous pouvez utiliser un service tel que Tweetpikqui crée des captures d'écran à partir des URL de tweet (et dispose d'une API). N'oubliez pas d'inclure du texte altafin que les utilisateurs de technologies d'assistance puissent accéder au contenu de l'image.

Pour les contenus tiers interactifs tels que les vidéos, nous pouvons utiliser le Import sur le modèle d'interaction (détaillé dans cet article par Addy Osmani). L'idée est similaire au lazyloading : les ressources non critiques ne sont chargées que lorsque l'utilisateur interagit avec le composant de l'interface utilisateur. Cela signifie que les utilisateurs qui n'interagissent pas avec le contenu n'ont jamais à supporter le coût supplémentaire du chargement du script tiers. Voici une démonstration très basique de la façon dont nous pouvons faire cela en utilisant vanilla JS :

La technique peut également être appliquée à d'autres types de scripts tiers, tels que les widgets de chat et la carte intègre. Nous l'avons utilisé avec succès sur Atomic Smash pour améliorer considérablement les performances d'un site avec un chatbot. Il a cependant quelques limites claires : une fois la vidéo chargée, l'utilisateur doit cliquer une seconde fois pour la lire. Certains packages gèrent cela de manière beaucoup plus élégante pour les intégrations YouTube et Vimeo :

Sur de nombreux sites Web, vous verrez des icônes de réseaux sociaux "cliquer pour partager" qui, lorsqu'elles sont cliquées, invitent l'utilisateur à partager la page dans l'application de médias sociaux de votre choix. Malheureusement, tout comme les médias sociaux intégrés, ceux-ci sont souvent accompagnés d'une tonne de JS que l'utilisateur pauvre et sans méfiance peut télécharger. Si vous vous souciez des performances ou de l'impact environnemental de votre site, cela vaut la peine d'explorer des alternatives. Ils les ont peut-être remarqués sur les sites Web de leurs concurrents, mais il y a de fortes chances qu'ils ne soient pas conscients de l'impact sur les performances. Ces widgets sont fortement commercialisés par les entreprises qui les fournissent, et il est étonnamment difficile de trouver des statistiques concrètes sur la fréquence à laquelle les utilisateurs les utilisent réellement. Mais parmi les statistiques que j'ai pu trouver, la plupart indiquent que l'utilisation globale est très faible. Le consensus semble être que les utilisateurs sont beaucoup plus susceptibles de partager du contenu par d'autres moyens (c'est-à-dire en copiant l'URL et en le partageant dans l'application de leur choix) qu'en cliquant sur les boutons de partage social. (Cet article de 2017 décrit certaines statistiques et certaines raisons possibles.) Ces facteurs combinés peuvent dissuader les clients de les ajouter à un site.

L'API Web Share

Si vous le souhaitez pour ajouter un bouton de partage, mais que vous voulez éviter tout JS inutile, une façon plus simple de le faire est d'utiliser l'API de partage Web. Il est raisonnablement bien pris en charge dans les navigateurs mobiles, mais n'est pas encore largement pris en charge sur les ordinateurs de bureau.

Nous pouvons utiliser la méthode navigator.share() pour partager une URL ou des fichiers, tels que des images, des vidéos ou PDF.

navigator.share({
  titre : 'Smashing Magazine',
  texte : 'Actualités et tutoriels sur le développement Web',
  URL : 'https://www.smashingmagazine.com/'
})

Cette démo fournit un bouton de partage social pour les navigateurs qui le prennent en charge (et le masque pour ceux qui ne le font pas) en appelant la méthode au clic. Nous pouvons d'abord tester la prise en charge à l'aide de navigator.canShare() :

Nous pouvons voir que l'API Web Share ne fournit pas même expérience que les widgets de partage social, mais permet à l'utilisateur de choisir parmi ses applications installées pour partager le contenu.

Packages NPM

Si vous avez besoin de boutons de partage qui se comportent davantage comme les widgets de partage susmentionnés et qui ont compatibilité entre navigateurs, une meilleure option consiste à utiliser un package NPM. share-buttons est l'un de ces packages. Il fournit 19 options de partage différentes et charge beaucoup moins de JS. Un autre avantage est que vous pouvez entièrement personnaliser vos boutons de partage.

Boutons sans JS

Il peut être surprenant que vous n'ayez en fait pas du tout besoin de JS pour fournir des liens de partage social – une URL de lien est tout ce dont vous avez besoin . Connaître l'URL correcte pour l'implémenter n'est pas exactement intuitif, mais il existe différents sites d'assistance disponibles qui créent le lien pour vous : sharingbuttons.io et simpleshare.io en sont deux. Le premier fournit un extrait CSS pour les styliser comme la vraie chose aussi – bien que vous soyez libre de les personnaliser. Comme le prétend le site Sharing Buttons de Max Stoiber :

« Ils se chargent incroyablement rapidement (ils n'utilisent qu'une seule requête HTTP), n'empêchent pas l'affichage de votre site Web, sont accessibles et ne suivent pas l'utilisateur ».

Qu'est-ce que c'est ? ne pas aimer ?

Je ne trouve vraiment aucun inconvénient à cette approche, cela semble clairement être un gagnant. Je suppose que peut-être à l'avenir, il est possible que l'URI utilisé pour le partage par l'un des sites de médias sociaux puisse changer, ce qui signifie que vous devrez mettre à jour manuellement (par opposition à mettre à jour un package ou un plugin) . Mais je ne sais pas quelle est la probabilité de ce scénario, et il semble en valoir la peine pour les avantages.

Ressources

Vous trouverez de nombreuses ressources dispersées tout au long de cet article, mais voici quelques liens supplémentaires si vous souhaitez plonger plus profondément :

(vf, yk, il)