Pourquoi Facebook & Twitter ralentissent votre site ?

Pourquoi Facebook & Twitter ralentissent votre site ?
5 (100%) 11 votes

Aujourd’hui les boutons de partage ont envahis 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 site 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 pourraient se demander pourquoi ils sont toujours présent de partout… Alors apprenez à faire le bon choix. Pour vous et vos utilisateurs.

Le piège des boutons de partage :

  • Elé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. Mobleyfait plusieurs tests afin de découvrir à quel point les boutons de partage social impactent sur les performances. Il à 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 test 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 peux 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-retours devant être effectuer.

Étant donné que la majorité de ces aller-retours 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 propres script et ne peuvent pas bénéficier de ressources combinées.

Coté vie privée : Google & Reddit dépose 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 un méthode de calcul approximative – le nombre de share = le nombre de lcique sur els boutons de sharing et non les partage réels – AddThis à été remarqué par le passé pour ces méthodes de tracking peu scrupuleuse, dont le « Canvas Fingerprinting« .

Cette méthode de tracking peut être bloqué simplement avec un outil comme Blur. Voici comment cela fonctionne :  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é 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 interactif.

Une image invisible est envoyé à votre navigateur, qui va l’afficher et envoyé une donné 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 envoyé 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éposent 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 terme de performance, faite attention si vous activer d’autres outil SumoMe (c’est en fait une sorte de toolbox pour votre site) 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 d’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 utilisent 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 URLs.

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

Voici quelques ressources qui vous aideront :

A retenir

  • Les boutons de partage peuvent réduire es performances de votre site
  • Sur les trois tests effectués, les boutons de partage de sharethis.com semblent les plus rapides
  • C’est à vous de faire la balance entre les performances réduites et avantages de votre service de sharing
  • Créer des boutons de partage légers est simple et peut vraiment changer vos performances

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 peut avoir ces boutons que l’on voit de partout.

Testez votre méthode préférée et laissez-moi savoir comment vous avez procédé via les commentaires !

Commentaires

  1. Photo du profil de aGirlHasNoName
    aGirlHasNoName
    Merci pour ce post,

    bonne idée pour les bouton que l’on créer soi même, je vais essayer ça de suite.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *