Des boutons de réseaux sociaux ralentir le temps de chargement de site web

Question

Je suis en création d'un simple et rapide site web, et je suis en train d'optimiser le site autant que je le peux. J'ai remarqué que des boutons de réseaux sociaux sont de ralentir le site web par beaucoup. Je suis, y compris le Facebook Comme le Bouton, Bouton Twitter et Google+ Bouton. Alors, j'ai couru quelques tests:

Site sans des boutons de réseaux sociaux, le temps de chargement de 0,24 s:

Site web avec des boutons de réseaux sociaux, le temps de chargement de 1,38 s:

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 à charger ces boutons sociaux sans eux, le ralentissement de chargement d'un site web de temps.

Boutons de chargement après une seconde de retard via JavaScript:

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

Cela ne vous aide pas, les boutons ne se charge pas correctement et qu'ils étaient sur écoute.

Boutons de chargement après le document est prêt:

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

Cela n'a pas aider non plus. Boutons de chargement très bien, mais site web de temps de chargement était encore >1.00 secondes.

Je suis à cours d'idées. De toute façon, pour les charger sans ralentir les performances de site web?

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 sociale des boutons après l' ensemble de la page est chargée. J'ai déplacé le code JavaScript nécessaire (pour des boutons de réseaux sociaux) dans un fichier séparé pour rendre mon code HTML/balisage peu plus propre.

JS (dans un autre fichier 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 cette charge timings étaient de nouveau normal, de 0,24 s:

Answer 1

Vous pouvez essayer de

$(window).load(function() {

au lieu de

$(document).ready(function() {

donc, il faudra attendre la fin de vos images et tout est chargé.

Si cela ne fonctionne pas, alors je suggère d'avoir eux n'apparaissent que sur le vol stationnaire. Avoir un tas d'images statiques / CSS sprites, qui vont être remplacées lorsque l'utilisateur place le pointeur au-dessus d'eux.

Si vous ne voulez pas que l'étape supplémentaire, et vous avez accès au serveur pour installer les modules, vous pouvez essayer google mod pagespeed de reporter 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 de la CAN route, Cloudflare rocket chargeur est très intéressant, je suis en train de tester à la minute pour des raisons similaires, et de voir ~ 33% d'augmentation de la vitesse de http://www.cloudflare.com/features-optimizer

Si cela ne fonctionne pas vous pouvez essayer de l'ancien favori de coller les boutons au bas de la page et le repositionnement avec CSS pour un look plus haut; de cette façon, vous pouvez disposer où vous le souhaitez, mais ils ne semblent pas interférer avec le temps de chargement de page.

Vous pouvez essayer de plus simple oldschool solutions de rechange, comme ici http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

ou voir si le service comme http://www.addthis.com/ ou http://www.sharethis.com/ travailler plus vite pour vous

Bien sûr, l'éléphant dans la pièce à ce point, c'est que pour avoir les 3 principaux médias sociaux sur les boutons de la page, et pour qu'il ne vous coûtera qu'une seconde, malheureusement, semble assez bon! Ils sont faussement compliqué boutons qui ne semblent pas bien optimisé, google pagespeed insights trouve quelque chose à se plaindre avec tous iirc.

Puisque vous prenez un 100%+ de vitesse frapper, je voudrais suggérer quelques tests A/B pour voir si vous avez vraiment besoin, c'est à dire que votre site n'étant plus lente diminution de la circulation? Le fait d'avoir les boutons de partage d'apporter plus de trafic pour justifier leur présence?

Answer 2

Tandis que cette question est ancienne et que la personne demandant probablement ne verrez pas ma réponse, voici une alternative pour quelqu'un avec le même problème: tant que vous ne me dérange pas de sacrifier montrant le nombre de likes/partages/etc.

Vous pouvez simplement ajouter des liens qui envoient le visiteur à la véritable réseau social et d'ouvrir une fenêtre de partage avec pré-rempli URL et la description.

Le code est très simple et vous pouvez l'utiliser n'importe quelle image ou le texte que vous voulez, ce qui rendra plus facile pour s'adapter à l'boutons avec votre site de la conception.

<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>

Il suffit de remplacer l'URL par l'URL de votre site web et TEXTE avec une courte description.

Cette solution nécessite pas de JavaScript et est donc extrêmement léger. Vous pouvez utiliser les logos, icône de la police, de texte simple ("Partager sur Facebook").

J'ai également écrit un post de blog qui couvre de nombreux autres réseaux sociaux.

Answer 3

Les widgets sociaux ne devraient pas être en train de ralentir votre temps de chargement trop, à moins qu'ils ne bloque plus important des scripts qui sont en attente pour la page à la fin du chargement. Le code que vous utilisez est asynchrone, ce qui permet d', mais dans la plupart des navigateurs, il va encore bloquer l' window.onload événement. Voir Stoyan post ici pour plus d'informations sur comment vous pouvez charger le JS SDK dans un non-bloquant chemin à l'aide des iframes.

Si c'est trop, et vous voulez retarder le SDK téléchargement ou en cours d'exécution (et de la vitesse une fois qu'il ne s'exécutent), voici ma recommandation:

Tout d'abord, soit utiliser une librairie comme jQuery qui permet de s'accrocher dans les DOM à être prêt en une croix-plate-forme de la mode. Voici une mise en œuvre. Une fois que vous avez votre "DOM prêt gestionnaire", vous devez effectuer l'une des deux opérations suivantes:

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

2. Prendre xfbml: true de FB.init(...), si vous en avez (dans ce cas, vous n'avez pas), et de prendre xfbml=1 sur le SDK de l'URL. Cela empêche les widgets sociaux d'être analysé et initialisé immédiatement. Ensuite, appelez FB.XFBML.parse() dans votre DOM prêt gestionnaire. Voir la documentation ici pour cette méthode. La meilleure chose à faire pour la performance serait d'appeler FB.XFBML.parse(document.getElementById('')) alors que le SDK ne perdez pas de temps à aller sur l'ensemble des DOM.

Answer 4

Le plugin (social media bouton) temps de charge varie en fonction d'un certain nombre de facteurs, y compris (mais non limité à):

• Votre temps de réponse du serveur (les Plugins n'a pas de charger jusqu'à ce que votre code dit de trop.)
• L'utilisateur de l'internet de la vitesse (dans ce cas, la vôtre)
• La distance à la social media serveur du site web (par exemple, Facebook est le serveur pourrait être situé de l'autre côté du continent, la création de latence)
• Le temps de chargement du site web social media au total

Cela signifie qu'il n'y a pas beaucoup que vous pouvez faire en plus de rendre votre code optimisé comme possible.

Aussi, il est de bonne pratique pour l'exécution de vos plugins Javascript après le document est prêt, à moins d'indication contraire par le plugin de la documentation. La fonction setInterval n'est pas une bonne approche, car il ne sait pas si toute la page est prête à être modifié ou non. Donc, assurez-vous d'utiliser l' $(document).ready() approche pour faire quelque chose qui modifie le contenu de la page.

Answer 5

À l'intérieur de l'scripts qui chargent les médias sociaux, mettre de "reporter" en eux.

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