Optimización de peso en páginas web

He aquí una pequeña lista/chuleta de consejillos a la hora de optimizar la carga de nuestras páginas, o por lo menos la “landing page” que es la página que se cargará por defecto cuando visiten nuestro sitio web.

  • Comprimir el cuerpo de la página utilizando ‘zlib’. Si disponemos en nuestro servidor/hosting el soporte de compresión ‘zlib’ en PHP, pues lo aprovechamos
	<?php
	if(extension_loaded('zlib')){
		ob_start('ob_gzhandler');
	}
	header("Content-type: text/html");
	//cuerpo e/o includes
	if(extension_loaded('zlib')){
		ob_end_flush();
	}
	?>
  • Comprimir el tamaño de los archivos enlazados, y ya de paso, unirlos en sólo uno (si nos es posible). Hacemos, por ejemplo, para el javascript, un fichero llamado “javascript.php”, que será al que referenciaremos en las cabeceras del documento, y este englobará al resto, ya comprimidos con la técnica de marras del item 1 de la lista. Si lo hacemos con los css, sustituimos lo de ‘text/javascript‘ por ‘text/css‘ y santas pascuas (AVISO: el navegador Internet Explorer 6 no tolera bien la compresión en el CSS y no carga los estilos).
	<?php
		if(extension_loaded('zlib')){
			ob_start('ob_gzhandler');
		}
		header("Content-type: text/javascript");
		//para saber donde empieza cada uno mostramos comentarios vistosos
		
		echo '////////////////////////JQUERY////////////////////////////';
		
		include('jquery.js');
		
		echo '////////////////////////JQUERY UI////////////////////////////';
		include('jquery-ui.js');
		
		if(extension_loaded('zlib')){
			ob_end_flush();
		}
	?>
  • Comprimir el tamaño/cantidad de las imágenes . Pues si diseñamos nosotros mismos el estilo de la página, reducir al mínimo la cantidad de éstas y aprovecharlas con el uso del css
		background: url( 'imagenes/bg-header.png' ) repeat-x 100% 0%)

y a la hora de crearlas, comprimir al máximo su tamaño con el editor que usemos. Y si nos han pasado ya el diseño, pues lo optimizamos haciendo lo mismo, que si las hubiéramos hecho nosotros mismos, ya que si quieres las cosas bien hechas… ¡Hazlas tú en persona! ;-).
Librerías a utilizar en su versión “.min.”.
Si vas a utilizar librerías de javascript o css, descargátelas en su versión ligera, o ‘min’

  • Reducir el tamaño de los comentarios. No pasarse poniendo comentarios en el código, o bien guardar dos copias del archivo, una con comentarios para control personal, y la otra limpia de comentarios para colgarla, y de paso evitamos que las miradas curiosas al código fuente consigan información a través de ellos.
  • Evitar hacer redireccionamientos.
  • Utilizar AJAX para carga de elementos. Jquery, cómo otras librerías, permite a través de la función
	$(document).ready(function(){
		 //código
	});
la carga de elementos cuando ya se ha cargado el DOM completamente

Cargar las imágenes embebidas, codificadas en base64
Cuando subimos imágenes las convertimos a texto o las grabamos en 	MySQL cómo texto en vez de BLOB, reducimos las peticiones al servidor
		<?php
		$fichero = "/directorio-imagenes/imagen.gif";
		if($fp = fopen($fichero,"rb", 0))
		{
			$imagen = fread($fp,filesize($fichero));
			fclose($fp);
	   	// devuelve datos cifrados en base64
	   	//  formatear $imagen usando la semántica del RFC 2045
 
			$base64 = chunk_split(base64_encode($imagen));
			echo '<img src="data:image/gif;base64,' . $base64 .'" alt="Texto 		alternativo" width="100" height="100" />';
		}
		?>

Bueno, esto es una lista incompleta, ya lo sé, pero espero mejorarla con el tiempo cómo si fuera un riojita. Espero que le sea de utilidad a alguien.