Aujourd’hui les boutons de partage ont envahi le web, on partage tout et n’importe quoi vers les réseaux sociaux, et on est poussé à utiliser ces boutons de partage sur nos sites afin de faciliter la vie de l’utilisateur.

Cela pourrait paraître une évidence d’inclure ces boutons sur chaque page du site que vous avez conçu, mais ces boutons sont aussi vos pires ennemis et impactent sur les performances de votre site. Avec les problèmes de vie privée qu’ils posent, on pourrait se demander pourquoi ils sont toujours présents de partout… Alors, apprenez à faire le bon choix. Pour vous et vos utilisateurs.

Le piège des boutons de partage :

  • Éléments JavaScript

  • Télécharge des ressources tierces

  • Ajoute des requêtes HTTP supplémentaires

  • Ajoute du poids à vos pages

  • Pose des problèmes de confidentialité

Les boutons de partage misent à l’épreuve

Eric W. Mobley fait plusieurs tests afin de découvrir à quel point les boutons de partage social impactent sur les performances. Il a créé une page HTML vide et ajouté des boutons de différents réseaux sociaux, puis mesuré le nombre de requêtes HTTP et le poids de la page avec Pingdom Site Speed Test.

La raison pour laquelle il teste les requêtes HTTP est que toutes les ressources de votre site doivent être téléchargées depuis un serveur, donc chaque ressource a un impact sur les performances.

Latency 101 :

« Pour se replacer dans un contexte simple, disons que vous visitez une page web et que cette page contient 100 objets – des images, des fichiers CSS, etc. Votre navigateur doit faire 100 requêtes individuelles au serveur hébergeant le site, afin de récupérer tous ces objets.

Chacune de ses requêtes demande au moins 20-30 ms de latence. (En général, la latence est de 75-140 ms, même pour les sites qui utilisent un CDN). Cela peut ajouter jusqu’à 2 à 3 secondes de chargement supplémentaire à votre site. Et ceci n’est qu’un des facteurs qui peut ralentir le chargement de vos pages. »

Pour minimiser le nombre de requêtes HTTP, voici le conseil de Google Developers :

« Par conséquent, une stratégie importante pour augmenter les performances d’une page web est de réduire au maximum le nombre d’aller-retour devant être effectué.

Étant donné que la majorité de ces aller-retour sont des requêtes HTTP et des réponses, il est important de minimiser le nombre de demandes que le client a besoin d’effectuer et de les paralléliser au maximum. »

performance-waterfall

Le diagramme en cascade ci-dessus met en évidence le fait que chaque ressource a coût.

Test des différentes solutions

Chaque test a été effectué avec une page vide, avec seulement le code HTML essentiel. Eric a utilisé les boutons de partage Twitter, Facebook et Google+ pour chaque test et inclus des compteurs sur chaque bouton.

 

Boutons officiels

Les boutons de partage officiels en allant sur chacun des réseaux sociaux pour récupérer le code des boutons. Ces boutons utilisent chacun leur propre script et ne peuvent pas bénéficier de ressources combinées.

Côté vie privée : Google & Reddit déposent un Cookie.

Une page blanche avec les boutons officiels a demandé 24 requêtes et fait 314.4ko.

Addthis.com

En plus d’être consommateur de ressources et d’avoir une méthode de calcul approximative – le nombre de share = le nombre de cliques sur les boutons de sharing et non les partages réels – AddThis a été remarqué par le passé pour ces méthodes de tracking peu scrupuleuse, dont le “Canvas Fingerprinting“.

Lorsque le navigateur charge le widget AddThis du site, un JS (JavaScript) qui active le CF (canvas Fingerprinting) est envoyé. Ce script utilise une fonctionnalité des navigateurs modernes appelés l’API Canvas, cette API permet de donner un accès au chipset graphique de l’ordinateur du visiteur. D’habitude utilisé pour les jeux vidéos ou les contenus interactifs.

Une image invisible est envoyée à votre navigateur, qui va l’afficher et envoyer une donnée au serveur de destination. Cette donnée peut ensuite être utilisée pour créer une empreinte digitale (fingerprinting) de votre ordinateur, ce qui est parfait pour identifier votre ordinateur physique et vous envoyer de la pub ciblée.

Une page blanche avec les boutons récupérés sur addthis.com a requis 32 requêtes et fait 502.8ko.

Sharethis.com

Ce service est l’un des services les plus consommateurs de ressources et dépose bon nombre de cookies. Que cela soit intentionnel ou une mauvaise gestion des ressources. En bref, ne prenez même pas la peine de l’essayer.

Une page blanche avec les boutons de sharethis.com a donné lieu à 36 requêtes et fait 469ko.

Jetpack

Jetpack est la solution développée par Automattic, la société derrière WordPress.  Ce plugin ne dépose pas de cookies et dispose de bonnes performances. Il peut être un bon choix pour votre site, malgré qu’il ne gère que Facebook, Twitter, LinkedIn, Reddit et Google+.

SumoMe

SumoMe est l’un des rares services à proposer en simultanée le Facebook Share et le Facebook Like. Médiocre en termes de performance, faite attention si vous activer d’autres outils SumoMe, car plus vous activez de fonctionnalité plus vous faites d’appel sur des services tiers.

Custom buttons

Sans aucune surprise, des boutons créés par vous soins offrent les meilleures performances, ne pose pas de problèmes de vie privée et peuvent s’adapter à la charte de votre site.

Résultats

Vous pouvez retrouver l’intégralité des données de test réalisé par Lubos Kmetko dans ce doc Google.

Comme vous pouvez le voir, les boutons ajoutent un certain nombre de requêtes et un certain poids à votre site. Bien sûr, vous pouvez faire en sorte que les boutons se chargent de manière asynchrone et faire d’autres optimisations, mais ces services coûtent cher pour les performances offertes.

De plus, avec la montée en popularité de Ghostery et d’autres plugins de ce type, les boutons de partage sociaux disparaissent de plus en plus.

Mais il y a un meilleur moyen…

Créez des boutons de partage légers

Vous pouvez facilement créer des boutons de partage sans ajouter énormément de poids ou de requêtes à votre page.

Il suffit de les créer avec un peu de HTML :

<a href="https://twitter.com/intent/tweet?text=[Titre de la page]&url=[URL de la page]"> Twitter 
<a href = "https://www.facebook.com /sharer/sharer.php?u=[URL de la page] "> Facebook </a> 
<a href="https://plus.google.com/share?url=[URL de la page]"> Google+ </a>

Chacune des balises ci-dessus utilise des chaînes de requêtes permettant d’envoyer des données de votre site aux réseaux sociaux. Vous pouvez ajouter cette information à votre CMS et mettre à jour votre template pour insérer les bons titres et URL.

Ajoutez un style à vos liens en CSS et vous avez vos propres boutons de partage.

Voici quelques ressources qui vous aideront :

Vous pourrez tomber sur des boutons de partage complexes avec compteur ayant peu d’impact sur les performances, mais l’objectif de ce post/cet article est de vous faire réfléchir sur le coût en performance que peuvent avoir ces boutons que l’on voit de partout. 

Testez votre méthode préférée et dites-nous pour quelle solution vous avez optez, et pourquoi ? On vous attend dans les commentaires !