Reduce CSS y JS remotamente con Reducisaurus

This post was published 8 years ago. It may be exremely outdated.

Ya he hablado algunas veces de comprimir los archivos CSS y JS para mejorar el rendimiento de una aplicación web, sin embargo todas aquellas veces en las que he hablado de esto, lo he hecho con la idea de comprimir los archivos en nuestro servidor y ayer, en Anieto2k publicaron un artículo comentando un nuevo servicio llamado Reducisaurus. Este servicio nos permite enlazar a un archivo al cual le indicamos mediante variables de URL el contenido que queremos comprimir, de modo que la compresión la realiza el servidor de Reducisaurus. La compresión está basada en YUI Compressor y es realmente fácil de utilizar.

Si normalmente enlazaríamos nuestros archivos así:

<br />
&lt;script src=&quot;http://miweb.com/jquery.js&quot;&gt;&lt;/script&gt;<br />
&lt;script src=&quot;http://miweb.com/mootools.js&quot;&gt;&lt;/script&gt;<br />

Con Reducisaurus lo haríamos así:

<br />
&lt;script src=&quot;http://reducisaurus.appspot.com/js?url1=http://miweb.com/jquery.js&amp;url2=http://miweb.com/mootools.js&quot;&gt;&lt;/script&gt;<br />

Admite un par de parámetros más, como fileX (donde X es un número entero comprendido entre 1 e infninito y permite añadir código Javascript para comprimir que no esté en ningún archivo) o max-age (el cual indica el tiempo que dura la caché, en segundos, que por defecto es 600 segundos). Si queremos eliminar la caché, basta con establecer la variable de URL expire_urls a 0.

Pasando al CSS, el código funciona de la misma forma. Por ejemplo, si usamos el siguiente código para llamar a nuestro CSS:

<br />
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://miweb.com/style.css&quot; /&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
body { background:#000; }<br />
&lt;/style&gt;<br />

Con Reducisaurus lo haríamos así:

<br />
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://reducisaurus.appspot.com/css?url1=http://miweb.com/style.css&amp;file1=body { background:#000; }&quot;&gt;<br />

Al igual que con el código Javascript, podemos utilizar parámetros para controlar la caché.

Como todas las cosas, este sistema tiene unas desventajas, como por ejemplo, que dependemos totalmente del servidor de Reducisaurus, de modo que si este se desconecta, perdemos el estilo de la página. Además tengo la impresión de que ralentizará la carga, ya que el cliente cargará la página, el servidor de Reducisaurus cargará los archivos CSS y JS, comprimirá los archivos y el cliente finalmente los podrá cargar mientras que si usásemos compresión con Gzip (por ejemplo) al cargar la página el servidor los comprimiría automáticamente y el cliente no tendría que esperar a que otro servidor recibiese los archivos sin comprimir y los devolviese comprimidos. Sin embargo nunca está de más tener servicios como éste a mano.

Minimiza y ordena el CSS de tu theme de WordPress "al vuelo"

This post was published 9 years ago. It may be exremely outdated.

Ayer publicaron en Anieto2k una versión del compactador de CSS de Barry van Oudtshoorn que además de comptactar el CSS, ordena los atributos alfabéticamente.

Me ha parecido una idea bastante interesante adaptar un poco el compactador de Anieto2k a WordPress, con el objetivo de tener un archivo css fácil de modificar a la vez que el visitante cargase un CSS más ligero. No os penséis que he reescrito el script ni que he modificado mucho el código, realmente los cambios son insignificantes.

Para aplicar la compresión de CSS a nuestro theme de WordPress tenemos que crear un archivo llamado style.php. En él pondremos el siguiente código:

<?php
header('Content-type: text/css');
// Compresor de CSS por Anieto2k
class StyleSheetCompressor {
private $cssFile;
private $selectors = array();
function __construct($cssContent = '', $cleanComments = true){
$this->cssFile = $cssContent;
// Borramos comentarios
if ($cleanComments)
$this->cssFile = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $this->cssFile);
$selectors = array();
// Obtenemos todos los selectores
$partes = explode("}", $this->cssFile);
foreach($partes as $parte) {
if (!empty($parte))
array_push($this->selectors, new SelectorCSS($parte."}"));
}
}
function get($cleanSpaces = true){
$salida = '';
foreach($this->selectors as $selector) {
$salida .= $selector->get($cleanSpaces)."n";
}
// Borramos saltos de linea, espacios,...
if ($cleanSpaces)
$salida = str_replace(array("t", "n", "r"), '', $salida);
return $salida;
}
}
/*
 SelectorCSS
*/
class SelectorCSS{
private $properties = array();
private $selector;
function __construct($selector = ''){
$parts = explode("{", $selector);
if (count($parts) < 2) {
die("Selector " + selector +" incompleto");
}
$this->selector = trim($parts[0]);
$contents = trim($parts[1]);
if (strlen($contents) == 0) {
die("Selector " + selector + "vacio");
}
if (substr($contents,strlen($contents) -1 ,1) != '}'){
die("Selector "+selector+" no est&aacute; cerrado");
}
$contents = substr($contents, 0, $contents - 2);
$this->properties = explode(';', $contents);
}
function get(){
$str = $this->selector.'{';
natcasesort($this->properties);
foreach($this->properties as $property) {
if (!empty($property))
$str .= $property.";";
}
$str .= '}';
return $str;
}
}
// Fin de Compresor de CSS
$contenido = file_get_contents('style.css');
$styleSheet = new StyleSheetCompressor($contenido);
echo $styleSheet->get(true);
?>

En la línea 99, cambiad style.css por el nombre de vuestro archivo CSS (aunque la mayoría de las veces bastará con style.css).

A continuación abrid el archivo header.php de vuestro theme y buscad una línea similar a esta:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Reemplazadla por esta otra:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

¡Y listo! Ahora si queremos modificar el CSS basta con editar el archivo style.css, que mantiene la estructura, los espacios, comentarios y demás cosas que nos facilitan la edición, mientras que el compresor se dedica a comprimir el CSS para cada visita.