En algún momento vimos lo fundamental que es habilitar la compresión gzip en WordPress para acelerar la carga del blog y ahorrar ancho de banda. La diferencia se nota y mucho, aunque esto no se aplica a los archivos CSS.

Por un lado, tenemos montones de herramientas para formatear y optimizar nuestros códigos CSS como podemos ver en esta gran lista realizada por Cosas Sencillas. Muchas de estas utilidades están disponible online y nos sirven de mucho para mejorar nuestros archivos. Clean CSS es una de las que utilizo. Pero podemos ir más allá y comprimir los archivos CSS con gzip utilizando PHP logrando resultados sorprendentes, como comprimir 11,5 kb en solo 2 kb en el caso de este blog.

Normalmente en WordPress, en la carpeta de nuestra plantilla tenemos un archivo style.css, y suele estar incluido de la siguiente forma o similar:

   <link rel="stylesheet" type="text/css" href="http://tublog/wp-content/themes/plantilla/style.css"   />

Lo primero que tenemos que hacer en este caso es crear una copia del archivo style.css con el nombre style.css.php. Después modificamos el código anterior para que haga referencia a este archivo, de forma que quedaría de esta forma:

   <link rel="stylesheet" type="text/css" href="http://tublog/wp-content/themes/plantilla/style.css.php"   />

Luego editamos el archivo style.css.php, agregando la siguiente línea al inicio del archivo:

   <?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Y esta línea al final:

   <?php if(extension_loaded('zlib')){ob_end_flush();}?>

Guardamos el archivo y listo. Al recargar la página el contenido del archivo style.css.php ahora se envía de forma comprimida, por lo que carga más rápido. En realidad no se comprime el archivo, sino el envío de datos. En WordPress se suele usar mucho la funcion <?php bloginfo(‘stylesheet_url’); ?> para referenciar al archivo CSS, entonces en ese caso la ruta podría quedar como <?php bloginfo(‘stylesheet_url’); ?>.php.

Para verificar que esto funciona, una forma es con la extensión Firebug para Firefox, habilitando la pestaña de Red y luego cargando la página. Allí veremos el resultado:

Tal vez el tamaño de un archivo CSS no es demasiado grande y hay otros aspectos a tener en cuenta para optimizar la velocidad de carga de nuestro blog, como disponer de una cache y optimizar las imágenes, pero no es algo a desmerecer ya que el CSS es algo que todo el tiempo se carga y no viene a mal reducir el tamaño al máximo.