Finally the help of IT is here

Blog de soluciones informaticas.

Archive for the 'rendimiento web' Category

Como agilizar una web?

Activar Memcached en CentOs mediante putty

Posteado por Xavier Xaus Nadal on 22nd julio 2013

Buenas noches.

Hoy vamos a ver como se instalar paso a paso Memcached en un CentOs, también os servirá para los newbies en el tema para vuestros hosting, lo haremos de una forma muy genérica y que se pueda utilizar en cualquier servidor virtual (VPS) o servidor dedicado, o incluso en vuestro hosting compartido.

Nosotros lo vamos a hacer mediante putty para el cual previamente hemos configurado una conexión SSH desde nuestro servidor web. Lo vamos a hacer con credenciales root (Quizá a vosotros os falten estas credenciales) pero si disponéis de ellas este es vuestro artículo paso a paso.

Tras conectar con Putty al servidor nos solicitará un Login y un password, poned el de vuestro usuario root.

Lo primero que vamos a hacer es crear un directorio temporal con el comando mkdir donde descargaremos memcache en su versión estable en el ejemplo la del 22/9/2012 versión 2.2.7.

mkdir repo

cd repo

Ahora vamos a descargar desde el repositorio de internet la última versión estable con el siguiente comando.

wget http://pecl.php.net/get/memcache-2.2.7.tgz

Memcached 1

Como veis en la imagen hemos hecho un ls para ver que el fichero ha sido descargado en esta ruta.

 

 

Sigue leyendo MegaCrack »

Tags: , , , ,
Posteado por rendimiento web | No Comments »

Mejorar rendimiento pagina web (Social buttons)

Posteado por Xavier Xaus Nadal on 17th marzo 2013

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

Tags: , , , , , , , , ,
Posteado por rendimiento web | No Comments »

Comparador online de velocidad entre webs.

Posteado por Xavier Xaus Nadal on 22nd octubre 2011

Buenas,

Para los que estáis obsesionados con el rendimiento de vuestra web os paso un link de un excelente comparador de la velocidad en que os carga una web.

Únicamente debéis entrar en el siguiente link http://whichloadsfaster.com/ y seguir los pasos que os indico más abajo.

También os muestro otro link que ayuda muchísimo en medir los tiempos de cada carga de elemento en vuestra web, hacia donde van esos ms perdidos y como mejorarlos. Esta otra web se llama http://webpagetest.org y es buenísima.

Os paso el test sobre MegaCrack.es http://www.webpagetest.org/result/111022_WD_1YZRY/a ver que os parece: Pero recordad que esto no se consigue en un día, hay mucho trabajo por el medio que ya os explicaré en algún artículo posterior.

Sigue leyendo MegaCrack »

Tags: , , , , , , , , , ,
Posteado por rendimiento web, web, www | 1 Comment »