javascript - una - Los botones de redes sociales ralentizan el tiempo de carga del sitio web

test de velocidad sitio web

Question

Estoy creando un sitio web simple y rápido, y estoy tratando de optimizar el sitio tanto como puedo. Noté que los botones de redes sociales están ralentizando el sitio web por bastante. Incluyo el botón Me gusta de Facebook, el botón de Twitter y el botón de Google+. Entonces realicé algunas pruebas:

Sitio web sin botones de redes sociales, tiempo de carga 0.24s:

Sitio web con botones de redes sociales, tiempo de carga 1.38s:

Aquí está mi código:

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

Así que intenté algunas cosas para cargar estos botones sociales sin que ralenticen el tiempo de carga del sitio web.

Cargando botones después de un segundo de retraso a través de JavaScript:

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

Esto no ayudó, los botones no se cargaron correctamente y estaban molestando.

Cargando los botones después de que el documento esté listo:

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

Esto tampoco ayudó. Los botones se cargaron bien, pero el tiempo de carga del sitio web aún era> 1,00 segundos.

Me estoy quedando sin ideas. ¿Alguna forma de cargarlos sin ralentizar el sitio web?

PD. Se utiliza el plugin Tiempo de carga de páginas para Chrome en esas pruebas

SOLUCIÓN:

Gracias a CodeMonkey por su respuesta, eventualmente resolví este problema cargando botones sociales después de cargar toda la página. Moví el código JavaScript necesario (para los botones de las redes sociales) en un archivo separado para hacer que mi HTML / marcado sea un poco más limpio.

