
Archivos CSS mucho más pequeños
Después de estar leyendo un poco más sobre como hacer archivos CSS más pequeños, llegué a un muy interesante artículo de Paul Stamatiou donde muestra una manera de reducirlos mucho más, lo cual al principio vi con ojos un poco escépticos, pero luego de probarlo en algunos de mis diseños verdaderamente me sorprendió.
Para hacerlos más pequeños, vamos a utilizar una compresión GZIP y la vamos a realizar por medio de PHP. Tal como cuenta el autor, por ejemplo el archivo CSS de Digg pasó de 26kb a 6kb con este método. Para realizarlo hay que seguir estos pasos:
Cómo primer medida hacemos una copia de seguridad de nuestro archivo style.css (o como se llame) y renombramos al original agregandole .php al final. Es decir, debe quedar como style.css.php. Luego actualizamos el nombre de archivo en nuestras páginas, pasando del primer ejemplo al segundo:
<link rel="stylesheet" type="text/css" media="screen" xhref="/style.css"/>
<link rel="stylesheet" type="text/css" media="screen" xhref="/style.css.php"/>
Una vez hecho esto pasamos a la parte importante. Abrimos nuestro flamante archivo style.css.php y arriba de todo, en la primer línea agregamos lo siguiente:
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
A continuación vamos al final del archivo y agregamos:
<?php if(extension_loaded('zlib')){ob_end_flush();}?>
Listo, eso es todo. Ahora tu página debería cargar un poco más rápido y tal vez lo haga mucho más rápido. Lo que hicimos fue comprimir el CSS con la libería zlib, luego de haber comprobado que existe.
En Wordpress por ejemplo, la mayoría de los themes, por defecto cargan el archivo CSS de la siguiente manera:
<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>);
</style>
Para modificar el nombre, es decir, agregarle el .php al final, simplemente lo agregamos después de la llamada, lo cual quedaría algo así:
<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>.php);
</style>

- Lunes 24 de Septiembre de 2007 a las 18:52 ~ Translate to english
- Categorías ~ Wordpress, Diseño
- 14 comentarios realizados ~ Enlaces a esta entrada
- Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
- Enlazar este post ~
- Enlace corto ~
- ← El hoax del secuestro del perro de Nicole
- Hacer que nuestras páginas de Wordpress carguen más rápido →


Archivos CSS mucho más pequeños…
Para hacerlos pequeños, vamos a utilizar una compresión GZIP y la vamos a realizar por medio de PHP. Tal como cuenta el autor, por ejemplo el archivo CSS de Digg pasó de 26kb a 6kb con este método….
[…] Horacio Bella ha publicado un interesante tutorial de cómo comprimir CSS mediante el Uso de Gzip y zlib. Ideal si quieres reducir el tamaño de tu Web y, por consiguiente, la carga de ésta. “Por ejemplo el archivo CSS de Digg pasó de 26kb a 6kb con este método.” Excelente… Si te gustó el contenido, suscríbete al Feed de MarlexSystems […]
[…] En estos días les conté como hacer los archivos CSS más pequeños y con esto lograr que carguen más rapido en nuestro navegador. Ahora, para optimizar más aún la carga de nuestro sitio, podemos hacer que nuestras páginas también esten comprimidas. […]
[…] Vía | Gran Impetu […]
[…] Archivos CSS mucho más pequeños ~ Gran Impetu (tags: css) […]
Mucho más sencillo es usar el módulo deflate del apache, de esta forma no sólo comprimimos los css, además podemos hacer lo propio con los javascripts, los html o los rss.
La compresión es la misma (gzip) lo que pasa es que nos ahorramos el tiempo del procesado de php.
Para activarlo cargamos el módulo deflate y añadimos esto a nuestro fichero de configuración
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript
PerroVerd: Muy buen consejo. Gracias por colaborar.
[…] Archivos CSS mucho más pequeños vía Gran Ímpetu […]
[…] Vía Gran Ímpetu me encuentro con una forma que no conocía para comprimir nuestras hoja de estilos. Según comenta el autor la capacidad de compresión es enorme, y es muy fácil de implementar. Para ello simplemente debemos renombrar nuestra hoja de estilos con extensión php. Si nuestra hoja de estilos es estilos.css le cambiaremos el nombre a estilos.css.php. TEXTO PLANO HTML: […]
Comprimir tus archivos CSS hasta un 500%…
Una muy buena opción para comprimir nuestros archivos CSS utilizando PHP. La diferencia entre la velocidad de carga antes y después de utilizarlo es increíble….
Totalmente de acuerdo con PerroVerd.
Además te has olvidado de incluir las cabeceras de cache: si no se ha modificado el archivo no es necesario descargarselo. Y si sabes que no vas a modificar ese archivo en fechas próximas, o puedes aceptar darles un periodo de validez X, lo suyo es indicarlo con Cache-Control, de manera que no haya “ni que preguntarlo” y se de por válido el de la cache local sin tener que “contactar” con el servidor.
interesante! vamos a echarle una mirada!!!
Otra manera de comprimirlo con PHP
http://grupenet.com/2007/10/01/compress-css-on-the-fly/
[…] Archivos CSS mucho más pequeños […]