Optimisation des plugins Facebook et google +1

[Alexandre Marlot]

Bonjour à tous,

J'aurais voulu quelques conseils pour optimiser les plugins Facebook et Google +1. Google plus est extrêmement coûteux en requêtes et en poids.

Une idée serait de charger ces plugins uniquement sur le document.ready() ou sur le document.load() mais on ne fait que décaler le problème sans l'optimiser.

Je suis tombé sur cette article intéressant : http://calendar.perfplanet.com/2012/liking-performance/ qui explique comment ils ont réussi à optimiser le like facebook mais ce plugin n'a pas été rendu publique (ou je ne l'ai pas trouvé).

D'avance merci,

Alexandre

[Alexandre Marlot]

Bonjour à tous,

J'ai trouvé cet excellent article sur le sujet : http://www.mediassociaux.fr/2012/11/15/de-linteret-des-boutons-de-partage/

il y aussi ce plugin qui a l'air intéressant : http://socialitejs.com/

Il y a aussi la possibilité de juste mettre une image et un lien : http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

Avez vous d'autres retours d'expérience ?

Merci,

Alexandre

[jpvincent]

Salut

Le code et les optimisations que tu as vu sur calendar.perfplanet sont des optimisations faites par Facebook eux même (via Stoyan, l'auteur du post et embauché à l'époque récent de Facebook). Ce n'est donc pas un plugin mais des modifications faites dans le code.

Tu as bien raison de t'inquiéter des contre-performances de tous ces boutons, en particulier du bouton G+.

Personnellement j'ai du optimiser ce dernier car il prenait beaucoup de CPU sur IE 7. Pourquoi ? après un coup de profiling, je me suis rendu compte qu'il scannait tout le DOM pour trouver les instances du bouton. Sur une page lourde et avant document.querySelector (IE 8+), c'est fatal. Donc je suis allé trouver dans leur API une option qui permet de cibler précisément un élément, le problème a donc été résolu.

Les problèmes de performance posés par un bouton Twitter par exemple (blocage du navigateur tant que Twitter n'a pas répondu) peuvent être résolus manuellement en chargeant de manière asynchrone leur plugin.

Globalement les recommandations :

- si tu veux optimiser vite fait, au minimum contrôle le moment où l'injection du bouton se fait. Après le body.onload idéalement, 1-2 secondes après document.ready par exemple. De cette manière tu passes de fait en asynchrone, et tu déplaces le problème à un moment où le navigateur de l'utilisateur est un peu plus disponible

- si tu as un peu de temps, explore bien toutes les options des APIs déjà proposées par les créateurs des boutons. L'option "par défaut" est généralement la plus facile à mettre en place, au prix des performances

- si tu veux d'excellentes perfs et que les fonctionnalités sont négociables, mets simplement des liens vers les pages qui enregistrent le partage …

Le lundi 14 octobre 2013 10:48:41 UTC+2, Alexandre Marlot a écrit :

[Cédric Morin]

Le 16 oct. 2013 à 15:49, jpvincent <jeanpierr...@gmail.com> a écrit :

Salut

Le code et les optimisations que tu as vu sur calendar.perfplanet sont des optimisations faites par Facebook eux même (via Stoyan, l'auteur du post et embauché à l'époque récent de Facebook). Ce n'est donc pas un plugin mais des modifications faites dans le code.

Tu as bien raison de t'inquiéter des contre-performances de tous ces boutons, en particulier du bouton G+.

Personnellement j'ai du optimiser ce dernier car il prenait beaucoup de CPU sur IE 7. Pourquoi ? après un coup de profiling, je me suis rendu compte qu'il scannait tout le DOM pour trouver les instances du bouton. Sur une page lourde et avant document.querySelector (IE 8+), c'est fatal. Donc je suis allé trouver dans leur API une option qui permet de cibler précisément un élément, le problème a donc été résolu.

Les problèmes de performance posés par un bouton Twitter par exemple (blocage du navigateur tant que Twitter n'a pas répondu) peuvent être résolus manuellement en chargeant de manière asynchrone leur plugin.

Globalement les recommandations :

- si tu veux optimiser vite fait, au minimum contrôle le moment où l'injection du bouton se fait. Après le body.onload idéalement, 1-2 secondes après document.ready par exemple. De cette manière tu passes de fait en asynchrone, et tu déplaces le problème à un moment où le navigateur de l'utilisateur est un peu plus disponible

- si tu as un peu de temps, explore bien toutes les options des APIs déjà proposées par les créateurs des boutons. L'option "par défaut" est généralement la plus facile à mettre en place, au prix des performances

- si tu veux d'excellentes perfs et que les fonctionnalités sont négociables, mets simplement des liens vers les pages qui enregistrent le partage …

Ou, plus subtilement un élément statique dans la page qui ne va déclencher le chargement du bouton G+ ou FB qu'en cas de survol ou de clic (à définir en fonction de l'interface).

En plus de l'aspect performance, j'ajouterai pour ma part un énorme intérêt en terme de respect de la vie privé, car il évite de filer à Google ou Facebook (ou Twitter) toutes les infos de tes visiteurs qui visualisent les pages.

Cédric

Le lundi 14 octobre 2013 10:48:41 UTC+2, Alexandre Marlot a écrit :

Bonjour à tous,

J'aurais voulu quelques conseils pour optimiser les plugins Facebook et Google +1. Google plus est extrêmement coûteux en requêtes et en poids.

Une idée serait de charger ces plugins uniquement sur le document.ready() ou sur le document.load() mais on ne fait que décaler le problème sans l'optimiser.

Je suis tombé sur cette article intéressant : http://calendar.perfplanet.com/2012/liking-performance/ qui explique comment ils ont réussi à optimiser le like facebook mais ce plugin n'a pas été rendu publique (ou je ne l'ai pas trouvé).

D'avance merci,

Alexandre

--
--
Liste de diffusion sur les performances web : http://groups.google.com/group/performance-web
Plus d'informations : http://performance.survol.fr/
Se déinsinscrire : performance-w...@googlegroups.com
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes performance-web.
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse performance-w...@googlegroups.com.
Pour plus d'options, visitez le site https://groups.google.com/groups/opt_out .