web-dev-qa-db-fra.com

Les boutons de médias sociaux ralentissent le temps de chargement du site Web

Je crée un site Web simple et rapide, et j'essaie d'optimiser le site autant que possible. J'ai remarqué que les boutons de médias sociaux ralentissent considérablement le site Web. J'inclus les boutons Facebook Like, Twitter et Google+ . J'ai donc effectué quelques tests:

Site Web sans boutons de médias sociaux, temps de chargement 0.24s:

enter image description here

Site Web avec boutons de médias sociaux, temps de chargement: 1.38s:

enter image description here

Voici mon code:

<div id="social">
    <!-- FB -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- Twitter -->
    <a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');</script>
    <!-- G+ -->
    <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>

J'ai donc essayé quelques choses pour charger ces boutons sociaux sans pour autant ralentir le temps de chargement du site Web.

Chargement des boutons après une seconde de retard via JavaScript:

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

Cela n'a pas aidé, les boutons ne se sont pas chargés correctement et ils étaient en train de bugger.

Chargement des boutons une fois le document prêt:

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

Cela n'a pas aidé non plus. Les boutons se sont bien chargés, mais le temps de chargement du site était toujours> 1,00 secondes.

Je manque d'idées. Un moyen de les charger sans ralentir le site?

PS. Utilisé Temps de chargement de page plugin pour chrome dans ces tests

SOLUTION:

Grâce à CodeMonkey pour sa réponse, j'ai finalement résolu ce problème en chargeant les boutons de réseaux sociaux après le chargement de la page entière. J'ai déplacé le code JavaScript nécessaire (pour les boutons de médias sociaux) dans un fichier séparé pour rendre mon HTML/balisage un peu plus propre.

JS (dans un fichier séparé, social.js):

/* Facebook*/
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

HTML:

<script>
    $(window).bind("load", function() {
       $.getScript('js/social.js', function() {});
    });
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- Twitter -->
<a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>

Donc, après ce chargement, le temps était redevenu normal: 0,24 s:

Load timings

javascripthtmlfacebook-social-pluginsgoogle-plus-onetwitter-button
57
user2824854

Tu pourrais essayer 

