Optimizar el CSS sin usar PHP
Esta mañana leí el artículo de 3+1 formas de comprimir nuestro CSS desde PHP en Anieto2k, pero no entendí ¿Por qué alguien quisiera optimizar su(s) hoja(s) de estilos con algo tan «pesado» como PHP? A menos que se tenga un CSS generado con PHP, esta tarea se puede hacer sin cargar PHP por cada petición a la hoja de estilos, lo cual es crítico cuando tu sitio tiene un tráfico considerable.
Simplifica
Cuando iniciamos a trabajar en nuestro reciente rediseño la hoja de estilos tenía muchos espacios, tabulaciones y algunos comentarios, lo cual era conveniente para la etapa de desarrollo. Al llegar a al punto en el que estamos seguros de que no habrían cambios drásticos, decidimos simplificar la hoja de estilos usando Clean CSS (en nivel High) para quitar los espacios y agrupar diferentes selectores con las mismas propiedades, entre otras optimizaciones, y guardarla así en el SVN.
En cuando se reduce el tamaño del css depende de cuanto «ruido» tenga la hoja de estilos, por lo que he visto puede ser entre un 10% a un 20%. Clean CSS está basado en CSSTidy así que si quieres automatizar este proceso de simplificación puedes usarlo en tu desarrollo y mantener optimiza la hoja de estilos conforme desarrollas.
Comprime
Con Apache 1.3 se puede usar el mod_gzip y con 2.2 el mod_deflate para comprimir las páginas y archivos que nosotros le indiquemos. Uno podría pensar que comprimir una y otra vez el mismo archivo termina siendo más un gasto de CPU, pero en realidad el ahorro está en que se pueden mantener más conexiones activas al enviarle los archivos comprimidos más rápidos.
Por ejemplo en Apache 2.x una vez activado el mod_deflate es bastante sencillo indicar a que tipos de archivos queremos que sean comprimidos, agregando esto al httpd.conf:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript
Esta configuración le indica comprimir páginas, archivos de texto, xmls, hojas de estilo y archivos javascript. Es lógico pensar que comprimir desde Apache consumirá menos recursos que hacerlo desde PHP y la compresión es prácticamente idéntica. Hay quienes incluso llegan a guardar la versión comprimida de cada archivo en vez de comprimirlos una y otra vez, usando MultiViews o mod_cache con tal de ahorrar aún más tiempo de CPU… esto es algo que aún no hemos probado en MdW.
Caché
Desde Apache también podemos definir cuanto tiempo el navegador debe guardar en caché cualquier archivo que se envíe, agregando el header Expires en la respuesta. Para esto nos sirve 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"
La configuración anterior indica que a las imágenes les agregue un mes de cache, mientras que los archivos CSS y JavaScript solo se guarden en cache 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.
Esto es adecuado si nuestra hoja de estilos cambia con frecuencia, pero si estamos seguros que durara varias semanas sin cambios se pueden eliminar los headers Last-Modified y ETag garantizando que el archivo se guarde en cache hasta que Expires sea menor que la fecha actual. En la configuración de Apache esto se indica así:
<FilesMatch "\\.(ico|jpg|jpeg|png|gif|css|js)$> Header unset last-modified </FilesMatch> Header unset ETag FileETag None
Y si en dado caso tenemos que enviar una nueva versión de cualquier imagen, css o javascript, lo más practico es cambiar el nombre del archivo (quizás agregando el número de versión).
En lo personal me gusta delegar estas tareas a Apache que en PHP, porque con unos cambios en la configuración del servidor podemos aplicarlos a todos los archivos y todos los dominios hospedados en este, mucho más sencillo que en PHP. Claro, excepto que tengamos una necesidad muy particular que Apache no pueda manejar. Estos cambios también se pueden aplicar a otros tipos de archivo, no solo a las hojas de estilo.
Loading ...
Javier Aroche para 
