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 →