$(window).load(function() {

au lieu de 

$(document).ready(function() {

il attendra donc que vos images et tout soient chargés. 

Si cela ne vous aide pas, je vous conseillerais alors de ne les afficher qu'en survol. Ayez un tas d'images statiques/sprites CSS, qui sont remplacés lorsque l'utilisateur les survole.

Si vous ne souhaitez pas cette étape supplémentaire et que vous avez un accès au serveur pour installer des modules, vous pouvez essayer le mod pagepeed de Google pour différer le javascript pour vous https://developers.google.com/speed/pagespeed/module/filter-js-defer

Si vous n’avez pas accès au serveur, vous pouvez essayer la route CDN, le chargeur de fusées de Cloudflare est très intéressant, je le teste à la minute pour des raisons similaires et constate une augmentation de la vitesse d’environ 33% http: //www.cloudflare. com/features-optimizer

Si cela ne vous aide pas, vous pouvez essayer l'ancien favori qui consiste à coller les boutons au bas de la page et à les repositionner avec CSS afin qu'ils paraissent plus haut; De cette façon, vous pouvez les avoir où vous voulez, mais ils ne semblent pas interférer avec le temps de chargement de la page.

Vous pouvez essayer des alternatives oldschool plus simples comme ici http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

ou voyez si un service comme http://www.addthis.com/ ou http://www.sharethis.com/ fonctionne plus rapidement pour vous

Bien sûr, l’éléphant dans la pièce à ce stade-ci est d’avoir les 3 principaux boutons de médias sociaux sur la page, et que cela ne vous coûte que deux secondes - semble malheureusement assez bon! Ce sont des boutons trompeusement compliqués qui ne semblent pas bien optimisés, google pagespeed insights trouve quelque chose à redire avec tous les iirc.

Étant donné que vous prenez plus de 100% de la vitesse, je vous suggérerais des tests A/B pour voir si vous en avez vraiment besoin, c'est-à-dire que le trafic de votre site diminue plus lentement? Les boutons de partage génèrent-ils plus de trafic pour garantir leur présence?

38
CodeMonkey

Bien que cette question soit ancienne et que la personne qui me pose la question ne verra probablement pas ma réponse, voici une solution de rechange pour tous ceux qui ont le même problème - à condition que cela ne vous gêne pas de montrer le nombre de likes/part/etc.

Vous pouvez simplement ajouter des liens qui envoient le visiteur au réseau social actuel et ouvrir une fenêtre de partage avec une URL et une description préremplies.

Le code est très simple et vous pouvez utiliser n’importe quelle image ou texte, ce qui facilitera l’adaptation des boutons au design de votre site.

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://Twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

Remplacez simplement URL par l'URL de votre site Web et TEXT par une courte description.

Cette solution ne nécessite pas de JavaScript et est donc extrêmement légère. Vous pouvez utiliser des logos, des polices d’icône, du texte simple ("Partager sur Facebook").

J'ai aussi écrit un article de blog qui couvre de nombreux autres réseaux sociaux }.

3
Stefan

Les widgets sociaux ne devraient pas trop ralentir votre temps de chargement, sauf s'ils bloquent des scripts plus importants qui attendent la fin du chargement de la page. Le code que vous utilisez est asynchrone, ce qui aide, mais dans la plupart des navigateurs, cela bloquera toujours l'événement window.onload. Voir l'article de Stoyan ici pour plus d'informations sur la façon de charger le SDK JS de manière non bloquante à l'aide d'iframes.

Si c'est trop et que vous souhaitez retarder le téléchargement ou l'exécution du SDK (et l'accélérer une fois qu'il est exécuté), voici ma recommandation:

Tout d’abord, utilisez une bibliothèque telle que jQuery qui offre un moyen d’attacher le DOM à un système prêt à être utilisé sur plusieurs plates-formes. Voici une implémentation . Une fois que vous avez votre "gestionnaire prêt pour DOM", vous devez effectuer l'une des deux opérations suivantes:

  1. Déplacez le code de chargement du SDK JS dans votre gestionnaire prêt pour le DOM.

  2. Prenez xfbml: true dans FB.init (...), si vous en avez un (dans ce cas, vous n'en avez pas) et prenez xfbml = 1 dans l'URL du SDK. Cela empêche les widgets sociaux d'être analysés et initialisés immédiatement. Ensuite, appelez FB.XFBML.parse () dans votre gestionnaire DOM prêt. Voir la documentation ici pour cette méthode . La meilleure chose à faire en matière de performances serait d’appeler spécifiquement FB.XFBML.parse(document.getElementById('')) afin que le SDK ne perde pas de temps à parcourir l’ensemble du DOM.

3
AndrewF

Les temps de chargement du plugin (bouton de média social) varient en fonction de nombreux facteurs, notamment (mais sans s'y limiter):

  • Temps de réponse de votre serveur (les plugins ne se chargent pas tant que votre code ne les leur dit pas également.)
  • La vitesse Internet de l'utilisateur (dans ce cas, la vôtre)
  • La distance entre le serveur du site Web des médias sociaux (par exemple, le serveur de Facebook pourrait être situé de l'autre côté du continent, ce qui créerait une latence)
  • Le temps de chargement du site de médias sociaux tout à fait

Cela signifie qu'il n'y a pas grand chose que vous puissiez faire à part rendre votre code aussi optimisé que possible.

En outre, il est recommandé d’exécuter vos plugins Javascript une fois le document prêt, sauf indication contraire dans la documentation du plugin. SetInterval n'est pas une bonne approche car il ne sait pas si toute la page est prête à être modifiée ou non. Veillez donc à utiliser l'approche $(document).ready() pour tout ce qui modifie le contenu de la page.

2
Luke111

Dans les scripts qui chargent les médias sociaux, mettez "différer" en eux.

<script defer src="http://api.facebook.com/....."></script>
1
Kernel James

Essayez d’utiliser le chargement asynchrone pour les scripts Social Init:

<script async="async">...</script>
1
paka

Essayez de mettre votre bouton "like" dans un iframe réutilisable et de passer l'URL pour aimer.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
0
boateng

La plupart des principaux boutons de médias sociaux offrent une version asynchrone de leur code JavaScript. Il vous suffit de faire défiler un peu plus loin les pages de documentation officielle.

0
Muskie

Si vous êtes venu ici pour trouver une solution, comment charger plus rapidement les plugins sociaux de Facebook, par exemple: comment les rendre AVANT que l'événement window.onload () se produise (en raison d'un réseau lent sur le réseau wifi/une grande image sur la page/...), vous pouvez essayer ma solution:

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}

fbAsyncInit est appelée dès que le fichier facebook sdk js est chargé (par exemple, rapide) et vous pouvez simuler le rendu de boutons sociaux plus tôt (avant que d'autres ressources telles que des images ne soient chargées) à l'aide de la répartition personnalisée d'événements de chargement. Tenez compte des conséquences lorsque vous déclenchez un événement onload () plus tôt en fonction de vos autres codes javascript/bibliothèques.

Une autre solution consiste à envelopper votre plugin social avec le chargement de sdk dans iframe. L'API FB n'attendra pas window.onload de la fenêtre parent et rendra les plugins sociaux plus tôt.

0
lukyer