Finally the help of IT is here

Blog de soluciones informaticas.

Mejorar rendimiento pagina web (Social buttons)

Escrito por Xavier Xaus Nadal on marzo 17th, 2013

CleanSaveBtn white Mejorar rendimiento pagina web (Social buttons)PdfBtn white Mejorar rendimiento pagina web (Social buttons)EmailBtn white Mejorar rendimiento pagina web (Social buttons)CleanPrintBtn white Mejorar rendimiento pagina web (Social buttons)

Hoy os mostraremos como mejorar rendimiento pagina web haciendo que los botones sociales de facebook, twitter y google plus se carguen en la web, pero únicamente cuando le pasamos el ratón por encima.

Como todos sabréis soy un apasionado de la mejora del rendimiento web y podéis ver ejemplos de ello en este mismo blog.

Conseguimos muy buenos resultados de carga incluso estando en un hosting compartido sin VPS por falta de pasta.

Una de las últimas novedades que he implantado ha sido la carga de los fastidiosos bocadillos de las redes sociales que a parte de bajarnos la puntuación en las páginas de test de performance como http://www.webpagetest.org  o http://www.gtmetrix.com hacían que la web cargara más lenta provocando un descenso en el posicionamiento de google entre otros buscadores.

Para conseguir solventar este problema os voy a mostrar varios ejemplos en vivo para poderlo adaptar a cualquiera de vuestras webs.

  • La web carga un 55% más rápido.
  • WordPress –> Podéis ver el resultado en este mismo blog http://www.megacrack.es.
  • Prestashop –> Podéis ver el resultado en http://www.venlotodo.com (Página web de venta de todo tipo de productos entre ellos sexshop con unos precios impresionantes (enviad un mail a ventas@venlotodo.com y decid que venís de parte de MegaCracks y os harán un descuento seguro.) La lástima es que solo venden a España, y además si sois de la provincia de Barcelona hablad con ellos y el precio aún será mejor).

Para que veáis el cambio podéis usar el siguiente enlace que compara la velocidad de carga entre 2 webs http://whichloadsfaster.com/.

Me considero bastante incapacitado para la programación, pero soy bastante hábil en el arte de la lógica y en entender como funcionan las cosas y sobretodo me gusta lo que hago e invierto el tiempo que haga falta. (Os digo esto por que estoy seguro que el código fuente se podrá mejorar enormemente y si con vuestros comentarios podéis hacer que la comunidad se beneficie de ello os daremos las gracias desde este blog viendo vuestras sugerencias de mejora).

Para implementarlo en cualquier web con HTML

A continuación os enseño el código fuente de la web (HTML), lo que hacemos es disponer de varias imágenes de los mismos botones que tenemos en facebook, twitter y google plus y cuando pasamos el ratón por encima mediante un javascript llamamos a las funciones que activan el script de cada uno de los elementos sociales.

<html>
<body>

<div class="g-plusone" data-size="medium" data-href="http://www.megacrack.es" onMouseOver="activate_gp()">
<IMG SRC="../files/gplus.png" width=35 height=23>
</div>
<div>
<a href="https://twitter.com/megacracks" class="twitter-follow-button"
 data-show-count="true" data-show-screen-name="false" data-lang="es" onMouseOver="activate_tw()">
<IMG SRC="../files/seguir.png" width=62 height=22></A></div>
<div class="fb-like" data-href="http://www.megacrack.es" data-send="false" data-layout="button_count"
 data-width="100" data-show-faces="false" onMouseOver="activate_fa()" >
<div class="fb-like" data-href="http://www.megacrack.es" data-send="false" data-layout="button_count"
 data-width="100" data-show-faces="false" onMouseOver="activate_fa()" ></div>
<IMG SRC="../files/megusta.png" width=74 height=24></div>

<script type="text/javascript">

	<!-- <JavaScript SD for Facebook Like Button /> -->
	function activate_fa()
	{
		(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/es_LA/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));

	}
	<!-- <JavaScript SD for Google Plus Like Button /> -->
	function activate_gp()
	{
		window.___gcfg = {lang: 'es'};
		(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);
		}
		)();
	}
	<!-- <JavaScript SD for Twitter Button /> -->	
	function activate_tw(){

		  !function (d,s,id)
		  {
			var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
			{
				js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
				fjs.parentNode.insertBefore(js,fjs);
			}
		  }
		  (document,"script","twitter-wjs");
	}
</script>

</body>
</html>

Para implementarlo en Wordpress

Antes que nada deberéis subir vuestros ficheros con las imágenes optimizadas con RIOT por ejemplo (Impresionante programa para comprimir imágenes) para que sea lo más eficiente posible a vuestro wordpress en la carpeta files por ejemplo. Al final del artículo os dejaré los enlace a los ficheros png para que no tengáis que descargarlos y comprimirlos, etc… (Están súper optimizados)

