¿Cuál es la forma más eficiente de agregar botones de redes sociales como "me gusta" y "+1" a su sitio?

Question

La tarea suena trivial, pero tengan paciencia conmigo.

Estos son los botones con los que trabajo:

• Google (1)
• Facebook (Like)
• Twitter (Tweet)
• LinkedIn (Compartir)

Con un poco de prueba en webpagetest.org descubrí que es increíblemente ineficiente si toma el fragmento de cada uno de estos servicios para colocar estos botones en su página. Además de las imágenes en sí, también está descargando efectivamente varios archivos JavaScript (en algunos casos, múltiples archivos JavaScript para un solo botón). El tiempo total de carga para el botón me gusta de Facebook y sus recursos asociados puede ser de hasta 2.5 segundos en una conexión DSL.

Ahora es algo mejor utilizar un servicio como ShareThis ya que puede obtener múltiples botones de una sola fuente. Sin embargo, no tienen soporte adecuado para Google +1. Si obtiene el código de ellos para el botón Google +1, todavía está extrayendo todos esos recursos de Google.

Tengo una idea que implica cargar todos los botones cuando se hace clic en un botón genérico de "Compartir". De esta forma, no se agrega al tiempo de carga de la página. Creo que esto se puede lograr utilizando el código descrito here como punto de partida. Probablemente esta sea una buena solución, pero pensé que podría preguntar aquí antes de ir por ese camino.

Answer 1

No me preocuparía, y he aquí por qué: si los sitios web en cuestión han administrado sus recursos de manera adecuada, y, vamos, es Google y Facebook, etc. ... el navegador debería almacenarlos en caché después de la primera solicitud. Puede ver el efecto en un servicio donde el caché es pequeño o está deshabilitado, pero, con toda probabilidad, todos sus clientes ya tendrán esos recursos en su caché antes de que lleguen a su página.

Y, sólo porque tenía curiosidad, aquí hay otra manera:

Aquí está el fragmento de código relevante de JavaScript facebook compartir de stackoverflow:

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}(); 

minified, porque, bueno, no me molesté para volver a trabajar el código.

Parece que los ingenieros de StackOverflow simplemente llaman a la página al hacer clic. Eso significa que es solo texto hasta que haga clic en él, que dinámicamente tira de todo en forma perezosa.

Answer 2

He encontrado una posible solución si no te importa el aspecto dinámico de estos botones. En otras palabras, si usted no tiene cuidado para mostrar cuántas personas tienen o han hecho +1 le gusta su página, que sólo puede utilizar estos enlaces ...

https://plusone.google.com/_/+1/confirm?hl=en&url={URL} 
http://www.facebook.com/share.php?u={URL} 
http://twitter.com/home/?status={STATUS} 
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE} 

Se podría simplemente tiene que insertar la adecuada parámetros. No es mucho más simple o ligero que eso. Todavía usaría íconos para cada botón, por supuesto, pero podría usar sprites CSS en este caso para ahorrar aún más. De hecho, puedo ir por esta ruta.

---

ACTUALIZACIÓN

he implementado este cambio y el tiempo de carga de la página pasó de 4,9 segundos a 3,9 segundos de 1,5 Mbps DSL. Y el número de solicitudes pasó de 82 a 63.

Tengo algunas optimizaciones de la interfaz de usuario más para hacer, pero este fue un gran paso en la dirección correcta.