• Inicio

Optimizando los Archivos CSS

Hay un interesante artículo de Paul Stamatiou donde se muestra una manera de reducirlos mucho más los archivos CSS realmente sorprendente.

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 agregándole .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 nuevo 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);

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Trinidad Servicios Informaticos es una comunidad sin fines de lucro. Los contenidos de este sitio son propiedad de quien los haya enviado y se encuentran bajo las licencias seleccionadas por sus autores. Si el autor no ha hecho constar expresamente otra licencia en su firma, están licenciados bajo una Licencia Creative Commons Atribución-No Comercial 2.5 Argentina. Los textos y fotografías que se publican cómo citas o cómo muestra están protegidos por sus propias licencias.

• Inicio