JS (en un archivo separado, 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>

Entonces, después de estos tiempos de carga, volvieron a ser normales, 0.24s:

Answer 1

Dentro de los scripts que cargan las redes sociales, ponga "diferir" en ellas.

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

Answer 2

Intenta poner tu botón "Me gusta" en un iframe reutilizable y pasa la url a Me gusta.

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

Answer 3

Intenta usar la carga asincrónica para los scripts de Social init:

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

Answer 4

La mayoría de los principales botones de redes sociales ofrecen una versión asíncrona de su JavaScript. Solo tiene que desplazarse un poco más abajo en las páginas oficiales de documentación.

Answer 5

Los tiempos de carga del complemento (botón de redes sociales) variarán dependiendo de una serie de factores, incluidos (entre otros):

• El tiempo de respuesta de su servidor (los complementos no se cargan hasta que su código también se lo indique).
• La velocidad de internet del usuario (en este caso, la tuya)
• La distancia al servidor del sitio web de medios sociales (por ejemplo, el servidor de Facebook podría estar ubicado en el otro lado del continente, creando latencia)
• El tiempo de carga del sitio web de redes sociales en conjunto

Esto significa que no hay mucho que pueda hacer además de hacer su código lo más optimizado posible.

Además, es una buena práctica ejecutar los complementos de Javascript una vez que el documento esté listo, a menos que se especifique lo contrario en la documentación del complemento. El setInterval no es un buen enfoque, ya que no sabe si toda la página está lista para ser modificada o no. Por lo tanto, asegúrese de usar el enfoque $(document).ready() para hacer cualquier cosa que modifique el contenido de la página.

Answer 6

Los widgets sociales no deberían ralentizar demasiado el tiempo de carga, a menos que bloqueen las secuencias de comandos más importantes que esperan que la página termine de cargarse. El código que está utilizando es asincrónico, lo que ayuda, pero en la mayoría de los navegadores esto aún bloqueará el evento window.onload . Consulte la publicación de Stoyan aquí para obtener información acerca de cómo puede cargar JS SDK de una manera no bloqueante mediante iframes.

Si eso es demasiado, y desea retrasar la descarga o ejecución del SDK (y acelerarlo una vez que se ejecuta), esta es mi recomendación:

En primer lugar, utilice una biblioteca como jQuery que proporcione una forma de engancharse en el DOM que está lista de manera multiplataforma. Aquí hay una implementación . Una vez que tenga su "controlador listo para DOM", debe hacer una de las siguientes dos cosas:

1. Mueva el código de carga de JS SDK a su manejador listo para DOM.

2. Tome xfbml: true de FB.init (...), si lo tiene (en este caso, no) y saque xfbml = 1 de la URL del SDK. Esto evita que los widgets sociales sean analizados e inicializados de inmediato. Luego, llame a FB.XFBML.parse () en su controlador listo para DOM. Vea la documentación aquí para ese método . Lo mejor que se puede hacer por el rendimiento sería llamar específicamente a FB.XFBML.parse(document.getElementById('''')) para que el SDK no pierda el tiempo recorriendo todo el DOM.

Answer 7

Si bien esta pregunta es antigua y la persona que pregunta probablemente no verá mi respuesta, aquí hay una alternativa para cualquier persona con el mismo problema, siempre y cuando no te importe sacrificar mostrando la cantidad de me gusta / acciones / etc.

Simplemente puede agregar enlaces que envían al visitante a la red social real y abrir una ventana para compartir con la URL y la descripción precargadas.

El código es muy simple y puede usar cualquier imagen o texto que desee, lo que facilitará el ajuste de los botones con el diseño de su sitio.

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

Simplemente reemplace la URL con la URL de su sitio web y TEXTO con una breve descripción.

Esta solución no requiere JavaScript y, por lo tanto, es extremadamente liviana. Puede usar logotipos, fuente de icono, texto simple ("Compartir en Facebook").

También escribí una publicación de blog que cubre muchas otras redes sociales .

Answer 8

Si vino aquí para encontrar una solución sobre cómo cargar los complementos sociales de Facebook más rápido, por ejemplo, cómo renderizarlos ANTES de que ocurra el evento window.onload () (debido a la lentitud de la red en wifi / imagen grande en la página / ...) puede probar mi solución :

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

fbAsyncInit se invoca tan pronto como se carga el archivo facebook sdk js (por ejemplo, rápido) y se pueden falsificar los botones sociales para procesarlos antes (antes de que se carguen otros recursos, como las imágenes) mediante el despacho personalizado de eventos de carga. Tenga en cuenta las consecuencias cuando activa el evento onload () antes, dependiendo de sus otros códigos / bibliotecas de JavaScript.

Otra solución es ajustar su complemento social con la carga de sdk en iframe. La API de FB no esperará la ventana de carga de la ventana principal y procesará los complementos sociales antes.

Answer 9

Tu podrías intentar

$(window).load(function() {

en lugar de

$(document).ready(function() {

entonces esperará hasta después de que tus imágenes y todo se haya cargado.

Si eso no ayuda, sugeriría que solo aparezcan al pasar el ratón. Tenga un grupo de imágenes estáticas / sprites de CSS, que se reemplazan cuando el usuario pasa sobre ellos.

Si no desea ese paso adicional y tiene acceso de servidor para instalar módulos, puede probar la velocidad de página de mod de google para diferir el javascript https://developers.google.com/speed/pagespeed/module/filter-js-defer

Si no tiene acceso al servidor puede probar la ruta CDN, el cargador de cohetes de Cloudflare es muy interesante, lo estoy probando en el minuto por razones similares, y veo ~ 33% de aumento de velocidad http://www.cloudflare.com/features-optimizer

Si eso no ayuda, podría probar el antiguo favorito de colocar los botones en la parte inferior de la página y reposicionar con CSS para que se vean más arriba; de esa manera puede tenerlos donde los desee, pero no parecen interferir con el tiempo de carga de la página.

Podrías probar alternativas más sencillas de la vieja escuela como aquí http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

o vea si el servicio como http://www.addthis.com/ o http://www.sharethis.com/ funciona más rápido para usted

Por supuesto, el elefante en la habitación en este momento es que tener los 3 botones principales de las redes sociales en la página, y que solo le cueste un segundo, ¡por desgracia parece bastante bueno! Son botones engañosamente complicados que no parecen estar bien optimizados, las estadísticas de velocidad de páginas de google encuentran algo de lo que quejarse con todos ellos iirc.

Dado que está recibiendo un golpe de 100% + de velocidad, le sugiero que realice algunas pruebas A / B para ver si realmente las necesita, es decir, ¿su sitio está disminuyendo el tráfico de manera más lenta? ¿Tener los botones compartir trae más tráfico para garantizar su presencia?