aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Una forma de conseguir que nuestras páginas parezcan que cargan más rápido es usar la comprensión Gzip para devolver los ficheros CSS/JS comprimidos y así aligerar el peso de los mismos. Para ello podemos hacerlo de 3 formas diferentes:

Llamada HTML al fichero comprimido:

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Al tratarse de un sistema basado en PHP, simplemente tendremos que llamar al fichero .php que se encargará de comprimirnos la salida de nuestro CSS.

Test de velocidad

Vamos a provechar y testear cada uno de los métodos a ver que tal se comporta con un fichero CSS de diferentes tamaños:

1. 21kb
2. 105kb
3. 2mb

Para evitar cacheos, he añadido un rand() como parámetro al nombre del fichero. En las imagenes colocadas despues de cada método veremos los resultados de los diferentes pesos de ficheros y en cada uno de ellos nos encontraremos 3 líneas de tiempo en las que veremos a uno.css y css.php que son los ficheros que nos importan para este post.

• uno.css, el fichero CSS plano con los estilos en los diferentes pesos.
• css.php, los métodos encargados de comprimir el fichero uno.css.

Ambos devuelven el mismo CSS, uno.css en formato plano y css.php comprimido.

1) El método Paul Stamatiou

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
...
[CSS File]
...
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Insertamos el contenido CSS de nuestra hoja de estilos en lugar de [CSS File].

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

Fichero CSS de 105kb

Fichero CSS de 2mb

2) El método Perishable Press

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Insertaremos este código al inicio de nuestro fichero CSS, podemos modificar el tiempo de expiración del fichero ampliando así el cacheo del mismo.

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

Fichero CSS de 105kb

Fichero CSS de 2mb

3) El método Reinhold Weber

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* Sus ficheros CSS */
  include('ficheros1.css');
  ...
  include('ficherosN.css');

  ob_end_flush();
?>

Simplemente tendremos que importar mediante include() los ficheros CSS que deseemos comprimir y automáticamente obtendremos un único fichero CSS comprimido para nuestra aplicación.

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

Fichero CSS de 105kb

Fichero CSS de 2mb

4) El método aNieto2k

<?php
  // Directorio de estilos
  $dir = 'styles/';

  header('Content-type: text/css');
  ob_start("compress");

  function compress($buffer) {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  	/* Sus ficheros CSS */
	if ($gestor = opendir($dir)) {
    	while (false !== ($archivo = readdir($gestor))) {
			if (eregi(".css$",$archivo)) {
				include($dir.$archivo);
			}
    	}
    closedir($gestor);
	}
  ob_end_flush();
?>

Personalmente, me gusta el sistema propuesto por Reinhold Weber (aunque es el más lento), pero se me ha ocurrido que podría ser interesante modificarlo para que podamos coger todos los ficheros .css de un directorio y comprimirlos en uno solo. De esta forma no tendremos que modificar el fichero cada vez que añadieramos una hoja de estilos nueva.

Conclusiones

No hace falta ser un experto para darse cuenta que los métodos 1 y 2 ofrecen un mejor resultado en cuanto a compresión y tiempo de respuesta y es que el include() se nota. En el método 3, el exceso peso de los ficheros CSS es debido a que este mantiene la estructura de saltos de línea del fichero original frente a los métodos 1 y 2 que dejan el fichero CSS en una sola línea.

A la hora de elegir un sistema u otro, es interesante tener en cuenta las posibilidades de todos los métodos y sopesar los costes de tiempo y peso de cada uno de ellos.