compress-350-c

Hay muchas formas de optimizar nuestro CSS, una forma es usar PHP, esto debe ser obligatorio si tenemos CSS generado por PHP se cargará código PHP por cada repetición a la hoja de estilos algo casi mortal para la gente que tenga un servidor que no admita mucho tráfico.

Simplificar

A veces nuestra hoja de estilos tiene demasiados espacios, tabulaciones y demás. Podemos ahorrarnos dichos espacios con CleanCSS (Nivel High) una herramienta que nos permitirá adelgazar nuestro código CSS agrupando los selectores similares y quitando espacios y tabulaciones de él.

Una vez que se ha optimizado otro factor importante a tener en cuenta es el “ruido” de nuestro código CSS. Puede ser de un 10% o 20%. Clean CSS está basado en CSSTidy así que si queremos utilizarlo en nuestros proyectos, mucho mejor, ya que lo haremos todo más automático y conforme vayamos escribiendo nuestro código CSS, irá optimizando la hoja de estilos.

Comprimir

Gracias a Apache 1.3 se puede utilizar el mod_gzip (mod_deflate si usamos Apache 2.2) para poder comprimir las páginas y archivos que nosotros queramos. El ahorro de este proceso consiste en que se pueden mantener más conexiones activas al ser el tamaño del archivo mucho más pequeño y, como consecuencia, que su transferencia sea más rápida.

Si usamos Apache 2.x, una vez que hayamos activado el mod_deflate es sencillo indicar que archivos queremos que se compriman, añadiendo este código a httpd.conf:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

Al comprimir mediante Apache se consumen muchos menos recursos que usando PHP y su compresión es muy similar. Incluso hay gente que guarda la versión comprimida de cada archivo para no tener que comprimirlos una y otra vez mediante el uso de MultiViews o mod_cache para ahorrar más tiempo de CPU.

Caché

Desde Apache también podemos definir cuanto tiempo ha de permanecer nuestro archivo CSS (además de imágenes u otros tipos de archivos) en el navegador al agregar header Expires en la respuesta. Para dicho proceso se utiliza el mod_expires:

ExpiresActive on
ExpiresByType application/x-javascript “access plus 1 week”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType text/css  “access plus 1 week”

Dicho código se traduce en que las imágenes serán guardas en el navegador por caché durante un mesLa configuración anterior indica que a las imágenes serán cacheadas durante un mes y los archivos CSS y Javascript serán guardados durante una semana.

Agregar el header Expires no resulta del todo útil si en la respuesta se incluyen los headers Last-Modified o ETag, ya que le navegador usar estos últimos dos valores para consultar si hay una nueva versión del archivos, el servidor enviará el código de estado 304 Not Modified si no hay cambios.

Si nuestra hoja de estilos es cambiada con frecuencia, este proceso es adecuado, pero si no se aplica ningún cambio en mucho tiempo, se pueden eliminar los headers para que el archivo se guarde en la caché hasta que Expires sea menor que la fecha actual. Esto se incluiría en la configuración de Apache así:

<filesmatch “\\.(ico|jpg|jpeg|png|gif|css|js)$”>
Header unset last-modified
</filesmatch>
Header unset ETag
FileETag None

Y si necesitamos enviar otra versión de nuestra hoja de estilos, un archivo javascript o una imagen, bastaría con cambiar el nombre del archivo y agregar el número de la versión.

En definitiva Apache es mucho más sencillo optimizar que con PHP, ya que con Apache los cambios que apliquemos en el servidor se pueden aplicar a todos los archivos y dominios, con PHP es más complejo, a no ser que tengamos problemas con Apache y no lo podamos usar, recomiendo usarlo para optimizar nuestras hojas de estilos (CSS) u otros archivos.

Vía | MdW