Existen muchas técnicas para comprimir archivos con CSS, en esta entrada os enseñaré una más, usando PHP, reduciendo el número de peticiones HTTP si disponemos de varios archivos CSS.
La técnica se llama Reinhold Weber’s y combina todos los archivos CSS en uno, de forma que no tendrás que renombrar tus archivos CSS con una extensión PHP.
Los archivos CSS son incluidos pero los espacios en blanco no son eliminados, lo que facilita su lectura y depuración en herramientas como Firebug.
Para comprimir archivos CSS de este manera, sigue estos pasos:
1. Crea un archivo llamado styles.php en la misma ruta donde se encuentran tus archivos CSS.
2. Pega en el archivo anterior (styles.php) el siguiente código:
?php
if(extension_loaded('zlib')){
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);
ob_start('compress');
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
return $buffer;
}
// list CSS files to be included
include('baseline.css');
include('styles.css');
if(extension_loaded('zlib')){ob_end_flush();}
?>
Necesitarás actualizar la ruta del fichero CSS, apuntando hacia styles.php. Normalmente esta llamada se encuentra entre la etiqueta <head></head> de tu documento.
Los resultados:
Como puedes comprobar en la imagen siguiente, los 2 archivos CSS han sido convertidos a un solo archivo y el tamaño ha pasado de 11.2 KB a 3.2 KB. Los comentarios también se han removido del archivo, pero los espacios en blanco se han mantenido para evitar problemas por si existen fallos en la disposición del sitio (estructura).
Esta técnica es muy efectiva para aligerar el peso de nuestro sitio, pero tenemos que estar seguros de que nuestro servidor no tiene “mod_deflate” activado en la configuración Apache.
Si deseamos ver más técnicas para comprimir CSS con PHP, echad un vistazo a Ethanandjamie.
Espero que esto os ayude a acelerar la carga de vuestro sitio.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Escribir un comentario