Lo que he hecho es separar el código de las funciones en javascript y ponerlo en el fichero header.php ubicado en la ruta wp-content\themes\<vuestro tema>\header.php justo antes de cerrar el head.

<script type=“text/javascript”> <!– <JavaScript SD for Facebook Like Button /> –> function activate_fa() { (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/es_LA/all.js#xfbml=1″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’)); } <!– <JavaScript SD for Google Plus Like Button /> –> function activate_gp() { window.___gcfg = {lang: ‘es’}; (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); } )(); } <!– <JavaScript SD for Twitter Button /> –> function activate_tw(){ !function (d,s,id) { var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) { js=d.createElement(s);js.id=id;js.src=“//platform.twitter.com/widgets.js”; fjs.parentNode.insertBefore(js,fjs); } } (document,“script”,“twitter-wjs”); } </script>

He creado un widget HTML y he puesto la parte de código que muestra las imágenes dentro de varios div. Esta parte de código es la que os mostrará los botones de las redes sociales. Adaptadlos por los que vosotros tengáis.

<div class="g-plusone" data-size="medium" data-href="http://www.megacrack.es" onMouseOver="activate_gp()">
<IMG SRC="../files/gplus.png" width=35 height=23>
</div>
<div>
<a href="https://twitter.com/megacracks" class="twitter-follow-button"
 data-show-count="true" data-show-screen-name="false" data-lang="es" onMouseOver="activate_tw()">
<IMG SRC="../files/seguir.png" width=62 height=22></A></div>
<div class="fb-like" data-href="http://www.megacrack.es" data-send="false" data-layout="button_count"
 data-width="100" data-show-faces="false" onMouseOver="activate_fa()" >
<div class="fb-like" data-href="http://www.megacrack.es" data-send="false" data-layout="button_count"
 data-width="100" data-show-faces="false" onMouseOver="activate_fa()" ></div>
<IMG SRC="../files/megusta.png" width=74 height=24></div>

Funciona muy bien excepto el de facebook que no sé como arreglarlo. (Si alguien me ayuda se lo agradeceré y la comunidad también).

Para implementarlo en prestashop

En prestashop es un poco más complicado, pero también se puede hacer.

Lo que haremos es editar el fichero header.tpl que encontraréis en la siguiente ruta en vuestro ftp o desde vuestro proveedor de hosting para prestashop: public_html\themes\default\header.tpl

Agregad las siguientes líneas de código justo antes de cerrar el head.

<script type="text/javascript">

 function activate_fa()
	{

         (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/es_LA/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	}

function activate_gp()
	{
	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);
	}

function activate_tw()
	{

         !function (d,s,id)
	{
	var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
	{
	js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
	}
	  }
	  (document,"script","twitter-wjs");
	}
</script>

Cuando tengáis hecho esto necesitaréis un addon de prestashop llamado HTMLBOX que podéis descargar desde http://mypresta.eu/modules/front-office-features/html-box.html.

Ahora únicamente deberéis activar el módulo y en su configuración agregar el siguiente código:

Las primeras líneas de código las podéis dejar sin poner (Es para conseguir un aspecto idéntico al de los demás módulos en versión 1.5.3 de prestashop)

<p class=”title_block” style=”background-color: #383838; padding: 6px 11px;

color: #fff; text-shadow: 0 1 px 0 #000; font-size: 12px; font-weight: bold;”>AYUDANOS PULSA ME GUSTA</p>

Esta parte de código es la que os mostrará los botones de las redes sociales. Adaptadlos por los que vosotros tengáis.

<p>

<div class="fb-like" data-href="http://www.venlotodo.com" data-send="false"
 data-layout="button_count" data-show-faces="false" ></div>
<div class="fb-like" data-href="http://www.venlotodo.com" onMouseOver="activate_fa()"
 data-send="false" data-layout="button_count" data-show-faces="false" >
<IMG SRC="../files/megusta.png" width=74 height=24>
</div>

<div class="g-plusone" data-href="http://www.venlotodo.com" data-size="medium"
 onMouseOver="activate_gp()">
<IMG SRC="../files/gplus.png" width=35 height=23>
</div>

<div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.venlotodo.com"
 data-lang="es" onMouseOver="activate_tw()">
<IMG SRC="../files/twittear.png" width=62 height=22></A></div>
</p>

Esto es todo, espero que os funcione que hayáis aprendido como mejorar rendimiento pagina web y si tenéis algún problema dejad un mensaje y los intentaré contestar.

Ficheros con imágenes de botones sociales comprimidos

Como he prometido antes os dejo los ficheros de imágenes de las redes sociales comprimidos y listos para descargar:

Twitter –-> http://www.megacrack.es/files/seguir.png

Google Plus –> http://www.megacrack.es/files/gplus.png

Facebook –> http://www.megacrack.es/files/megusta.png

pixel Mejorar rendimiento pagina web (Social buttons)
Etiquetas: , , , , , , , , ,


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>